如何在 JavaScript 中使用 Array.prototype.reduce() 方法？

在 JavaScript 中，reduce() 方法是数组对象中的一个高阶函数。它可用于将数组中的每个元素映射到减少的值，从而最终返回单个值。

语法

下面是reduce()方法的语法：

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

在语法中，callback 是每个被数组中的每个元素调用的函数。accumulator 表示当前累积器的值(初始值为initialValue，如果没有指定，则默认为数组的第一个值)。currentValue 表示当前数组元素的值，而 index(可选)是当前数组元素的索引，array(可选)是原始数组。

callback 函数使用一个累加器和当前值来返回一个新值。新值将被用作后续调用的累加器。最后调用的值是该函数的返回值。

示例

让我们看一些使用reduce()方法的示例。

示例1 - 数组求和

const numbers = [10, 20, 30];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 60

在上面的示例中，我们在数组元素上调用reduce()方法，并返回一个新值(通过将其添加到累加器上)。累加器的初始值为 0。

示例2 - 字符串连接

const words = ['My', 'name', 'is', 'John', 'Doe'];

const sentence = words.reduce((accumulator, currentValue) => {
  return `${accumulator} ${currentValue}`;
}, '');

console.log(sentence.trim()); // My name is John Doe

在上面的示例中，我们将字符串逐个连接起来，累加器的初始值为一个空字符串''。

示例3 - 对象数组的属性求和

const products = [
  { name: 'Shirt', price: 30 },
  { name: 'T-Shirt', price: 20 },
  { name: 'Jeans', price: 50 },
  { name: 'Jacket', price: 100 }
];

const totalPrice = products.reduce((accumulator, currentValue) => {
  return accumulator + currentValue.price;
}, 0);

console.log(totalPrice); // 200

在上面的示例中，我们使用reduce()方法计算对象数组中指定属性的总和。我们使用了currentValue.price 来获取每个产品的价格。

总结

reduce()方法是JavaScript中内置的强大的函数。它使我们可以执行从简单到复杂的许多数组操作。我们可以使用它来执行任何排序的操作，如求和、连接、聚合等等。