【JavaScript 教程】第六章 数组14—reduce() ：将数组的元素减少为一个值

在上节，我们学习如何使用 JavaScript Array forEach()方法对数组中的每个元素执行函数，错过的小伙伴可以点击文章《【JavaScript 教程】第六章 数组13— forEach() ：遍历数组元素》进行学习。
那么，在今天的教程中，我们将一起来学习如何使用 JavaScript Array reduce() 和 reduceRight() 方法将数组归约为一个值。

JavaScript Array reduce() 方法介绍

假设我们有一个数字数组，如下所示：

let numbers = [1, 2, 3];

并且我们想要计算数组元素的总数。
通常，我们使用 for 循环遍历元素并将它们相加，如以下示例所示：

let numbers = [1, 2, 3];

let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}
console.log(sum);

输出：

6

该程序简单明了：

• 首先，声明了一个包含三个数字 1、2 和 3 的数组。
• 其次，声明 sum 变量并将其值设置为零。
• 第三，在 for 循环中，将 numbers 数组的元素加到 sum 变量中。循环之后，sum变量的值为6。

我们所做的是将一个数组归约为一个值。
Array.prototype 允许我们使用 reduce() 方法将数组缩减为单个值，如下所示：

let numbers = [1, 2, 3];
let sum = numbers.reduce(function (previousValue, currentValue) {
    return previousValue + currentValue;
});

console.log(sum);

这很简单，不是吗？
让我们详细看一下reduce()方法。

JavaScript Array reduce() 方法详解

下面说明了 reduce() 方法的语法：

array.reduce(callbackFn [, initialValue])

reduce() 方法有两个参数：

• 回调函数 callbackFn。该函数通常被称为reducer。
• 一个可选的初始值。

reduce() 方法为数组中的每个元素调用 callbackFn() 函数。

reducer() 函数返回一个值，该值是在整个数组上执行 callbackFn 以完成的结果。

1) callbackFn() 函数参数

callbackFn 函数具有以下语法：

function callbackFn(previousValue, currentValue, currentIndex, array) { /**/}

callbackFn 函数有四个参数：

• previousValue
  上一次调用 callbackFn 函数返回的值。在第一次调用时，如果您传递了 initialValue，则 initialValue 是 previousValue。否则，其值为数组[0]。

• currentValue
  当前数组元素的值。在第一次调用时，如果您传递了 initialValue，则为 array[0]，否则为 array[1]。

• currentIndex
  当前值在数组中的索引。在第一次调用时，如果您传递了 initialValue，则为 0，否则为 1。

• array
  要循环的数组。

2) 初始值参数

initialValue 参数是可选的。

如果我们指定了 initialValue，callbackFn 函数将在第一次调用时将 previousValue 初始化为 initialValue，并将 currentValue 初始化为第一个数组的元素。

如果不指定 initialValue，callbackFn 函数会将 previousValue 初始化为数组中的第一个数组元素（array[0]），并将 currentValue 初始化为第二个数组的元素（array[1]）。

下表说明reduce()方法根据initialValue参数第一次执行callbackFn()函数时的逻辑：

initialValue	previousValue	currentValue
passed	initialValue	array[0]
not passed	array[0]	array[1]

以下示例显示了 reduce() 函数的进度，initialValue 为 100：

let numbers = [1, 2, 3];

function getOrdinalSuffix(i) {
  let j = i % 10, k = i % 100;
  if (j == 1 && k != 11) return i + 'st';
  if (j == 2 && k != 12) return i + 'nd';  
  if (j == 3 && k != 13) return i + 'rd';
  return i + 'th';
}

let call = 1;
let sum = numbers.reduce(function (previousValue, currentValue, currentIndex, array) {
    let result = previousValue + currentValue;

    // show the 1st call, 2nd call, etc.
    console.log(`${getOrdinalSuffix(call)} call`);
    call++;

    // show the immediate values
    console.table({ previousValue, currentValue, currentIndex, result });

    return result;
},100);

console.log(`Result: ${sum}`);

输出：

下面说明了没有 initialValue 参数的 reduce() 方法：

更多 JavaScript 数组 reduce() 示例
假设我们有以下产品对象的 shoppingCart 数组：

let shoppingCart = [
  {
    product: 'phone',
    qty: 1,
    price: 500,
  },
  {
    product: 'Screen Protector',
    qty: 1,
    price: 10,
  },
  {
    product: 'Memory Card',
    qty: 2,
    price: 20,
  },
];

要计算购物车中产品的总金额，可以使用 reduce() 方法，如下所示：

let total = shoppingCart.reduce(function (previousValue, currentValue) {
  return previousValue + currentValue.qty * currentValue.price;
}, 0);

输出：

550

请注意，在此示例中，我们将 initialValue 参数传递给 reduce() 方法。

如果我们不这样做，reduce() 方法会将作为对象的 shoppingCart 数组的第一个元素作为初始值，并对这个对象执行计算。因此，它会导致错误的结果。

JavaScript 数组 reduceRight() 方法

reduceRight() 方法的工作方式与 reduce() 方法相同，但方向相反。

reduce() 方法从第一个元素开始并向最后一个元素移动，而 reduceRight() 方法从最后一个元素开始并向后移动第一个元素。

请参见以下示例：

let numbers = [1, 2, 3];

let sum = numbers.reduceRight(function (previousValue, currentValue) {
  console.log({ previousValue, currentValue });
  return previousValue + currentValue;
});

console.log(`Result:${sum}`);

输出：

{ previousValue: 3, currentValue: 2 }
{ previousValue: 5, currentValue: 1 }
Result:6

下图说明了 reduce() 和 reduceRight() 方法的区别：

总结

在本教程中，我们学习了如何使用 JavaScript 数组 reduce() 和 reduceRight() 方法将数组缩减为一个值。

今天的内容就到这里了。