陣列 (Array)

在 JavaScript 中，陣列 (Array) 是一個非常重要的資料結構，它允許你在一個變數中儲存多個值。陣列就像一個清單或一個櫃子，你可以依序存放數字、字串、物件，甚至是其他的陣列。

什麼是陣列？

想像一下你想記錄一週每天的心情。如果使用我們之前學過的變數，可能會這樣寫：

let moodDay1 = '開心';
let moodDay2 = '還好';
let moodDay3 = '超棒';
// ... 以此類推

這樣做非常繁瑣。陣列就是為了解決這個問題而生的。你可以用一個陣列來儲存所有心情，而每個心情在陣列裡稱為一個元素：

let weeklyMoods = ['開心', '還好', '超棒', '有點累', '期待週末', '放鬆', '準備收假'];

這樣一來，所有的資料都被整齊地存放在 weeklyMoods 這一個變數中了。

如何建立陣列？

建立陣列最常見的方式是使用中括號 []，並將元素用逗號 , 隔開。

// 一個空陣列
let emptyArray = [];

// 一個包含數字的陣列
let scores = [95, 88, 76, 100, 69];

// 一個包含字串的陣列
let fruits = ['蘋果', '香蕉', '橘子'];

// 一個混合型態的陣列 (雖然可以，但建議盡量讓陣列內元素型態一致)
let mixedData = ['Aaron', 25, true, { theme: 'dark' }];

如何存取陣列元素？

陣列中的每一個元素都有一個對應的索引 (Index)，可以透過這個索引值來取得元素，索引是從 0 開始的。你可以透過 陣列變數[索引] 的方式來取得或修改特定位置的元素。

let fruits = ['蘋果', '香蕉', '橘子'];

// 取得元素
console.log(fruits[0]); // 輸出 '蘋果' (索引 0 是第一個元素)
console.log(fruits[1]); // 輸出 '香蕉'
console.log(fruits[2]); // 輸出 '橘子'

// 如果存取不存在的索引，會得到 undefined
console.log(fruits[3]); // 輸出 undefined

// 修改元素
fruits[1] = '芭樂';
console.log(fruits); // 輸出 ['蘋果', '芭樂', '橘子']

TIP

記住！索引永遠從 0 開始，這對程式設計新手來說是一個很常見的混淆點。

陣列的長度

你可以使用 .length 屬性來取得陣列中元素的數量。

let weeklyMoods = ['開心', '還好', '超棒', '有點累', '期待週末', '放鬆', '準備收假'];
console.log(weeklyMoods.length); // 輸出 7

.length 非常有用，尤其是當你需要遍歷整個陣列時。

遍歷陣列 (Looping through an Array)

當我們想要對陣列中的每一個元素都做同樣的操作時，就需要使用迴圈。最常見的是 for 迴圈。

let scores = [95, 88, 76, 100, 69];

// 從索引 0 開始，直到最後一個元素
for (let i = 0; i < scores.length; i++) {
  console.log(`第 ${i + 1} 位學生的分數是: ${scores[i]}`);
  // 第 1 位學生的分數是: 95
  // 第 2 位學生的分數是: 88
  // 第 3 位學生的分數是: 76
  // 第 4 位學生的分數是: 100
  // 第 5 位學生的分數是: 69
}


/**
 * 對陣列使用 for 方法時還有另一種更簡潔的方式，稱為 `for...of` 迴圈
 * 
 * 意思是指每一次迴圈從 scores 陣列中取出一個 score
 * 從第一個開始取到最後一個
 */
for (let score of scores) { 
  console.log(`分數是: ${score}`);
}

常用的陣列方法

陣列本身內建了許多非常有用的方法，可以幫助我們輕鬆地操作資料。

新增與刪除元素

• push(): 在陣列的末尾新增一個或多個元素。

let fruits = ['蘋果', '香蕉'];
// push
fruits.push('橘子');
console.log(fruits); // 輸出 ['蘋果', '香蕉', '橘子']

• pop(): 回傳陣列的最後一個元素並刪除。

