翻譯不完整。請協助 翻譯此英文文件

JavaScript 中的 Array 全域物件被用於建構陣列;陣列為高階(high-level)、似列表(list-like)的物件。

建立陣列

var fruits = ['Apple', 'Banana'];

console.log(fruits.length);
// 2

(透過索引)取得陣列項目

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

迭代陣列

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

加入項目至陣列末端

var newLength = fruits.push('Orange');
// ["Apple", "Banana", "Orange"]

移除陣列末端項目

var last = fruits.pop(); // 移除 (最末端的) Orange
// ["Apple", "Banana"];

移除陣列前端項目

var first = fruits.shift(); // 移除 (最前端的) Apple
// ["Banana"];

加入項目至陣列前端

var newLength = fruits.unshift('Strawberry') // 加到陣列前端
// ["Strawberry", "Banana"];

在陣列中尋找項目的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

移除指定索引位置的項目

var removedItem = fruits.splice(pos, 1); // 移除 pos 起的 1 個項目
                                        
// ["Strawberry", "Mango"]

移除指定索引位置起的多個項目

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 
// this is how to remove items, n defines the number of items to be removed,
// from that position(pos) onward to the end of array.

console.log(vegetables); 
// ["Cabbage", "Carrot"] (the original array is changed)

console.log(removedItems); 
// ["Turnip", "Radish"]

複製陣列

var shallowCopy = fruits.slice(); // 複製陣列
// ["Strawberry", "Mango"]

語法

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)

Parameters

elementN
除了只傳遞一個參數給 Array 構造函數,且該參數為一個數字的情況(詳見下方的 arrayLength 參數),JavaScript 陣列會以傳入的元素進行初始化。
請注意,這種特殊情況僅適用於以 Array 構造函數建立的 JavaScript 陣列,而不適用於以括號語法建立的陣列常值(Array Literals)。
arrayLength
如果傳遞給 Array 構造函數的唯一參數是 0 和 232-1(含)之間的整數,將回傳一個新的 JavaScript 陣列,其長度被設定為這個數字。如果參數是任何其他數值,將拋出 RangeError 異常。

說明

Array(「陣列」)是類似列表(list)的物件(Object),它們的原型(Prototype)擁有方法(methods)來執行遍歷和變異操作。JavaScript 陣列的長度(元素數量),以及其元素的類型都不是固定的。取決於工程師如何選擇使用陣列,可以隨時更改陣列的長度,也可不連續儲存資料, 所以並不保證這些資料是集中的。一般情況下,這些特性很方便使用;但若這些功能都不符合您的用途,您可能會想使用型別陣列(typed arrays)。

有些人認為即便會發生警告,仍然不應該使用關聯陣列,而應該使用 objects。您可參考輕量級 JavaScript 字典當中的範例。

存取陣列元素

JavaScript 陣列是 zero-indexed:陣列元素的索引值編排從 0 開始,而最後一個元素的索引值等同於陣列的 length 屬性減 1。

var arr = ['this is the first element', 'this is the second element'];
console.log(arr[0]);              // 記錄出 'this is the first element'
console.log(arr[1]);              // 記錄出 'this is the second element'
console.log(arr[arr.length - 1]); // 記錄出 'this is the second element'

Array 元素同時也是物件的屬性,與 toString 是一種屬性相同。但若要透過下面這種方式存取陣列元素,因為屬性名稱無效的關係,會發生語法錯誤:

console.log(arr.0); // 語法錯誤

會造成如此的原因沒有什麼特別的,在 JavaScript 當中無法用小數點的方式來參照一個名稱開頭為數字的屬性,而必須括號的表示方式來存取。舉例來說,若您有個物件的屬性名稱為「3d」,就只能用括號的方式來參照。

請看下列範例:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // 語法錯誤
console.log(years[0]);  // 程式正常
renderer.3d.setTexture(model, 'character.png');     // 語法錯誤
renderer['3d'].setTexture(model, 'character.png');  // 程式正常

注意:以這個 '3d' 例子來說,必須用引號將 3d 包起來。您也可以將 JavaScript 陣列的索引用引號包起來(例如使用 years['2'] 而不用 years[2]),但這不是必要的。JavaScript 會透過隱含的 toString,將 years[2] 當中的 2 強制轉換為字串。由於這個原因,'2''02' 會參照到 years 物件中的不同項目,下列程式範例結果可能回傳 true

console.log(years['2'] != years['02']);

另一種類似的情況是,物件屬性剛好與保留字(!)相同的情況。這種情況下僅能透過括號表示方式當中的字串常值來存取:

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['var']);

length 與數值屬性的關係

JavaScript 陣列的 length 屬性和其數值屬性相關。許多陣列的方法被呼叫時會參考 length 屬性的值(例如 joinsliceindexOf 等)。而有另一些方法則會去改變 length 屬性的值,如 pushsplice

var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3

如果給陣列設定一個數值屬性,其值為有效但超過當下範圍的陣列 index,JavaScript 引擎會依照此數值更新陣列的 length 屬性:

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

提高 length 屬性。

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

降低 length 屬性則會刪除陣列元素。

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Array.length 頁面裡有進一步解釋。

