前言

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 提供的方法非常豐富, 掌握這些常用方法可以讓你的程式碼更加簡潔易讀. 建議在開發時多加練習, 熟悉每個方法的使用時機.