JavaScript 中的 .reduce() 为何会意外修改外部初始值？-js教程-PHP中文网

当 reduce() 的初始值（如数组）在函数外部定义时，每次调用都会复用并直接修改同一组对象引用；而若在函数内部创建初始值，则每次调用都生成全新对象，避免状态污染。

当 reduce() 的初始值（如数组）在函数外部定义时，每次调用都会复用并直接修改同一组对象引用；而若在函数内部创建初始值，则每次调用都生成全新对象，避免状态污染。

这是 JavaScript 引用类型行为引发的经典陷阱：对象和数组是按引用传递的，而非按值复制。

在你的代码中，weeklySchedule 是一个包含多个对象的数组，每个对象形如 { label: "Monday", value: 0 }。当你将它作为 reduce() 的初始值（即第二个参数）传入：

expenses.reduce((acc, expense) => { /* ... */ }, weeklySchedule);

你实际是把 weeklySchedule 这个数组的引用传给了 acc。后续所有对 acc 的操作（例如 existing.value += expense.amount）本质上都是在修改原始 weeklySchedule 数组中那些对象的 value 属性——因为 existing 是 acc.find(...) 返回的原对象引用，不是副本。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 正确做法：每次调用都提供一份全新的初始状态
❌ 错误做法：复用外部声明的可变对象数组

✅ 推荐修复方案（函数内构造初始值）

const getWeeklyExpenses = (expenses: Expense[]) => {
  // 每次调用都创建全新数组 —— 真正的“干净”初始值
  const weeklySchedule = [
    { label: "Monday",  value: 0 },
    { label: "Tuesday", value: 0 },
    { label: "Wednesday", value: 0 },
    { label: "Thursday", value: 0 },
    { label: "Friday", value: 0 },
    { label: "Saturday", value: 0 },
    { label: "Sunday", value: 0 }
  ];

  return expenses.reduce((acc, expense) => {
    const day = dayNumberNames[expense.date.getDay()];
    const existing = acc.find(e => e.label === day);
    if (existing) {
      existing.value += expense.amount;
    }
    return acc;
  }, weeklySchedule);
};

? 更健壮的替代写法（推荐：不可变更新 + map 预处理）

为彻底规避副作用，可结合解构与 map 创建新对象：

const getWeeklyExpenses = (expenses: Expense[]) => {
  const initial = [
    { label: "Monday", value: 0 },
    { label: "Tuesday", value: 0 },
    // ... 其他天
  ];

  return expenses.reduce((acc, expense) => {
    const day = dayNumberNames[expense.date.getDay()];
    return acc.map(item =>
      item.label === day 
        ? { ...item, value: item.value + expense.amount } // 返回新对象
        : item
    );
  }, initial);
};

⚠️ 注意事项总结

永远不要在 reduce() 中直接修改 acc 内部的对象属性（如 obj.value++），除非你明确需要副作用且已理解其影响；
若必须复用外部定义的模板数据，请使用深拷贝（如 JSON.parse(JSON.stringify(weeklySchedule))）或结构化克隆（structuredClone(weeklySchedule)，现代环境支持）；
在 React 或状态敏感场景中，意外的引用复用极易导致 UI 不更新、缓存失效或难以调试的累积误差；
使用 TypeScript 时，可将初始结构定义为 readonly 类型辅助提醒，但无法阻止运行时修改。

根本原则：函数应是纯的（pure）——相同输入始终返回相同输出，且不产生外部可观察的副作用。 将初始值声明于函数作用域内，是最简单、最可靠保障该原则的方式。