Knowledge_Repository

主题

Teeker2026-04-22
891
3.5m

JavaScript 数组reduce方法的详细使用指南 ​

reduce是数组中非常强大的一个方法，核心作用是将数组的所有元素“归并”成一个值（这个值可以是数字、对象、新数组等），它会遍历数组并累计计算结果。

一、基本语法 ​

JavaScript

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

核心参数说明：

  • callback：遍历数组时执行的回调函数，包含4个参数（后2个可选）：

    • accumulator（累加器）：上一次回调的返回值，或初始值initialValue；

    • currentValue：当前遍历到的数组元素；

    • currentIndex（可选）：当前元素的索引；

    • array（可选）：原数组。

  • initialValue（可选）：累加器的初始值。强烈建议始终传入，避免空数组或单元素数组的异常。

二、常见使用场景（附代码示例） ​

场景1：最基础——数组求和/求积 ​

这是reduce最入门的用法，替代循环累加：

JavaScript

// 1. 数组求和
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => {
  return acc + cur; // 累加器每次加上当前元素
}, 0); // 初始值设为0
console.log(sum); // 输出：10

// 简化写法（箭头函数省略return）
const sumSimple = numbers.reduce((acc, cur) => acc + cur, 0);

// 2. 数组求积
const product = numbers.reduce((acc, cur) => acc * cur, 1); // 初始值设为1
console.log(product); // 输出：24

场景2：数组转对象（统计/映射） ​

把数组元素整理成键值对形式，比如统计元素出现次数：

JavaScript

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
// 统计每种水果的数量
const fruitCount = fruits.reduce((acc, cur) => {
  // 如果累加器中没有当前水果，初始化为0，否则+1
  acc[cur] = (acc[cur] || 0) + 1;
  return acc; // 必须返回累加器，供下一次遍历使用
}, {}); // 初始值设为空对象

console.log(fruitCount); 
// 输出：{ apple: 3, banana: 2, orange: 1 }

场景3：扁平化数组（二维转一维） ​

替代嵌套循环，把多维数组“拍平”：

JavaScript

const nestedArr = [[1, 2], [3, 4], [5, 6]];
const flatArr = nestedArr.reduce((acc, cur) => {
  // 把当前子数组的元素合并到累加器数组中
  return acc.concat(cur);
}, []); // 初始值设为空数组

console.log(flatArr); // 输出：[1, 2, 3, 4, 5, 6]

场景4：筛选+转换（替代filter+map） ​

一次遍历完成“过滤+修改”，比先filter再map更高效（少一次遍历）：

JavaScript

const scores = [
  { name: '张三', score: 85 },
  { name: '李四', score: 59 },
  { name: '王五', score: 92 }
];
// 筛选及格的学生，只保留姓名和分数（转成新格式）
const passedStudents = scores.reduce((acc, cur) => {
  if (cur.score >= 60) {
    acc.push({ 姓名: cur.name, 成绩: cur.score }); // 符合条件则加入累加器
  }
  return acc;
}, []);

console.log(passedStudents);
// 输出：[{ 姓名: '张三', 成绩: 85 }, { 姓名: '王五', 成绩: 92 }]

三、关键注意点 ​

  1. 初始值 initialValue 的重要性：

    • 如果不传初始值，reduce会把数组第一个元素作为初始acc，从第二个元素开始遍历；

    • 若数组为空且不传初始值，会直接报错；若数组只有一个元素且不传初始值，直接返回该元素。

    JavaScript
    
// 反例：空数组不传初始值
[].reduce((acc, cur) => acc + cur); // 报错：Reduce of empty array with no initial value

  2. 回调必须返回累加器：如果忘记return acc，累加器会变成undefined，最终结果出错。

总结 ​

  1. reduce的核心是通过回调函数“累计”数组元素，最终返回一个值（任意类型）；

  2. 核心参数是回调函数（处理累加逻辑）和初始值（建议必传）；

  3. 可替代循环、filter+map等操作，适用于求和、统计、扁平化、格式转换等场景，灵活且高效。

（注：文档部分内容可能由 AI 生成）

最近更新