JavaScript 陣列

Created: October-14, 2018

在本教程中，你將學習如何在 JavaScript 中建立和運算元組。

什麼是陣列

陣列是複雜的變數，允許我們在單個變數名下儲存多個值或一組值。JavaScript 陣列可以儲存任何有效值，包括字串、數字、物件，函式甚至其他陣列，從而可以建立更復雜的資料結構，例如物件陣列或陣列陣列。

我們假設你要在 JavaScript 程式碼中儲存顏色名稱。在變數中逐個儲存顏色名稱可能如下所示：

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

但是如果你需要將一個國家的州或城市名稱儲存在變數中會發生什麼，這次不僅僅是三個可能是百十多個。將它們中的每一個儲存在單獨的變數中是相當困難和無聊的。此外，同時使用如此多的變數並跟蹤它們都將是一項非常困難的任務。這裡陣列開始發揮作用。陣列通過提供用於儲存多個值或一組值的有序結構來解決此問題。

建立一個陣列

在 JavaScript 中建立陣列的最簡單方法是在方括號（[]）中包含逗號分隔的值列表，如以下語法所示：

var myArray = [element0, element1 , ..., elementN];

也可以使用 Array() 建構函式建立陣列，如以下語法所示。但是，為簡單起見，建議使用以前的語法。

var myArray = new Array( element0 , element1 , ..., elementN );

以下是使用陣列文字語法建立的陣列的一些示例：

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

注意： 陣列是有序的值集合。陣列中的每個值都稱為元素，每個元素在陣列中都有一個數字位置，稱為索引。

訪問陣列的元素

可以使用方括號表示法通過索引訪問陣列元素。索引是表示元素在陣列中的位置的數字。

陣列索引從零開始。這意味著陣列的第一項儲存在索引 0 而不是 1，第二項儲存在索引 1，依此類推。陣列索引從 0 開始，索引最大為元素數減 1，因此，五個元素的陣列將具有從 0 到 4 的索引。

以下示例將向你展示如何通過索引獲取單個陣列元素。

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya

注意： 在 JavaScript 中，陣列實際上只是一種特殊型別的物件，它將數字索引作為鍵。陣列的 typeof 運算子將返回 object。

獲取陣列的長度

length 屬性返回陣列的長度，該陣列是陣列中包含的元素總數。陣列長度始終大於其任何元素的索引。

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5

迴圈陣列元素

你可以使用for迴圈按順序訪問陣列的每個元素，如下所示：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

ECMAScript 6 引入了一種更簡單的迭代陣列元素的方法，即 for-of 迴圈。在這個迴圈中，你不必初始化並跟蹤迴圈計數器變數（i）。

這是使用 for-of 迴圈重寫的相同示例：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Print array element
}

你還可以使用 for-in 迴圈遍歷陣列元素，如下所示：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

注意： 該 for-in 迴圈不應該被用在遍歷一個陣列，假如你關注索引順序的話。 for-in 迴圈時針對迭代物件的屬性進行的優化，你最好使用一個 for 迴圈或 for-of 迴圈如果你也需要索引數字的話。

向陣列新增新元素

要在陣列末尾新增新元素，只需使用 push() 方法，如下所示：

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4

同樣，要在陣列的開頭新增一個新元素，請使用以下 unshift() 方法：

var colors = ["Red", "Green", "Blue"]; 
colors.unshift("Yellow");
 
document.write(colors); // Prints: Yellow,Red,Green,Blue
document.write(colors.length); // Prints: 4

你還可以使用 push() 和 unshift() 方法一次新增多個元素，如下所示：

var colors = ["Red", "Green", "Blue"];
colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
 
document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voilet
document.write(colors.length); // Prints: 7

從陣列中刪除元素

要從陣列中刪除最後一個元素，可以使用 pop() 方法。此方法返回彈出的值。這是一個例子：

var colors = ["Red", "Green", "Blue"];
var last = colors.pop();
 
document.write(last); // Prints: Blue
document.write(colors.length); // Prints: 2

同樣，你可以使用 shift() 方法從陣列中刪除第一個元素。此方法還返回已移出的值。這是一個例子：

var colors = ["Red", "Green", "Blue"];
var first = colors.shift();
 
document.write(first); // Prints: Red
document.write(colors.length); // Prints: 2

提示： 在 push() 和 pop() 方法的執行速度比 unshift() 和 shift() 快。因為 push() 和 pop() 方法只是簡單地增加，並在一個陣列的末尾刪除元素因此元素不動，而 unshift() 與 shift() 需要在整個陣列的重建索引的陣列的開始增加或者刪除元素。

在任何位置新增或刪除元素

splice() 方法是一種非常通用的陣列方法，允許你使用語法 arr.splice(startIndex, deleteCount, elem1, ..., elemN) 在任何索引中新增或刪除元素。

這個方法有三個引數：第一個引數是開始拼接陣列的索引，它是必需的; 第二個引數是要刪除的元素數（0 如果你不想刪除任何元素，則使用它），它是可選的; 第三個引數是一組替換元素，它也是可選的。以下示例顯示了它的工作原理：

