JavaScript 数组 reduceRight() 方法

JavaScript reduceRight() 语法

reduceRight() 是 JavaScript 数组的一个方法，它用于遍历一个数组。reduceRight() 方法会在回调函数中 “从右到左” 对数组每个元素进行 “累积操作”（如累加、累乘等），最终返回一个值。

reduceRight() 和 reduce() 这两个方法功能是一样的，reduce() 是 “从左到右” 对数组元素进行操作，而 reduceRight() 方法是 “从右到左” 对数组元素进行操作。在实际开发中，reduceRight() 方法较少用到，更多使用的还是 reduce() 方法。

语法：

arr.reduceRight(callbackFn, initValue)

说明：

reduceRight() 方法可以接收以下 2 个参数。

callbackFn（必选）：是一个回调函数，数组元素会从右到左依次执行该函数。
initValue（可选）：累积操作的初始值。如果省略，则会将数组最后一个元素作为初始值。

callbackFn 这个回调函数的形式如下：

function (total, currentValue, currentIndex, array) {
    ……
}

callbackFn 回调函数接收 4 个参数，说明如下。

total（必选）：是函数的返回值（累积值）。
currentValue（必选）：是当前元素的值。
currentIndex（可选）：是当前元素的下标。
array（可选）：表示当前数组对象（代表整个数组）。

注意:

reduceRight() 不会为没有值的数组元素（即稀疏数组中的空槽）执行 callback 函数。
不要对空数组使用 reduceRight()，否则它可能返回 0 或抛出 TypeError 异常。

数组的遍历方法

对于 JavaScript 数组来说，它主要有以下 5 种遍历方法。其中，map()、filter()、reduce()、reduceRight() 这 4 种可以看成是对 forEach() 方法的进一步封装。

forEach()：只会单纯遍历数组，在回调函数中对每一个元素进行 “相同操作”。它不会返回任何值，只是操作完就算了。
map()：遍历数组的同时，在回调函数中对每个元素进行 “相同操作”。然后将 “处理后的元素” 添加到新数组中，最终返回一个新数组。
filter()：遍历数组的同时，在回调函数中对每个元素进行 “过滤操作”。然后将 “符合条件的元素” 添加到新数组中，最终返回一个新数组。
reduce()：遍历数组的同时，在回调函数中对每个元素进行 “累积操作”。最终返回一个值（这个值不一定是数组）。
reduceRight()：功能与 reduce() 方法相同，只不过 reduce() 是从左到右操作数组元素，而 reduceRight() 是从右到左操作数组元素。

JavaScript reduceRight() 摘要

属于	JavaScript Array 对象
使用频率	低
修改原数组	否
官方文档	查看
MDN	查看

JavaScript reduceRight() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript reduceRight() 方法是如何使用的。

示例 1：reduceRight() 实现数组元素求和

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const result = arr.reduceRight(function(total, current){
    total += current;
    return total;
}, 0);
console.log(result);

运行结果如下。

分析：

想要对数组元素进行求和，我们需要使用 initValue 这个参数，给它设置一个初始值 0，以便用于累加。

reduceRight() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数也是一个函数。在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 reduceRight() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
const result = arr.reduceRight(function(total, current){
    total += current;
    return total;
}, 0);

// 方式2：使用箭头函数
const result = arr.reduceRight((total, current) => {
    total += current;
    return total;
}, 0);

reduceRight() 和 reduce() 这两个方法功能是一样的。