JavaScript中reduce方法在数组处理时有哪些常见用法

JavaScript的数组reduce方法是处理数组数据的高效工具，它可以通过回调函数对数组中的每个元素进行迭代处理，最终返回一个累计的结果，适用于多种复杂的数组操作场景。

reduce方法的基本语法

reduce方法接收两个参数，第一个是回调函数，第二个是可选的初始累计值，基本语法格式如下：

// 数组.reduce(回调函数, 初始值)
// 回调函数参数说明：
// accumulator：累计器，存储上一次回调返回的结果
// currentValue：当前正在处理的元素
// currentIndex：当前元素的索引，可选
// array：调用reduce的数组本身，可选
arr.reduce(function(accumulator, currentValue, currentIndex, array) {
  // 处理逻辑
  return accumulator;
}, initialValue);

reduce的常见使用场景

1. 数组元素求和

这是reduce最基础的使用场景，不需要传入初始值时，默认以数组第一个元素作为初始累计值，从第二个元素开始迭代。

const numArr = [1, 2, 3, 4, 5];
// 不传入初始值，初始累计值为1，从索引1的元素开始迭代
const sum1 = numArr.reduce((acc, cur) => acc + cur);
console.log(sum1); // 输出15

// 传入初始值0，从索引0的元素开始迭代
const sum2 = numArr.reduce((acc, cur) => acc + cur, 0);
console.log(sum2); // 输出15

2. 数组去重

利用reduce可以将数组元素累计到一个新数组中，每次迭代判断当前元素是否已经存在于累计数组中，不存在则添加。

const duplicateArr = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArr = duplicateArr.reduce((acc, cur) => {
  // 判断当前元素是否已经在累计数组中
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr); // 输出[1, 2, 3, 4, 5]

3. 数组分组

可以根据数组元素的某个属性，将数组分成多个子数组，比如按照学生的分数段分组。

const students = [
  { name: '张三', score: 85 },
  { name: '李四', score: 92 },
  { name: '王五', score: 78 },
  { name: '赵六', score: 90 },
  { name: '钱七', score: 65 }
];
// 按照分数段分组：60-79为及格，80-100为优秀
const groupedStudents = students.reduce((acc, cur) => {
  const groupKey = cur.score >= 80 ? '优秀' : '及格';
  // 如果分组不存在则初始化为空数组
  if (!acc[groupKey]) {
    acc[groupKey] = [];
  }
  acc[groupKey].push(cur);
  return acc;
}, {});
console.log(groupedStudents);
// 输出：{ 优秀: [{name:'张三',score:85}, {name:'李四',score:92}, {name:'赵六',score:90}], 及格: [{name:'王五',score:78}, {name:'钱七',score:65}] }

4. 数组扁平化

可以将多维数组转换为一维数组，通过判断当前元素是否为数组，是的话就递归调用reduce处理。

const nestedArr = [1, [2, 3], [4, [5, 6]], 7];
const flattenArr = nestedArr.reduce((acc, cur) => {
  // 如果当前元素是数组，就递归扁平化后合并到累计数组
  if (Array.isArray(cur)) {
    return acc.concat(cur.reduce((a, c) => {
      if (Array.isArray(c)) {
        return a.concat(c);
      }
      a.push(c);
      return a;
    }, []));
  }
  acc.push(cur);
  return acc;
}, []);
console.log(flattenArr); // 输出[1, 2, 3, 4, 5, 6, 7]

使用reduce的注意事项

• 如果数组为空且没有传入初始值，调用reduce会直接抛出TypeError错误，因此处理空数组场景时建议传入初始值。
• 回调函数中必须返回累计值，否则下一次迭代的累计值会是undefined，导致逻辑错误。
• reduce不会改变原数组，它会返回一个新的结果，符合函数式编程的无副作用特性。

reduce方法的功能非常灵活，除了上述场景外，还可以实现数组转对象、统计元素出现次数等多种操作，开发者可以根据实际需求灵活调整回调函数的逻辑。

JavaScriptreduce数组处理数组遍历修改时间：2026-07-11 11:57:28