var colors = ["Red", "Green", "Blue"];
var removed = colors.splice(0,1); // Remove the first element
 
document.write(colors); // Prints: Green,Blue
document.write(removed); // Prints: Red (one item array)
document.write(removed.length); // Prints: 1
 
removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position one
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
document.write(removed.length); // Prints: 0
 
removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove one
document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
document.write(removed.length); // Prints: 1

splice() 方法返回已刪除元素的陣列，如果沒有刪除任何元素，則返回一個空陣列，如上例所示。如果省略第二個引數，則刪除從陣列的開頭到結尾的所有元素。不像 slice() 和 concat() 方法，splice() 方法修改它所呼叫的陣列。

從陣列建立字串

在某些情況下，你可能只想通過連線陣列的元素來建立字串。為此，你可以使用 join() 方法。此方法採用可選引數，該引數是在每個元素之間新增的分隔符字串。如果省略分隔符，則預設情況下 JavaScript 將使用逗號（,）。以下示例顯示了它的工作原理：

var colors = ["Red", "Green", "Blue"];
 
document.write(colors.join()); // Prints: Red,Green,Blue
document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue

你還可以使用 toString() 將陣列轉換為逗號分隔的字串。此方法不接受分隔符引數 join() 。這是一個例子：

var colors = ["Red", "Green", "Blue"];
document.write(colors.toString()); // Prints: Red,Green,Blue

提取陣列的一部分

如果要提取陣列的一部分（即子陣列）但保持原始陣列完整，則可以使用 slice() 方法。此方法需要 2 個引數：start index（開始提取的索引）和可選的 end index（結束提取之前的索引），如 arr.slice(startIndex, endIndex) 。這是一個例子：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var subarr = fruits.slice(1, 3);
document.write(subarr); // Prints: Banana,Mango

如果省略 endIndex 引數，則提取到陣列末尾的所有元素。你還可以指定負索引或偏移量 - 在這種情況下， slice() 方法從陣列的末尾提取元素，而不是從開頭提取。例如：

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.slice(2)); // Prints: Mango,Orange,Papaya
document.write(fruits.slice(-2)); // Prints: Orange,Papaya
document.write(fruits.slice(2, -1)); // Prints: Mango,Orange

合併兩個或更多陣列

concat() 方法可用於合併或組合兩個或更多個陣列。此方法不會更改現有陣列，而是返回新陣列。例如：

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
 
// Creating new array by combining pets and wilds arrays
var animals = pets.concat(wilds); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra

concat() 方法可以使用任意數量的陣列引數，因此你可以從任意數量的其他陣列建立陣列，如以下示例所示：

var pets = ["Cat", "Dog", "Parrot"];
var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
 
// Creating new array by combining pets, wilds and bugs arrays
var animals = pets.concat(wilds, bugs); 
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

通過陣列搜尋

如果要在陣列中搜尋特定值，可以使用 indexOf() 和 lastIndexOf() 。如果找到該值，則兩個方法都返回表示陣列元素的索引。如果未找到該值，則返回 -1。indexOf() 方法返回找到的第一個，而 lastIndexOf() 返回找到的最後一個。

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits.indexOf("Apple")); // Prints: 0
document.write(fruits.indexOf("Banana")); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1

兩種方法還接受可選的整數引數 from index，該引數指定陣列中開始搜尋的索引。這是一個例子：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
// Searching forwards, starting at from- index
document.write(arr.indexOf(1, 2)); // Prints: 3
 
// Searching backwards, starting at from index
document.write(arr.lastIndexOf(1, 2)); // Prints: 0

你還可以使用 includes() 方法來確定陣列是否包含某個元素。此方法採用 indexOf() 與 lastIndexOf() 方法相同的引數，但它返回 true 或 false 代替索引。例如：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
document.write(arr.includes(1)); // Prints: true
document.write(arr.includes(6)); // Prints: false
document.write(arr.includes(1, 2)); // Prints: true
document.write(arr.includes(3, 4)); // Prints: false

如果要根據特定條件搜尋陣列，則可以使用 ES6 中新引入的 JavaScript 方法 find() 。此方法返回陣列中滿足提供的測試函式的第一個元素的值。否則它會返回 undefined。

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.find(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5

還有一個同 find() 方法相似的是 findIndex() 方法，它返回一個檢索到的元素的索引陣列，而不是它的值，例如：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.findIndex(function(element) {
  return element > 6;
});
document.write(result); // Prints: 8

find() 方法僅查詢滿足所提供的測試函式的第一個元素。但是，如果要查詢所有匹配的元素，可以使用 filter() 方法。

filter() 方法建立一個新陣列，其中包含成功通過給定測試的所有元素。以下示例將向你展示這實際上是如何工作的：

var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
 
var result = arr.filter(function(element) {
  return element > 4;
});
document.write(result); // Prints: 5,7
document.write(result.length); // Prints: 2