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

 

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 和 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['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

Decreasing the length property does, however, delete elements.

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

This is explained further on the Array.length page.

使用 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. Note that you can not rely on them cross-browser. However, there is a shim available on GitHub.

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

(第一欄為索引)

技術規格

技術規格 狀態 備註
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

瀏覽器相容性

功能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基礎支援 (Yes) (Yes) (Yes) (Yes) (Yes)
功能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基礎支援 (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

更多資料

文件標籤與貢獻者

 此頁面的貢獻者: kdex, petercpg, Kaiyeh, cwlin0416, oooooo, m80126colin, lizlux
 最近更新: kdex,