javascript中reduce和reduceRight的區(qū)別

更新時間：2025年05月08日 10:47:20 作者：胡歌1

reduce和reduceRight都是JavaScript中用于遍歷數組并累積結果的方法,本文主要介紹了javascript中reduce和reduceRight的區(qū)別,具有一定的參考價值,感興趣的可以了解一下

1. 遍歷順序

reduce：從左到右遍歷數組（從第一個元素到最后一個元素）。
reduceRight：從右到左遍歷數組（從最后一個元素到第一個元素）。

2. 使用場景

reduce：適用于從左到右的累積操作，例如求和、拼接字符串等。
reduceRight：適用于從右到左的累積操作，例如反轉字符串、從后向前處理數據等。

3. 示例對比

（1）求和

reduce：

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 輸出: 10

reduceRight：

const arr = [1, 2, 3, 4];
const sum = arr.reduceRight((acc, item) => acc + item, 0);
console.log(sum); // 輸出: 10

說明：對于求和操作，reduce 和 reduceRight 的結果是相同的，因為加法滿足交換律。

（2）拼接字符串

reduce：

const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduce((acc, item) => acc + item, '');
console.log(result); // 輸出: "abcd"

reduceRight：

const arr = ['a', 'b', 'c', 'd'];
const result = arr.reduceRight((acc, item) => acc + item, '');
console.log(result); // 輸出: "dcba"

說明：reduce 從左到右拼接字符串，結果為 "abcd"；reduceRight 從右到左拼接字符串，結果為 "dcba"。

（3）處理嵌套結構

reduce：

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.reduce((acc, item) => acc.concat(item), []);
console.log(flattened); // 輸出: [1, 2, 3, 4, 5, 6]

reduceRight：

const arr = [[1, 2], [3, 4], [5, 6]];
const flattened = arr.reduceRight((acc, item) => acc.concat(item), []);
console.log(flattened); // 輸出: [5, 6, 3, 4, 1, 2]

說明：reduce 從左到右扁平化數組，結果為 [1, 2, 3, 4, 5, 6]；reduceRight 從右到左扁平化數組，結果為 [5, 6, 3, 4, 1, 2]。

（4）處理函數組合

reduce：

const functions = [
  (x) => x + 1,  // f(x) = x + 1
  (x) => x * 2,  // g(x) = x * 2
  (x) => x - 3   // h(x) = x - 3
];

const result = functions.reduce((acc, fn) => fn(acc), 5);
console.log(result); // 輸出: 9

執(zhí)行過程：

初始值：(x) => x（恒等函數）。
第一次組合：(x) => (x + 1)。
第二次組合：(x) => ((x + 1) * 2)。
第三次組合：(x) => (((x + 1) * 2) - 3)。

最終組合函數為：(x) => (((x + 1) * 2) - 3)。

reduceRight：

const functions = [
  (x) => x + 1,  // f(x) = x + 1
  (x) => x * 2,  // g(x) = x * 2
  (x) => x - 3   // h(x) = x - 3
];

const result = functions.reduceRight((acc, fn) => fn(acc), 5);
console.log(result); // 輸出: 5

執(zhí)行過程：

初始值：(x) => x（恒等函數）。
第一次組合：(x) => (x - 3)。
第二次組合：(x) => ((x - 3) * 2)。
第三次組合：(x) => (((x - 3) * 2) + 1)。

最終組合函數為：(x) => (((x - 3) * 2) + 1)。

4. 總結對比

特性	reduce	reduceRight
遍歷順序	從左到右（從第一個元素到最后一個元素）	從右到左（從最后一個元素到第一個元素）
返回值	累積的結果值	累積的結果值
適用場景	從左到右的累積操作（如求和、拼接字符串）	從右到左的累積操作（如反轉字符串、函數組合）
是否改變原數組	不會改變原數組（除非在回調中顯式修改對象）	不會改變原數組（除非在回調中顯式修改對象）