舉例說明這三種方法map、reduce和filter的區別是什麼？

王铁柱6發表於2024-11-30
Filter

map、reduce 和 filter 都是 JavaScript 陣列的高階函式，它們允許你以宣告式的方式運算元組，而無需顯式地編寫迴圈。它們的主要區別在於它們如何轉換陣列以及返回的結果：

1. map:

  • 作用: 對陣列的每個元素應用一個函式，並返回一個包含轉換後元素的新陣列。原始陣列保持不變。
  • 類比: 就像一個工廠的流水線，每個產品（陣列元素）都經過相同的處理步驟（函式），最終得到一批新的產品（新陣列）。
  • 例子: 將陣列中的每個數字翻倍：
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // 輸出: [2, 4, 6, 8, 10]
console.log(numbers); // 輸出: [1, 2, 3, 4, 5] (原始陣列不變)

2. filter:

  • 作用: 根據提供的條件過濾陣列元素，返回一個包含滿足條件的元素的新陣列。原始陣列保持不變。
  • 類比: 就像一個篩子，只允許符合特定條件的顆粒（陣列元素）透過。
  • 例子: 過濾出陣列中的偶數：
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 輸出: [2, 4]
console.log(numbers); // 輸出: [1, 2, 3, 4, 5] (原始陣列不變)

3. reduce:

  • 作用: 將陣列的元素累積成一個單一的值。它接受一個累加器函式和一個初始值（可選）。累加器函式接受兩個引數：累加器的當前值和陣列的當前元素。
  • 類比: 就像滾雪球，雪球（累加器）隨著滾下山坡（遍歷陣列）不斷變大，最終變成一個大的雪球（最終結果）。
  • 例子: 計算陣列中所有數字的和：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, number) => accumulator + number, 0); // 0 是初始值
console.log(sum); // 輸出: 15


const product = numbers.reduce((accumulator, number) => accumulator * number, 1); // 1 是初始值 (對於乘法)
console.log(product); // 輸出: 120

//  沒有初始值的例子:
const sumWithoutInitial = numbers.reduce((accumulator, number) => accumulator + number);
console.log(sumWithoutInitial); // 輸出: 15  (第一個元素作為初始值)

總結:

方法 作用 返回值
map 轉換每個元素 新陣列，包含轉換後的元素
filter 過濾元素 新陣列，包含滿足條件的元素
reduce 將元素累積成一個單一值 單一值（可以是任何資料型別）

希望這些例子和解釋能夠幫助你理解 map、reduce 和 filter 之間的區別。它們是前端開發中非常常用的陣列方法，熟練掌握它們能讓你寫出更簡潔、高效的程式碼。

相關文章