当 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 移入函数内部定义时：
立即学习“Java免费学习笔记（深入）”；
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);
};✅ 每次调用都会新建一个全新数组和全新对象 —— 它们在内存中彼此隔离，互不影响。
正确做法：避免副作用，保持函数纯度
为确保函数行为可预测、可复用、线程安全（尤其在 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(() => ({...})) 克隆 | ✅ 安全 | 显式解耦引用，兼顾复用与纯净性 |
牢记：reduce() 本身不会“保护”你的初始值 —— 它只是将你传入的值原样赋给 acc。真正的控制权，在于你如何管理引用的生命周期。 在编写聚合逻辑时，优先选择不可变数据流，既是健壮性的保障，也是现代前端工程实践的基本素养。
