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

JavaScript 中的 reduce() 方法为何会意外修改外部初始值？

当 reduce() 的初始值（initial value）在函数外部定义时，其引用的对象会被多次调用反复修改；而若在函数内部创建新对象数组，则每次调用都使用独立副本，从而避免状态污染。

当 `reduce()` 的初始值（initial value）在函数外部定义时，其引用的对象会被多次调用反复修改；而若在函数内部创建新对象数组，则每次调用都使用独立副本，从而避免状态污染。

在使用 Array.prototype.reduce() 进行数据聚合时，一个常见却容易被忽视的陷阱是：初始值（initialValue）是否为可变引用类型（如对象或数组）。你遇到的问题正是这一机制的典型体现。

问题本质：引用传递 vs 值拷贝

你的 weeklySchedule 是一个包含多个对象的数组，每个对象形如 { label: "Monday", value: 0 }。由于对象是引用类型，当它作为 reduce() 的 initialValue 被传入时，acc 参数实际持有了对原始数组及其内部对象的直接引用，而非深拷贝。

这意味着：

✅ 每次调用 getWeeklyExpenses() 时，acc 都指向同一个 weeklySchedule 数组；
✅ existing.value += expense.amount 直接修改了原始对象的 value 属性；
❌ 多次调用后，weeklySchedule 中的 value 不断累加，产生“状态残留”。

而当你把 weeklySchedule 移入函数内部定义时：

const getWeeklyExpenses = (expenses: Expense[]) => {
  const weeklySchedule = [
    { label: "Monday", value: 0 },
    { label: "Tuesday", 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);
};

✅ 每次调用都会新建一个全新数组和全新对象 —— 它们在内存中彼此隔离，互不影响。

javascript-pro

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

下载

正确做法：避免副作用，保持函数纯度

为确保函数行为可预测、可复用、线程安全（尤其在 React 等框架中频繁重渲染场景），推荐以下任一方案：

✅ 方案一：内部声明（最简洁、推荐）

const getWeeklyExpenses = (expenses: Expense[]) => {
  const weeklySchedule = Array.from({ length: 7 }, (_, i) => ({
    label: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"][i],
    value: 0,
  }));

  return expenses.reduce((acc, expense) => {
    const dayIndex = expense.date.getDay(); // 0=Sunday, 1=Monday, ..., 6=Saturday
    const dayLabel = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][dayIndex];
    const existing = acc.find(item => item.label === dayLabel);
    if (existing) existing.value += expense.amount;
    return acc;
  }, weeklySchedule);
};

✅ 方案二：结构化克隆（适合复用外部模板）

若需复用 constant.ts 中的模板结构（例如统一 label 格式或国际化支持），应显式创建浅拷贝（对象层级较浅时）或深拷贝：

// 使用 map + 展开语法实现浅拷贝（适用于对象仅有一层属性）
const getWeeklyExpenses = (expenses: Expense[]) => {
  const initialAcc = weeklySchedule.map(item => ({ ...item })); // ✅ 新对象，独立引用

  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;
  }, initialAcc);
};

⚠️ 注意：{...item} 仅做浅拷贝。若 item 内部还有嵌套对象，需使用 structuredClone()（现代环境）或 JSON.parse(JSON.stringify())（简单场景，不支持函数/Date/undefined 等）。

❌ 反模式：直接复用外部可变对象

// 危险！会导致跨调用状态污染
const getWeeklyExpenses = (expenses: Expense[]) => 
  expenses.reduce(/* ... */, weeklySchedule); // ← 错误：共享同一引用

总结

场景	是否安全	原因
初始值在函数外定义且含对象/数组	❌ 不安全	多次调用共享同一内存地址，产生副作用
初始值在函数内定义	✅ 安全	每次调用生成全新实例，无状态耦合
外部定义但使用 map(() => ({...})) 克隆	✅ 安全	显式解耦引用，兼顾复用与纯净性