JS 数组 reduce 高级用法详解

在 JavaScript 中，reduce 方法是一个功能强大且灵活的数组方法。它不仅可以用于简单的累加等操作，还能实现许多高级功能。

基本语法

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

callback 是一个回调函数，接受四个参数：

• accumulator：累计器，存储回调的返回值。
• currentValue：当前元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 reduce 的数组。

initialValue（可选）：作为第一次调用 callback 时的第一个参数的值。如果没有提供初始值，accumulator 将使用数组的第一个元素，currentValue 则使用数组的第二个元素。

高级用法示例

数组去重

const arr = [1, 2, 2, 3, 3, 3];
const uniqueArr = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3]

这里通过 reduce 遍历数组，利用 includes 方法判断元素是否已存在于累计器（初始为空数组）中，不存在则添加，实现去重。

计算数组中对象属性的总和

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const totalAge = people.reduce((acc, cur) => acc + cur.age, 0);
console.log(totalAge); // 90

此例中，reduce 遍历 people 数组，将每个对象的 age 属性累加到 acc（初始为 0），得到年龄总和。

按属性分组

const fruits = [
  { type: 'apple', color: 'red' },
  { type: 'banana', color: 'yellow' },
  { type: 'apple', color: 'green' }
];
const groupedFruits = fruits.reduce((acc, cur) => {
  if (!acc[cur.type]) {
    acc[cur.type] = [];
  }
  acc[cur.type].push(cur);
  return acc;
}, {});
console.log(groupedFruits); 
// { apple: [ { type: 'apple', color: 'red' }, { type: 'apple', color: 'green' } ], banana: [ { type: 'banana', color: 'yellow' } ] }

reduce 遍历 fruits 数组，根据 type 属性将对象分组存储在累计器（初始为空对象）中。

总结

reduce 方法的高级用法能让我们更优雅地处理数组数据。无论是去重、计算总和还是分组等操作，合理运用 reduce 都能提高代码的简洁性和可读性。在实际开发中，根据具体需求灵活运用，能大大提升开发效率。掌握这些高级用法，能让你在 JavaScript 数组操作中更加得心应手。