let fruits = ['蘋果', '香蕉'];
// pop
let lastFruit = fruits.pop();
console.log(lastFruit); // 輸出 '香蕉'
console.log(fruits);  // 輸出 ['蘋果']

• unshift(): 在陣列的開頭新增一個或多個元素。

let fruits = ['蘋果', '香蕉'];
// unshift
fruits.unshift('草莓');
console.log(fruits); // 輸出 ['草莓', '蘋果', '香蕉']

• shift(): 回傳陣列的第一個元素並刪除。

let fruits = ['蘋果', '香蕉'];
// shift
let firstFruit = fruits.shift();
console.log(firstFruit); // 輸出 '蘋果'
console.log(fruits);   // 輸出 ['香蕉']

遍歷與搜尋

• forEach(): 遍歷陣列，對每個元素執行指定的函式。

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
  console.log(num * 2); // 輸出 2, 4, 6, 8, 10
});

• map(): 遍歷陣列，根據傳入的函式對每個元素進行操作後回傳新的陣列

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map((num) => num * 2);
console.log(doubled); // 輸出 [2, 4, 6, 8, 10]

• filter(): 遍歷陣列，根據傳入的函式篩選出符合條件的元素

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // 輸出 [2, 4]

• find(): 遍歷陣列，根據傳入的函式尋找第一個符合條件的元素

let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find((num) => num === 2);
console.log(firstEven); // 輸出 2

• findIndex(): 遍歷陣列，根據傳入的函式尋找第一個符合條件的元素的"索引值"

let numbers = [1, 2, 3, 4, 5];
let firstEvenIndex = numbers.findIndex((num) => num === 2);
console.log(firstEvenIndex); // 輸出 1 (索引)

• every(): 遍歷陣列，根據傳入的函式判斷是否全部通過條件

let numbers = [1, 2, 3, 4, 5];
let allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // 輸出 false (不是所有數字都是偶數)

• some(): 遍歷陣列，根據傳入的函式判斷是否至少有一個元素通過條件

let numbers = [1, 2, 3, 4, 5];
let hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); // 輸出 true (至少有一個數字是偶數)

其他實用方法

• indexOf(): 尋找指定元素的索引，如果找不到則回傳 -1。

let animals = ['貓', '狗', '兔子'];
console.log(animals.indexOf('狗')); // 輸出 1
console.log(animals.indexOf('獅子')); // 找不到。輸出 -1

• slice(): 回傳一個新的陣列，包含從開始到結束（不含結束）索引的元素。

let animals = ['貓', '狗', '兔子', '鳥', '魚'];
// 從索引 1 到 索引 3 (不含 4)
let pets = animals.slice(1, 4);
console.log(pets); // 輸出 ['狗', '兔子', '鳥']

• splice(): 透過刪除或取代現有元素來修改陣列。

let animals = ['貓', '狗', '兔子', '鳥', '魚'];
// 從索引 1 開始刪除 2 個元素
animals.splice(1, 2);
console.log(animals); // 輸出 ['貓', '鳥', '魚']

小結

陣列是 JavaScript 中處理資料集合的基礎工具。學會如何建立、存取、遍歷和操作陣列，將為你解決各種程式設計問題打下堅實的基礎。

範例練習

1. 建立一個陣列 myFavoriteFoods，並在其中放入 3 種你最喜歡的食物。

   // 請在這裡完成
   let myFavoriteFoods = []; 
   console.log(myFavoriteFoods);

2. 接續上題，使用 push() 方法新增一個食物到 myFavoriteFoods 陣列的最後。

   // 請在這裡完成
   console.log(myFavoriteFoods);

3. 取得 myFavoriteFoods 陣列中的第二個元素，並將它印出來。

   // 請在這裡完成

4. 使用 for 迴圈，將 myFavoriteFoods 陣列中的每一個食物都印出來，格式為 我喜歡吃 xxx。

   // 請在這裡完成

5. 建立一個數字陣列 numbers，包含 [5, 10, 15, 20, 25]。使用 pop() 移除最後一個數字，並用 console.log 印出被移除的數字。

   // 請在這裡完成
   let numbers = [5, 10, 15, 20, 25];