前言

JavaScript 中的 Array 提供了許多實用的方法來操作陣列，這篇文章整理了開發中最常使用的陣列方法，幫助你更有效率地處理資料。

新增與刪除元素

push()

將一個或多個元素添加到陣列的末尾，並返回陣列的新長度。

const arr = [1, 2, 3];
arr.push(4);

console.log(arr);
// expected output: Array [1, 2, 3, 4]

pop()

從陣列中刪除最後一個元素，並返回該元素的值。

const arr = [1, 2, 3];
arr.pop();

console.log(arr);
// expected output: Array [1, 2]

shift()

從陣列中刪除第一個元素，並返回該元素的值。

const arr = [1, 2, 3];
arr.shift();

console.log(arr);
// expected output: Array [2, 3]

unshift()

將一個或多個元素添加到陣列的開頭，並返回陣列的新長度。

const arr = [1, 2, 3];
arr.unshift(4);

console.log(arr);
// expected output: Array [4, 1, 2, 3]

陣列轉換方法

map()

將陣列中的每個元素映射到另一個函式中，並回傳一個新的陣列。

map() 可以接收三個參數：

  • currentValue：當前處理的元素（必須參數）
  • index：當前處理的元素的索引（選填參數）
  • array：呼叫 map 的陣列（選填參數）
const arr = [1, 2, 3];

const newArr = arr.map((item, index, array) => {
  return item * 2;
});

console.log(newArr);
// expected output: Array [2, 4, 6]

filter()

將陣列中的每個元素過濾，只保留符合條件的元素，並回傳一個新的陣列。

const arr = [1, 2, 3];

const newArr = arr.filter((item) => item > 1);

console.log(newArr);
// expected output: Array [2, 3]

陣列切割方法

slice()

回傳一個新的陣列，其中包含指定範圍的元素。

slice() 可以接收兩個參數：

  • start：開始切割的索引
  • end：結束切割的索引
const arr = [1, 2, 3];

const newArr = arr.slice(1, 2);

console.log(newArr);
// expected output: Array [2]

splice()

從陣列中刪除元素，也可以插入新元素，並返回被刪除的元素。

splice() 可以接收三個參數：

  • start：開始刪除的索引
  • deleteCount：刪除的元素個數
  • item1, item2, ...：插入的元素
const arr = [1, 2, 3];

const newArr = arr.splice(1, 1, 4, 5);

console.log(newArr);
// expected output: Array [2]
console.log(arr);
// expected output: Array [1, 4, 5, 3]

條件檢測方法

every()

檢測陣列中的每一個元素是否都符合條件，並回傳布林值。

const arr = [1, 2, 3];

const result = arr.every((item) => item > 1);

console.log(result);
// expected output: false

some()

檢測陣列中的元素只要有一個符合條件，就會回傳 true。

const arr = [1, 2, 3];

const result = arr.some((item) => item > 1);

console.log(result);
// expected output: true

總結

JavaScript Array 提供的方法非常豐富，掌握這些常用方法可以讓你的程式碼更加簡潔易讀。建議在開發時多加練習，熟悉每個方法的使用時機。