理解 ECMAScript 中的 reduce 和 reduceRight 方法

68 阅读2分钟

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() 方法唯一不同的就是迭代的顺序,对于累加是不影响最后结果的。除此之外没有任何区别。