ES7 中的 Array.prototype.reduce 方法与 Array.prototype.reduceRight 方法的区别

ES7 是 ECMAScript 的第七个版本，也是 JavaScript 的一个重要的版本之一。在 ES7 中，Array 对象新增了两个新的方法——reduce 和 reduceRight，它们可以帮助我们更加高效简洁地处理数组中的数据。

Array.prototype.reduce 方法和 Array.prototype.reduceRight 方法都是用来对数组实现累计计算的，但是它们的计算顺序却不同。

Array.prototype.reduce 方法

Array.prototype.reduce 方法将数组中的所有元素按照传入的函数进行累计计算，累计的结果保存在一个累计器中。具体操作如下：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

其中，callback 函数可以有四个参数：accumulator（累加器）、currentValue（当前值）、index（当前索引）、array（源数组）。计算过程如下图所示：

示例代码

下面以求和为例，说明 Array.prototype.reduce 方法的作用：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

代码解释：

• 创建一个数组 numbers。
• 使用 reduce 方法对数组中的每个元素累加，将结果保存在累计器中。
• 返回累计器中的最终结果。结果为 1+2+3+4+5=15。

Array.prototype.reduceRight 方法

Array.prototype.reduceRight 方法是和 reduce 方法类似，不同的是它是从数组的末尾开始执行。具体操作如下：

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

计算过程如下图所示：

示例代码

下面以字符串连接为例，说明 Array.prototype.reduceRight 方法的作用：

const words = ["Hello ", "world", "!"];
const message = words.reduceRight((accumulator, currentValue) => accumulator + currentValue);
console.log(message); // "!world Hello "

代码解释：

• 创建一个数组 words。
• 使用 reduceRight 方法将数组中的所有元素按照从右向左的顺序拼接，将结果保存在累计器中。
• 返回累计器中的最终结果。结果为 "!world Hello "。

区别总结

Array.prototype.reduce 和 Array.prototype.reduceRight 方法的区别如下表所示：

学习与指导意义

• 熟练掌握 Array.prototype.reduce 和 Array.prototype.reduceRight 方法，可以帮助我们更加高效简洁地处理数组中的数据。
• reduce 方法和 reduceRight 方法虽然实现的功能相同，但是在使用中需要注意它们的计算顺序。
• 通过实际的代码示例，可以更加深入地理解这两个方法的作用。
• 在处理大量数组数据的时候，使用 reduce 和 reduceRight 方法可以节约大量的时间和代码量。

结语

ES7 中的 Array.prototype.reduce 方法和 Array.prototype.reduceRight 方法是非常实用的函数，它们可以帮助我们更加高效地处理数组中的数据。熟练掌握它们的使用方法，可以大大提高我们的开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d202f0b5eee0b525960817