Skip to content

陣列

在 JavaScript 中，陣列（Array）是一種用於存儲多個值的資料結構。陣列是可變的，可以動態調整大小並存儲不同類型的資料。下面是對 JavaScript 陣列的詳細說明，包括其基本用法、常用方法、遍歷方式，以及一些進階操作。

1. 創建陣列

你可以使用兩種主要方式來創建陣列：

1.1 使用陣列字面量

這是最常見的方式，直接用方括號 [] 定義陣列。

let fruits = ["apple", "banana", "cherry"];

1.2 使用 Array 構造函式

這種方式也可以用來創建陣列，但一般情況下不太常用。 

let fruits = new Array("apple", "banana", "cherry");
注意：如果使用 Array 構造函式，並且只傳入一個數字參數，它會創建一個指定長度的空陣列。 
let emptyArray = new Array(3);  // 創建一個長度為 3 的空陣列

2. 訪問和修改陣列元素

陣列中的元素是通過索引來訪問的，索引從 0 開始。

2.1 訪問元素

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);  // 輸出 "apple"
console.log(fruits[2]);  // 輸出 "cherry"

2.2 修改元素

你可以通過索引來修改陣列中的元素。 

fruits[1] = "blueberry";
console.log(fruits);  // 輸出 ["apple", "blueberry", "cherry"]

3. 陣列的長度

你可以使用 .length 屬性來獲取陣列的長度。 

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

3.1 自動調整陣列的長度

你可以直接修改 .length 屬性來增加或減少陣列的大小。 

fruits.length = 2;
console.log(fruits);  // 輸出 ["apple", "blueberry"]

fruits.length = 4;
console.log(fruits);  // 輸出 ["apple", "blueberry", empty × 2]

4. 常用的陣列操作方法

4.1 push 和 pop

  • push：在陣列末尾添加一個或多個元素，並返回新的陣列長度。
  • pop：移除並返回陣列末尾的元素。
fruits.push("date");
console.log(fruits);  // 輸出 ["apple", "blueberry", "cherry", "date"]

let lastFruit = fruits.pop();
console.log(lastFruit);  // 輸出 "date"
console.log(fruits);     // 輸出 ["apple", "blueberry", "cherry"]

4.2 unshift 和 shift

  • unshift：在陣列開頭添加一個或多個元素，並返回新的陣列長度。
  • shift：移除並返回陣列開頭的元素。
fruits.unshift("kiwi");
console.log(fruits);  // 輸出 ["kiwi", "apple", "blueberry", "cherry"]

let firstFruit = fruits.shift();
console.log(firstFruit);  // 輸出 "kiwi"
console.log(fruits);      // 輸出 ["apple", "blueberry", "cherry"]

4.3 splice

splice 用於在陣列中添加或刪除元素。這個方法會改變原始陣列，並返回被刪除的元素。

  • 刪除元素：splice(起始索引, 刪除數量)
  • 添加元素：splice(起始索引, 0, 新元素1, 新元素2, ...)
// 刪除元素
let removedFruits = fruits.splice(1, 1);
console.log(fruits);       // 輸出 ["apple", "cherry"]
console.log(removedFruits); // 輸出 ["blueberry"]

// 添加元素
fruits.splice(1, 0, "blueberry", "kiwi");
console.log(fruits);  // 輸出 ["apple", "blueberry", "kiwi", "cherry"]

4.4 slice

slice 用於返回一個新的陣列，這個陣列是原始陣列的子陣列。它不會改變原始陣列。 

let citrusFruits = fruits.slice(1, 3);
console.log(citrusFruits);  // 輸出 ["blueberry", "kiwi"]
console.log(fruits);        // 原始陣列不變 ["apple", "blueberry", "kiwi", "cherry"]

4.5 concat

concat 用於合併兩個或多個陣列，並返回一個新的陣列。

