JavaScript 数组的 reduce() 方法详解

reduce()方法对数组的每个元素执行一个reducer函数，并返回一个单一的输出值。

示例

const message = ["JavaScript ", "is ", "fun."];

// 连接字符串元素的函数
function joinStrings(accumulator, currentValue) {
  return accumulator + currentValue;
}

// reduce连接字符串的每个元素
let joinedString = message.reduce(joinStrings);
console.log(joinedString);

// 输出: JavaScript is fun.

reduce()语法

reduce()方法的语法是：

arr.reduce(callback(accumulator, currentValue), initialValue);

这里，arr是一个数组。

reduce()参数

reduce()方法接受：

• callback - 对每个数组元素（如果没有提供initialValue，则除了第一个元素）执行的函数。它接受

• accumulator - 它累积回调的返回值。

• currentValue - 从数组传递的当前元素。

initialValue（可选） - 在首次调用时传递给callback()的值。如果未提供，第一个元素在第一次调用时作为累加器，且callback()不会在其上执行。

注意： 在没有initialValue的空数组上调用reduce()将抛出TypeError。

reduce()返回值

• 返回在减少数组后得到的单一值。

注释：

• reduce()从左到右为每个值执行给定的函数。
• reduce()不会改变原始数组。
• 提供initialValue几乎总是更安全的。

示例1：数组所有值的总和

const numbers = [1, 2, 3, 4, 5, 6];

function sum_reducer(accumulator, currentValue) {
  return accumulator + currentValue;
}

let sum = numbers.reduce(sum_reducer);
console.log(sum); // 21

// 使用箭头函数
let summation = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
);
console.log(summation); // 21

输出

21;
21;

示例2：数组中的数字相减

const numbers = [1800, 50, 300, 20, 100];

// 从第一个数字减去所有数字
// 由于第一个元素作为累加器而不是当前值
// 1800 - 50 - 300 - 20 - 100
let difference = numbers.reduce(
  (accumulator, currentValue) => accumulator - currentValue,
);
console.log(difference); // 1330

const expenses = [1800, 2000, 3000, 5000, 500];
const salary = 15000;

// 函数从给定数字中减去所有数组元素
// 15000 - 1800 - 2000 - 3000 - 5000 - 500
let remaining = expenses.reduce(
  (accumulator, currentValue) => accumulator - currentValue,
  salary,
);
console.log(remaining); // 2700

输出

1330;
2700;

此示例清楚地解释了提供初始值与不提供初始值之间的区别。

示例3：从数组中移除重复项

let ageGroup = [18, 21, 1, 1, 51, 18, 21, 5, 18, 7, 10];
let uniqueAgeGroup = ageGroup.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueAgeGroup); // [ 18, 21, 1, 51, 5, 7, 10 ]

输出

[18, 21, 1, 51, 5, 7, 10];

示例4：按属性分组对象

let people = [
  { name: "John", age: 21 },
  { name: "Oliver", age: 55 },
  { name: "Michael", age: 55 },
  { name: "Dwight", age: 19 },
  { name: "Oscar", age: 21 },
  { name: "Kevin", age: 55 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (accumulator, currentObject) {
    let key = currentObject[property];
    if (!accumulator[key]) {
      accumulator[key] = [];
    }
    accumulator[key].push(currentObject);
    return accumulator;
  }, {});
}

let groupedPeople = groupBy(people, "age");
console.log(groupedPeople);

输出

{
 '19': [ { name: 'Dwight', age: 19 } ],
 '21': [ { name: 'John', age: 21 }, { name: 'Oscar', age: 21 } ],
 '55': [
 { name: 'Oliver', age: 55 },
 { name: 'Michael', age: 55 },
 { name: 'Kevin', age: 55 }
 ]
}

推荐阅读： JavaScript数组reduceRight()方法