理解 ECMAScript 中的 reduce 和 reduceRight 方法

ECMAScript 中为数组提供了两个归并方法：reduce 和 reduceRight。这两个方法都会迭代数组的全部元素。并在此基础上返回一个最终的值。

reduce() 从数组左边开始迭代至数组末尾，reduceRight() 则从数组末尾迭代至数组左边。

介绍

reduce() 方法接收两个参数：

• 每个元素都会执行的函数(归并函数)；
  • 对于归并函数，接收 4 个参数：
    • prev：上一次归并函数的返回值
    • cur：当前值
    • index：当前值索引
    • arr：当前数组
• 可选的归并初始值。提供这个值，该值就充当 prev。否则，prev 为数组的第一项，cur 为数组的第二项

代码实例

// 实现数组中所有值的累加
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, curr, index, arr) => prev + curr);
console.log(sum); // 15

上面代码没有提供归并初始值，所以最开始 prev 值为数组的第一项 1，cur 为数组的第二项 2。
迭代过程是这样的：

• 第一次：prev（1），cur（2）
• 第二次：prev（1 + 2），cur (3)
• 第三次：prev（1 + 2 + 3），cur（4）
• 第四次：prev（1 + 2 + 3 + 4），cur（5）

输出：1 + 2 + 3 + 4 + 5 = 15

// 实现数组中所有值的累加
let values = [1, 2, 3, 4, 5];
let sum = values.reduce(((prev, curr, index, arr) => prev + curr), 6);
console.log(sum); // 21

上面代码提供了归并初始值 6，所以最开始 prev 值为归并初始值 6，cur 为数组的第一项 1。
迭代过程是这样的：

• 第一次：prev（6），cur（1）
• 第二次：prev（6 + 1），cur (2)
• 第三次：prev（6 + 1 + 2），cur（3）
• 第四次：prev（6 + 1 + 2 + 3），cur（4）
• 第五次：prev（6 + 1 + 2 + 3 + 4），cur（5）

输出：6 + 1 + 2 + 3 + 4 + 5 = 21

reduceRight() 和 reduce() 方法唯一不同的就是迭代的顺序，对于累加是不影响最后结果的。除此之外没有任何区别。