使用 match 回傳結果來建立陣列

The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by RegExp.exec, String.match, and String.replace. To help explain these properties and elements, look at the following example and then refer to the table below:

// Match one d followed by one or more b's followed by one d
// Remember matched b's and the following d
// Ignore case

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

The properties and elements returned from this match are as follows:

屬性/元素 說明 範例
input A read-only property that reflects the original string against which the regular expression was matched. cdbBdbsbz
index A read-only property that is the zero-based index of the match in the string. 1
[0] A read-only element that specifies the last matched characters. dbBd
[1], ...[n] Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited. [1]: bB
[2]: d

屬性

Array.length
Array 建構子的長度為 1。
get Array[@@species]
用來建立衍生物件的建構函數。
Array.prototype
可加入屬性至所有陣列物件。

方法

Array.from()
用類似陣列或可列舉物件,來建立新的 Array 實例。
Array.isArray()
若變數是陣列就回傳 true,否則回傳 false。
Array.of()
用可變數量的引數來建立新的 Array 實例,不論引數的數量或型別。

Array 實例

All Array instances inherit from Array.prototype. The prototype object of the Array constructor can be modified to affect all Array instances.

屬性

Array.prototype.constructor
Specifies the function that creates an object's prototype.
Array.prototype.length
Reflects the number of elements in an array.
Array.prototype[@@unscopables]
A symbol containing property names to exclude from a with binding scope.

方法

Mutator methods

These methods modify the array:

Array.prototype.copyWithin()
Copies a sequence of array elements within the array.
Array.prototype.fill()
Fills all the elements of an array from a start index to an end index with a static value.
Array.prototype.pop()
Removes the last element from an array and returns that element.
Array.prototype.push()
Adds one or more elements to the end of an array and returns the new length of the array.
Array.prototype.reverse()
Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.
Array.prototype.shift()
Removes the first element from an array and returns that element.
Array.prototype.sort()
Sorts the elements of an array in place and returns the array.
Array.prototype.splice()
Adds and/or removes elements from an array.
Array.prototype.unshift()
Adds one or more elements to the front of an array and returns the new length of the array.

Accessor methods

These methods do not modify the array and return some representation of the array.

Array.prototype.concat()
Returns a new array comprised of this array joined with other array(s) and/or value(s).
Array.prototype.includes()
Determines whether an array contains a certain element, returning true or false as appropriate.
Array.prototype.indexOf()
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
Array.prototype.join()
Joins all elements of an array into a string.
Array.prototype.lastIndexOf()
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
Array.prototype.slice()
Extracts a section of an array and returns a new array.
Array.prototype.toSource()
Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the Object.prototype.toSource() method.
Array.prototype.toString()
Returns a string representing the array and its elements. Overrides the Object.prototype.toString() method.
Array.prototype.toLocaleString()
Returns a localized string representing the array and its elements. Overrides the Object.prototype.toLocaleString() method.

Iteration methods

Several methods take as arguments functions to be called back while processing the array. When these methods are called, the length of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.

Array.prototype.entries()
Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
Array.prototype.every()
Returns true if every element in this array satisfies the provided testing function.
Array.prototype.filter()
Creates a new array with all of the elements of this array for which the provided filtering function returns true.
Array.prototype.find()
Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found.
Array.prototype.findIndex()
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.
Array.prototype.forEach()
Calls a function for each element in the array.
Array.prototype.keys()
Returns a new Array Iterator that contains the keys for each index in the array.
Array.prototype.map()
Creates a new array with the results of calling a provided function on every element in this array.
Array.prototype.reduce()
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
Array.prototype.reduceRight()
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
Array.prototype.some()
Returns true if at least one element in this array satisfies the provided testing function.
Array.prototype.values()
Returns a new Array Iterator object that contains the values for each index in the array.
Array.prototype[@@iterator]()
Returns a new Array Iterator object that contains the values for each index in the array.

Array generic methods

Array generics are non-standard, deprecated and will get removed in the near future

Sometimes you would like to apply array methods to strings or other array-like objects (such as function arguments). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable str is a letter, you would write:

