2024-09-05 JavaScript 中，陣列（Array）許多操作方法和寫法

在 JavaScript 中，陣列（Array）有許多操作方法和寫法，從基本創建到各種內建方法處理陣列資料。這裡整理一些常用的陣列操作方法和寫法：

1. 陣列的宣告與初始化

• 使用字面量語法：

  let arr = [1, 2, 3, 4, 5];

• **使用 new Array()**：

  let arr = new Array(1, 2, 3, 4, 5);
  // 或指定陣列長度
  let arr = new Array(5); // 建立一個長度為 5 的空陣列

2. 存取陣列元素

• 使用索引存取元素（索引從 0 開始）：

  let arr = [10, 20, 30];
  console.log(arr[0]); // 10
  console.log(arr[2]); // 30

3. 遍歷陣列

• for 迴圈：

  let arr = [10, 20, 30];
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }

• for...of 迴圈：

  let arr = [10, 20, 30];
  for (let value of arr) {
    console.log(value);
  }

• forEach() 方法：

  let arr = [10, 20, 30];
  arr.forEach((value, index) => {
    console.log(`${index}: ${value}`);
  });

4. 新增、修改、刪除元素

• 新增元素：

  • 使用 push() 在陣列末尾新增元素：

    let arr = [1, 2, 3];
    arr.push(4); // arr 變成 [1, 2, 3, 4]

  • 使用 unshift() 在陣列開頭新增元素：

    let arr = [1, 2, 3];
    arr.unshift(0); // arr 變成 [0, 1, 2, 3]

• 修改元素：

  • 直接使用索引修改：

    let arr = [1, 2, 3];
    arr[1] = 20; // arr 變成 [1, 20, 3]

• 刪除元素：

  • 使用 pop() 移除末尾元素：

    let arr = [1, 2, 3];
    arr.pop(); // arr 變成 [1, 2]

  • 使用 shift() 移除開頭元素：

    let arr = [1, 2, 3];
    arr.shift(); // arr 變成 [2, 3]

5. 陣列合併與分割

• 合併陣列：

  • 使用 concat()：

    let arr1 = [1, 2];
    let arr2 = [3, 4];
    let arr3 = arr1.concat(arr2); // [1, 2, 3, 4]

• 分割陣列：

  • 使用 slice() 從陣列中擷取子陣列：

    let arr = [1, 2, 3, 4, 5];
    let subArray = arr.slice(1, 3); // [2, 3]

6. 搜尋陣列

• **indexOf()**：尋找元素的索引

  let arr = [1, 2, 3, 4, 5];
  console.log(arr.indexOf(3)); // 2

• **includes()**：檢查陣列中是否包含某個值

  let arr = [1, 2, 3];
  console.log(arr.includes(2)); // true

7. 排序與反轉

• **sort()**：對陣列進行排序（預設為字典順序）

  let arr = [3, 1, 4, 2];
  arr.sort(); // arr 變成 [1, 2, 3, 4]

• **reverse()**：將陣列順序反轉

  let arr = [1, 2, 3];
  arr.reverse(); // arr 變成 [3, 2, 1]

8. 陣列轉換

• **join()**：將陣列轉換為字串，並以指定的分隔符號連接

  let arr = [1, 2, 3];
  let str = arr.join('-'); // "1-2-3"

• **split()**：將字串轉換為陣列

  let str = "1,2,3";
  let arr = str.split(','); // [1, 2, 3]

9. 過濾、轉換與處理

• **filter()**：過濾符合條件的元素

  let arr = [1, 2, 3, 4];
  let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]

• **map()**：將每個元素經過一個函數後產生新陣列

  let arr = [1, 2, 3];
  let doubled = arr.map(num => num * 2); // [2, 4, 6]

• **reduce()**：累加陣列中的值

  let arr = [1, 2, 3, 4];
  let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10

10. 多維陣列

• 宣告與存取：

  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ];
  console.log(matrix[1][2]); // 6

11. 其他陣列操作方法

• **some()**：檢查是否至少有一個元素符合條件

  let arr = [1, 2, 3];
  let hasEven = arr.some(num => num % 2 === 0); // true

• **every()**：檢查是否所有元素都符合條件

  let arr = [2, 4, 6];
  let allEven = arr.every(num => num % 2 === 0); // true

• **find()**：找到第一個符合條件的元素

  let arr = [1, 2, 3, 4];
  let found = arr.find(num => num > 2); // 3

• **findIndex()**：找到第一個符合條件的元素的索引

  let arr = [1, 2, 3, 4];
  let index = arr.findIndex(num => num > 2); // 2

結論：

JavaScript 提供了多種處理陣列的寫法與方法，從基本的迭代、搜尋到更高階的處理方法，如 map()、reduce() 等。根據需求選擇合適的寫法可以提高程式碼的可讀性與性能。