JavaScript map和reduce的區別

XiaoNiuFeiTian發表於2024-11-22
JavaScript

‌map和reduce在JavaScript中都是用於處理陣列的方法，但它們的主要區別在於用途和返回值。‌

用途

  • ‌map()‌：主要用於對陣列的每個元素應用一個函式，並返回一個新陣列，這個新陣列包含原陣列每個元素呼叫函式處理後的結果。‌map()不會改變原陣列‌，返回的新陣列長度與原陣列相同‌12。
  • ‌reduce()‌：用於透過迭代將陣列中的元素累積到一個單一的值。‌reduce()會改變初始值，但不會改變原始陣列‌，返回的是一個單一的值‌23。

返回值

  • ‌map()‌：返回一個新陣列，這個陣列包含了原陣列每個元素經過處理後的結果。新陣列的長度與原陣列相同‌12。
  • ‌reduce()‌：返回一個單一的值，這個值是所有元素經過迭代處理後的累積結果‌23。

示例

  • ‌map()‌：假設有一個陣列 [1, 2, 3, 4, 5]，使用 map() 將每個元素乘以 2：
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 輸出: [2, 4, 6, 8, 10]
  • ‌reduce()‌：假設有一個陣列 [1, 2, 3, 4, 5]，使用 reduce() 求和：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 輸出: 15

應用場景

  • ‌map()‌：適用於需要對陣列中的每個元素進行轉換或計算，並生成一個新的陣列的情況。例如，將陣列中的每個元素平方、翻倍等。
  • ‌reduce()‌：適用於需要將陣列中的元素累積到一個單一值的情況。例如，計算陣列的總和、平均值、最大值等。

透過這些區別和示例，可以更好地理解在什麼情況下使用 map() 和 reduce() 方法。

參考：百度AI

相關文章