function isLetter(character) {
  return character >= 'a' && character <= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:

if (Array.every(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

Generics are also available on String.

These are not part of ECMAScript standards and they are not supported by non-Gecko browsers. As a standard alternative, you can convert your object to a proper array using Array.from(); although that method may not be supported in old browsers:

if (Array.from(str).every(isLetter)) { 
  console.log("The string '" + str + "' contains only letters!"); 
}

範例

範例:建立陣列

以下範例會產生長度為 0 的 msgArray 陣列,然後指派字串值到 msgArray[0]msgArray[99],使陣列的長度變為 100。

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}

建立二維陣列

以下範例會用字串產生一張西洋棋盤的二維陣列。第一步是將士兵 'p' 從 (6,4) 移動至 (4,4),然後清空原本的位置 (6,4)。

var board = [ 
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// 將士兵往前移兩步
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

以下是輸出結果:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

使用陣列來以表格顯示多個數值

values = [];
for (var x = 0; x < 10; x++){
 values.push([
  2 ** x,
  2 * x ** 2
 ])
};
console.table(values)

結果會是

0	1	0
1	2	2
2	4	8
3	8	18
4	16	32
5	32	50
6	64	72
7	128	98
8	256	128
9	512	162

(第一欄為索引)

規範

技術規格 狀態 備註
ECMAScript 1st Edition (ECMA-262) Standard 初次定義。
ECMAScript 5.1 (ECMA-262)
The definition of 'Array' in that specification.
Standard 加入新方法:Array.isArray, indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array' in that specification.
Standard 加入新方法:Array.from, Array.of, find, findIndex, fill, copyWithin
ECMAScript 2016 (ECMA-262)
The definition of 'Array' in that specification.
Standard 加入新方法:Array.prototype.includes()

瀏覽器相容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes1 Yes Yes Yes
concat1 Yes15.5 Yes Yes
copyWithin451232 No329
entries38 Yes28 No258
every Yes Yes1.59 Yes Yes
fill45 Yes31 No Yes8
filter Yes Yes1.59 Yes Yes
find45 Yes25 No328
findIndex45 Yes25 No328
flat69 No No1 No56 No
flatMap69 No No1 No56 No
forEach Yes Yes1.59 Yes Yes
from45 Yes32 No Yes9
includes471443 No349
indexOf Yes Yes1.59 Yes Yes
isArray5 Yes4910.55
join1 Yes15.5 Yes Yes
keys38 Yes28 No258
lastIndexOf Yes Yes1.59 Yes Yes
length Yes Yes1 Yes Yes Yes
map Yes Yes1.59 Yes Yes
observe36 — 52 No No No No No
of45 Yes25 No Yes9
pop1 Yes15.5 Yes Yes
prototype Yes Yes1 Yes Yes Yes
push1 Yes15.5 Yes Yes
reduce Yes Yes3910.54
reduceRight Yes Yes3910.54
reverse1 Yes15.5 Yes Yes
shift1 Yes15.5 Yes Yes
slice1 Yes1 Yes Yes Yes
some Yes Yes1.59 Yes Yes
sort1 Yes15.5 Yes Yes
splice1 Yes15.5 Yes Yes
toLocaleString Yes Yes1 Yes Yes Yes
toSource No No1 No No No
toString Yes Yes1 Yes Yes Yes
unobserve36 — 52 No No No No No
unshift1 Yes15.5 Yes Yes
values66 Yes60 No539
@@iterator38 ?

36

27 — 362 3

17 — 274 5

No25 Yes
@@species ? ?48 ? ? ?
@@unscopables ? ?48 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes
concat Yes Yes Yes4 Yes Yes Yes
copyWithin Yes Yes Yes32 Yes Yes Yes
entries Yes Yes Yes28 Yes8 Yes
every Yes Yes Yes4 Yes Yes Yes
fill Yes Yes Yes31 Yes8 Yes
filter Yes Yes Yes4 Yes Yes Yes
find Yes Yes Yes4 Yes8 Yes
findIndex Yes Yes Yes4 Yes8 Yes
flat6969 No No156 No No
flatMap6969 No No156 No No
forEach Yes Yes Yes4 Yes Yes Yes
from ? Yes Yes32 Yes Yes Yes
includes Yes Yes1443349 Yes
indexOf Yes Yes Yes4 Yes Yes Yes
isArray Yes Yes Yes4 Yes Yes Yes
join Yes Yes Yes4 Yes Yes Yes
keys Yes Yes Yes28 Yes8 Yes
lastIndexOf Yes Yes Yes4 Yes Yes Yes
length Yes Yes Yes4 Yes Yes Yes
map Yes Yes Yes4 Yes Yes Yes
observe No No No No No No No
of Yes39 Yes25 Yes Yes4.0
pop Yes Yes Yes4 Yes Yes Yes
prototype Yes Yes Yes4 Yes Yes Yes
push Yes Yes Yes4 Yes Yes Yes
reduce Yes Yes Yes4 Yes Yes Yes
reduceRight Yes Yes Yes4 Yes Yes Yes
reverse Yes Yes Yes4 Yes Yes Yes
shift Yes Yes Yes4 Yes Yes Yes
slice Yes Yes Yes4 Yes Yes Yes
some Yes Yes Yes4 Yes Yes Yes
sort Yes Yes Yes4 Yes Yes Yes
splice Yes Yes Yes4 Yes Yes Yes
toLocaleString Yes Yes Yes4 Yes Yes Yes
toSource No No No4 No No No
toString Yes Yes Yes4 Yes Yes Yes
unobserve No No No No No No No
unshift Yes Yes Yes4 Yes Yes Yes
values6666 Yes60539 No
@@iterator Yes Yes ?

36

27 — 362 3

17 — 274 5

Yes Yes Yes
@@species ? ? ?48 ? ? ?
@@unscopables ? ? ?48 ? ? ?

1. Available in Firefox Nightly only. See bug 1435813 for status on enabling this by default.

2. A placeholder property named @@iterator is used.

3. Supported as @@iterator.

4. A placeholder property named iterator is used.

5. Supported as iterator.

參見

文件標籤與貢獻者

最近更新: k940545,