JavaScript 中 reduce() 的初始值引用陷阱与不可变性实践-js教程-PHP中文网

JavaScript 中 reduce() 的初始值引用陷阱与不可变性实践

本文详解为何将 reduce() 的初始数组声明在函数外部会导致意外的值累积，而声明在内部则表现正常——核心在于对象引用与内存共享机制，而非 reduce() 本身具有“变异”能力。

本文详解为何将 `reduce()` 的初始数组声明在函数外部会导致意外的值累积，而声明在内部则表现正常——核心在于对象引用与内存共享机制，而非 `reduce()` 本身具有“变异”能力。

在使用 Array.prototype.reduce() 进行数据聚合时，一个常见但易被忽视的陷阱是：当初始值（initialValue）是一个引用类型（如数组、对象）且在函数外部定义时，多次调用该函数会持续修改同一份内存中的数据。这并非 reduce() 的设计缺陷，而是 JavaScript 引用语义的自然结果。

? 问题本质：共享引用 vs 独立副本

你定义的 weeklySchedule 是一个包含多个对象的数组：

// constant.ts
export const weeklySchedule = [
  { label: "Monday",   value: 0 },
  { label: "Tuesday",  value: 0 },
  // ... 其他5天
  { label: "Sunday",   value: 0 },
];

注意：这里的每个 { label, value } 都是一个对象字面量，即引用类型。整个 weeklySchedule 数组在模块加载时被创建一次，并在后续所有调用中被复用。

当你这样调用 reduce()：

expenses.reduce((acc, expense) => {
  const day = dayNumberNames[expense.date.getDay()];
  const existing = acc.find(e => e.label === day);
  existing.value += expense.amount; // ⚠️ 直接修改了原始对象的 value 属性
  return acc;
}, weeklySchedule); // ← 传入的是对同一数组的引用

acc 参数始终指向 weeklySchedule 这个同一个数组实例；而 existing 指向其中某个原始对象实例（如 weeklySchedule[0]）。因此 existing.value += ... 实际上是在反复修改 weeklySchedule[0].value 的值——它不是“临时变量”，而是真实内存地址上的可变字段。

javascript-pro

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

下载

✅ 若改为在函数内创建初始值：

const getWeeklyExpenses = (expenses: Expense[]) => {
  const weeklySchedule = [ /* 新建数组和新对象 */ ]; // ✅ 每次调用都新建

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

此时每次执行函数都会生成一套全新的对象（新数组 + 新对象），彼此内存隔离，自然不会互相污染。

? 正确做法：保持不可变性（Immutable Pattern）

为避免副作用并提升代码可预测性，推荐以下两种更健壮的实现方式：

✅ 方案一：使用 map() + find() 构建新对象（推荐）

const getWeeklyExpenses = (expenses: Expense[]) => {
  // 始终从干净模板出发
  const template = [
    { 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 template.map(day => ({
    ...day,
    value: expenses
      .filter(exp => dayNumberNames[exp.date.getDay()] === day.label)
      .reduce((sum, exp) => sum + exp.amount, 0),
  }));
};

✅ 方案二：reduce() 中返回全新对象（避免突变）

const getWeeklyExpenses = (expenses: Expense[]) => {
  const template = [/* 同上 */];

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