let moreFruits = ["mango", "pineapple"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits);  // 輸出 ["apple", "blueberry", "kiwi", "cherry", "mango", "pineapple"]

4.6 indexOf 和 lastIndexOf

這些方法用於查找元素在陣列中的位置：

  • indexOf：返回元素在陣列中首次出現的索引。如果未找到元素，則返回 -1。
  • lastIndexOf：返回元素在陣列中最後一次出現的索引。
let index = fruits.indexOf("kiwi");
console.log(index);  // 輸出 2

let lastIndex = fruits.lastIndexOf("kiwi");
console.log(lastIndex);  // 輸出 2

4.7 includes

includes 用於檢查陣列中是否包含某個元素，返回 true 或 false。

let hasKiwi = fruits.includes("kiwi");
console.log(hasKiwi);  // 輸出 true

4.8 join

join 將陣列中的所有元素轉換為一個字串，並使用指定的分隔符進行分隔。

let fruitString = fruits.join(", ");
console.log(fruitString);  // 輸出 "apple, blueberry, kiwi, cherry"

4.9 reverse

reverse 反轉陣列中元素的順序。這個方法會改變原始陣列。

fruits.reverse();
console.log(fruits);  // 輸出 ["cherry", "kiwi", "blueberry", "apple"]

4.10 sort

sort 用於對陣列中的元素進行排序，會改變原始陣列。 

fruits.sort();
console.log(fruits);  // 按字母順序排序，輸出 ["apple", "blueberry", "cherry", "kiwi"]

// 自定義排序規則
let numbers = [3, 1, 4, 1, 5, 9];
numbers.sort((a, b) => a - b);  // 由小到大排序
console.log(numbers);  // 輸出 [1, 1, 3, 4, 5, 9]

5. 遍歷陣列

5.1 使用 for 迴圈

傳統的 for 迴圈是遍歷陣列的常見方式。 

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

5.2 使用 for...of 迴圈

for...of 是 ES6 引入的遍歷方式，更加簡潔和直觀。

for (let fruit of fruits) {
    console.log(fruit);
}

5.3 使用 forEach 方法

forEach 方法允許你對陣列中的每個元素執行指定的函式。

fruits.forEach(function(fruit) {
    console.log(fruit);
});

// 使用箭頭函式
fruits.forEach(fruit => console.log(fruit));

6. 進階操作

6.1 map 方法

map 用於對陣列中的每個元素進行操作，並返回一個新陣列。

let lengths = fruits.map(fruit => fruit.length);
console.log(lengths);  // 輸出 [5, 9, 6, 5]

6.2 filter 方法

filter 用於過濾陣列中的元素，返回一個新陣列。

let longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits);  // 輸出 ["blueberry", "cherry"]

6.3 reduce 方法

reduce 將陣列中的所有元素聚合為單一值。

let totalLength = fruits.reduce((total, fruit) => total + fruit.length, 0);
console.log(totalLength);  // 輸出 25

7. 陣列的解構賦值

解構賦值允許你輕鬆地從陣列中提取值並賦給變數。

let [firstFruit, secondFruit] = fruits;
console.log(firstFruit);  // 輸出 "apple"
console.log(secondFruit);  // 輸出 "blueberry"

// 使用剩餘運算符
let [first, ...rest] = fruits;
console.log(rest);  // 輸出 ["blueberry", "kiwi", "cherry"]

8. 多維陣列

陣列中可以包含其他陣列，這些被稱為多維陣列。

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][2]);  // 輸出 6

9. 檢查是否為陣列

你可以使用 Array.isArray 方法來檢查一個變數是否為陣列。 

console.log(Array.isArray(fruits));  // 輸出 true
console.log(Array.isArray("hello"));  // 輸出 false

總結

JavaScript 中的陣列是一種非常靈活且功能強大的資料結構。掌握陣列的基本操作和常用方法將大大提升你操作資料的能力，並幫助你更好地處理複雜的資料處理任務。