JavaScript 陣列
為什麼要使用陣列？
如果您有一個專案列表（例如，汽車名稱列表），將汽車儲存在單個變數中可能看起來像這樣：
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
但是，如果您想迴圈遍歷這些汽車並找到特定的一個呢？如果您不是 3 輛車，而是 300 輛呢？
解決方案是陣列！
一個數組可以在一個名稱下儲存許多值，您可以透過引用索引號來訪問這些值。
建立陣列
使用陣列字面量是建立 JavaScript 陣列最簡單的方法。
語法
const 陣列名稱 = [專案1, 專案2, ...];
使用 const 關鍵字宣告陣列是一種常見做法。
在以下章節瞭解更多關於陣列中使用 const 的資訊：JS 陣列 Const。
空格和換行不重要。一個宣告可以跨多行
您也可以先建立一個數組，然後提供元素
使用 JavaScript 關鍵字 new
以下示例也建立了一個數組，併為其賦值
上面兩個例子做的是完全相同的事情。
沒有必要使用 new Array()。
為了簡潔、可讀性和執行速度，請使用陣列字面量方法。
訪問陣列元素
透過引用 索引號 來訪問陣列元素
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
自己動手試一試 »
注意：陣列索引從 0 開始。
[0] 是第一個元素。[1] 是第二個元素。
更改陣列元素
此語句更改 cars 中第一個元素的值
cars[0] = "Opel";
將陣列轉換為字串
JavaScript 方法 toString() 將陣列轉換為以逗號分隔的陣列值字串。
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
結果
訪問整個陣列
使用 JavaScript，可以透過引用陣列名稱來訪問整個陣列
示例
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
自己動手試一試 »陣列是物件
陣列是一種特殊型別的物件。JavaScript 中的 typeof 運算子對於陣列返回“object”。
但是，JavaScript 陣列最好描述為陣列。
陣列使用數字來訪問其“元素”。在此示例中，person[0] 返回 John
物件使用名稱來訪問其“成員”。在此示例中，person.firstName 返回 John
陣列元素可以是物件
JavaScript 變數可以是物件。陣列是特殊型別的物件。
因此，您可以在同一個陣列中擁有不同型別的變數。
您可以在陣列中包含物件。您可以在陣列中包含函式。您可以在陣列中包含陣列
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
陣列屬性和方法
JavaScript 陣列的真正強大之處在於其內建的陣列屬性和方法
cars.length // 返回元素數量
cars.sort() // 對陣列進行排序
陣列方法將在下一章中介紹。
length 屬性
陣列的 length 屬性返回陣列的長度（陣列元素的數量）。
length 屬性總是比最高陣列索引大一。
訪問第一個陣列元素
訪問最後一個數組元素
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
自己動手試一試 »
迴圈陣列元素
一種遍歷陣列的方法是使用 for 迴圈
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
自己動手試一試 »
您還可以使用 Array.forEach() 函式
示例
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
自己動手試一試 »
新增陣列元素
向陣列新增新元素最簡單的方法是使用 push() 方法
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // 向 fruits 新增新元素 (Lemon)
自己動手試一試 »
也可以使用 length 屬性向陣列新增新元素
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // 向 fruits 新增 "Lemon"
自己動手試一試 »
警告！
新增高索引的元素可能會在陣列中建立未定義的“空洞”
示例
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // 在 fruits 中建立未定義的“空洞”
自己動手試一試 »
關聯陣列
許多程式語言支援帶命名索引的陣列。
帶命名索引的陣列稱為關聯陣列（或雜湊表）。
JavaScript 不支援帶命名索引的陣列。
在 JavaScript 中，陣列總是使用數字索引。
示例
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // 將返回 3
person[0]; // 將返回 "John"
自己動手試一試 »
警告！！
如果您使用命名索引，JavaScript 會將陣列重新定義為物件。
之後，一些陣列方法和屬性將產生不正確的結果。
示例
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // 將返回 0
person[0]; // 將返回 undefined
自己動手試一試 »
陣列和物件之間的區別
在 JavaScript 中，陣列使用數字索引。
在 JavaScript 中，物件使用命名索引。
陣列是一種特殊的物件，帶有數字索引。
何時使用陣列。何時使用物件。
- JavaScript 不支援關聯陣列。
- 當您希望元素名稱為字串（文字）時，應使用物件。
- 當您希望元素名稱為數字時，應使用陣列。
JavaScript new Array()
JavaScript 有一個內建的陣列建構函式 new Array()。
但您可以安全地使用 [] 代替。
這兩個不同的語句都建立了一個名為 points 的新空陣列
const points = new Array();
const points = [];
這兩個不同的語句都建立了一個包含 6 個數字的新陣列
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
自己動手試一試 »
new 關鍵字可能會產生一些意想不到的結果
// 建立一個包含三個元素的陣列
const points = new Array(40, 100, 1);
自己動手試一試 »
// 建立一個包含兩個元素的陣列
const points = new Array(40, 100);
自己動手試一試 »
// 建立一個包含一個元素的陣列？？？
const points = new Array(40);
自己動手試一試 »
一個常見錯誤
const points = [40];
與以下內容不同
const points = new Array(40);
// 建立一個包含一個元素的陣列
const points = [40];
自己動手試一試 »
// 建立一個包含 40 個未定義元素的陣列
const points = new Array(40);
自己動手試一試 »
如何識別陣列
一個常見問題是：如何知道變數是否是陣列？
問題在於 JavaScript 運算子 typeof 返回“object”
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
自己動手試一試 »
typeof 運算子返回 object，因為 JavaScript 陣列是一個物件。
解決方案 1
為了解決這個問題，ECMAScript 5 (JavaScript 2009) 定義了一個新方法 Array.isArray()
Array.isArray(fruits);
自己動手試一試 »
解決方案 2
instanceof 運算子如果一個物件是由給定的建構函式建立的，則返回 true
const fruits = ["Banana", "Orange", "Apple"];
(fruits instanceof Array);
自己動手試一試 »
巢狀陣列和物件
物件中的值可以是陣列，陣列中的值可以是物件
示例
const myObj = {
name: "John",
age: 30,
cars: [
{name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
{name:"BMW", models:["320", "X3", "X5"]},
{name:"Fiat", models:["500", "Panda"]}
]
}
要訪問陣列中的陣列，請為每個陣列使用 for-in 迴圈
示例
for (let i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (let j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
自己動手試一試 »
