Array

JavaScript 中，全域物件 Array 是陣列的建構子，陣列是高階、似列表的物件。

建立陣列

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 removedItems = fruits.splice(pos, n); // 移除 pos 起的 n 個項目
// 假設 n = 1;

// ["Strawberry"]

複製陣列

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

語法

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

elementN

除了只傳遞一個參數給 Array 構造函數，且該參數為一個數字的情況（詳見下方的 arrayLength 參數），JavaScript 陣列會以傳入的元素進行初始化。

請注意，這種特殊情況僅適用於以 Array 構造函數建立的 JavaScript 陣列，而不適用於以括號語法建立的陣列常值（Array Literals）。

arrayLength

如果傳遞給 Array 構造函數的唯一參數是 0 和 2³²-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['array']);

length 及數值屬性間的關係

A JavaScript array's length property and numerical properties are connected. Several of the built-in array methods (e.g., join, slice, indexOf, etc.) take into account the value of an array's length property when they're called. Other methods (e.g., push, splice, etc.) also result in updates to an array's length property.

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

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

When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly:

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

Increasing the length.

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

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

使用 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:

屬性

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.

屬性

方法

Mutator methods

Accessor methods

Iteration methods

Array generic methods

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(isLetter, str)) {
  console.log("The string '" + str + "' contains only letters!");
}

Generics are also available on String.

These are currently not part of ECMAScript standards (though the ES2015 Array.from() can be used to achieve this). The following is a shim to allow its use in all browsers:

// Assumes Array extras already present (one may use polyfills for these as well)
(function() {
  'use strict';

  var i,
    // We could also build the array of methods with the following, but the
    //   getOwnPropertyNames() method is non-shimable:
    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
    //   return typeof Array[methodName] === 'function'
    // });
    methods = [
      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
      'some', 'every'
    ],
    methodCount = methods.length,
    assignArrayGeneric = function(methodName) {
      if (!Array[methodName]) {
        var method = Array.prototype[methodName];
        if (typeof method === 'function') {
          Array[methodName] = function() {
            return method.call.apply(method, arguments);
          };
        }
      }
    };

  for (i = 0; i < methodCount; i++) {
    assignArrayGeneric(methods[i]);
  }
}());

範例

範例：建立陣列

以下範例會產生長度為 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 (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

（第一欄為索引）

技術規格

瀏覽器相容性

更多資料

• JavaScript Guide: “Indexing object properties”
• JavaScript Guide: “Predefined Core Objects: Array Object”
• Array comprehensions
• Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras
• Typed Arrays