陣列（Array）基礎與方法

建立陣列

// 字面值（最常用）
let fruits = ["蘋果", "香蕉", "橘子"];

// 存取元素（索引從 0 開始）
console.log(fruits[0]);          // ← "蘋果"（第一個）
console.log(fruits[2]);          // ← "橘子"（第三個）
console.log(fruits.length);      // ← 3（陣列長度）

// 修改元素
fruits[1] = "芒果";             // ← 把"香蕉"改成"芒果"

增刪方法

let arr = [1, 2, 3];

// 尾部操作
arr.push(4);            // ← [1, 2, 3, 4]（尾部新增）
arr.pop();              // ← [1, 2, 3]（尾部移除，回傳 4）

// 頭部操作
arr.unshift(0);         // ← [0, 1, 2, 3]（頭部新增）
arr.shift();            // ← [1, 2, 3]（頭部移除，回傳 0）

// splice — 萬用刀（新增/刪除/取代）
let colors = ["紅", "橙", "黃", "綠", "藍"];

// splice(起始位置, 刪除幾個, ...要插入的元素)
colors.splice(2, 1);                // ← 從位置 2 刪 1 個：["紅","橙","綠","藍"]
colors.splice(1, 0, "粉");         // ← 在位置 1 插入：["紅","粉","橙","綠","藍"]
colors.splice(1, 1, "紫", "白");   // ← 位置 1 刪 1 個再插入 2 個

搜尋方法

let nums = [10, 20, 30, 20, 40];

nums.indexOf(20);        // ← 1（第一個 20 的位置）
nums.lastIndexOf(20);    // ← 3（最後一個 20 的位置）
nums.includes(30);       // ← true（有沒有 30）

// find — 找到第一個符合條件的元素
let users = [
    { name: "小明", age: 20 },
    { name: "小華", age: 25 },
    { name: "小美", age: 20 }
];
let found = users.find(u => u.age === 25);
console.log(found);      // ← { name: "小華", age: 25 }

// findIndex — 找到第一個符合條件的索引
let idx = users.findIndex(u => u.name === "小美");
console.log(idx);        // ← 2

遍歷方法

forEach

let fruits = ["蘋果", "香蕉", "橘子"];
fruits.forEach((fruit, index) => {   // ← 對每個元素執行
    console.log(`${index}: ${fruit}`);
});
// 0: 蘋果
// 1: 香蕉
// 2: 橘子

map — 轉換

let nums = [1, 2, 3, 4, 5];
let doubled = nums.map(n => n * 2);  // ← 每個元素 ×2，回傳新陣列
console.log(doubled);    // ← [2, 4, 6, 8, 10]
console.log(nums);       // ← [1, 2, 3, 4, 5]（原陣列不變！）

filter — 過濾

let nums = [1, 2, 3, 4, 5, 6];
let evens = nums.filter(n => n % 2 === 0);  // ← 保留偶數
console.log(evens);      // ← [2, 4, 6]

reduce — 累計

let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((acc, curr) => {
    // acc = 累計器（上一次的結果）
    // curr = 當前元素
    return acc + curr;
}, 0);                   // ← 0 是初始值
console.log(sum);        // ← 15

// 執行過程：
// acc=0, curr=1 → 0+1=1
// acc=1, curr=2 → 1+2=3
// acc=3, curr=3 → 3+3=6
// acc=6, curr=4 → 6+4=10
// acc=10, curr=5 → 10+5=15

排序

// sort 預設按字串排序（注意！）
let nums = [10, 2, 30, 4, 5];
nums.sort();             // ← [10, 2, 30, 4, 5] → 字串排序！
console.log(nums);       // ← [10, 2, 30, 4, 5]（10 < 2？因為 "1" < "2"）

// ✅ 正確的數字排序
nums.sort((a, b) => a - b);  // ← 升冪：[2, 4, 5, 10, 30]
nums.sort((a, b) => b - a);  // ← 降冪：[30, 10, 5, 4, 2]

其他實用方法

// 展開運算子（Spread）
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];  // ← [1, 2, 3, 4, 5, 6]
let copy = [...arr1];               // ← 淺拷貝

// 解構賦值
let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);    // ← 1
console.log(second);   // ← 2
console.log(rest);     // ← [3, 4, 5]

// flat — 攤平巢狀陣列
let nested = [1, [2, [3, [4]]]];
console.log(nested.flat());      // ← [1, 2, [3, [4]]]（攤一層）
console.log(nested.flat(Infinity)); // ← [1, 2, 3, 4]（全部攤平）

// 鏈式呼叫
let result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    .filter(n => n % 2 === 0)    // ← 過濾偶數：[2, 4, 6, 8, 10]
    .map(n => n * 10)            // ← 乘 10：[20, 40, 60, 80, 100]
    .reduce((acc, n) => acc + n, 0);  // ← 加總：300