1. 避免函数内重复初始化导致覆盖的问题
1.1 常见原因与现象
在实现“动态追加”时，若把数组在函数内部重新声明或重新赋值，上一轮已追加的元素会被覆盖，造成看似丢失数据的现象。最典型的写法是将 list 放在函数内部初始化，然后每次调用都执行 list.push(item)，这只是将新元素追加到一个新的数组里，旧数据无法保留。
此外，使用默认参数也不能解决该问题，因为默认参数只是给缺失的参数提供初始值，并不会让函数记住上次的执行状态。理解 状态记忆与作用域边界，是正确实现动态追加的前提。
1.2 典型场景中的错误写法
比如下面这种写法，每次调用都会重新创建空数组，因此虽然看起来是在追加，实际数据是被覆盖或丢失的。即使有多次调用，也只看到最近一次追加的结果。
function add(item) {let list = []; // 每次调用都是新数组list.push(item);return list;
}
解决办法是把数据保存在外部作用域中，或通过参数传入进行累积。
2. 正确的动态追加写法与实战技巧
2.1 外部状态管理的方案
将需要扩展的数组放在外部作用域中，或借助闭包来维护一个私有状态，可以确保多次调用时数据不会被重置。此时，append 使用原地变更，而不是在函数内部重新创建数组。
下面给出两种常见实现：直接使用全局变量，以及通过闭包封装的模块模式。两者都能避免在函数内部重复初始化导致的覆盖问题。
// 方案A：外部变量
let items = [];function append(item) {items.push(item);
}
append(1);
append(2);
console.log(items); // [1, 2]
// 方案B：闭包/模块模式
const createAppender = () => {const data = [];return {push(item) { data.push(item); },values() { return data.slice(); }};
};const app = createAppender();
app.push('a');
app.push('b');
console.log(app.values()); // ['a', 'b']
注意事项：使用闭包时要避免外部直接修改内部数据，提供受控的访问接口，如用 slice() 复制返回值。
2.2 通过参数传递数组进行累积
另一种策略是把数组作为参数传入函数，由调用方决定如何维护生命周期。这样可以实现可控的状态管理，同时避免在函数内部隐藏数据。
在这种写法中，函数负责将新元素推入传入的数组中，而不去创建新的聚合对象，确保调用者可重复使用同一个数组。
function addItem(arr, item) {arr.push(item); // 直接修改传入的数组return arr;
}const data = [];
addItem(data, 1);
addItem(data, 2);
console.log(data); // [1, 2]
如果要实现函数式风格，可返回新数组而非修改原数组，但这就需要调用方重新赋值。下面是纯函数的示例。
function addItemPure(arr, item) {return [...arr, item];
}let data = [];
data = addItemPure(data, 1);
data = addItemPure(data, 2);
console.log(data); // [1, 2]
2.3 函数式更新与不可变数据
在前端框架中，函数式更新和不可变数据结构可以减少副作用，避免意外覆盖。通过返回新数组并让调用者重新赋值，可以清晰表达数据流。
当数据量较大时，使用不可变数据工具库（如 Immer、immutable.js）也能提高可维护性，但要权衡性能和学习成本。
import produce from 'immer/dist/immer';
let state = { items: [] };state = produce(state, draft => {draft.items.push('x');
});
3. 实战案例演示
3.1 直接使用全局变量的简单场景
在简单脚本或一次性执行的工具中，直接使用全局变量管理状态更直观。然而要注意命名冲突和模块化，避免污染全局作用域，尽量将其封装成可复用的函数或模块。
// 全局变量示例（简单场景）
let cache = [];function addToCache(item) {cache.push(item);
}
addToCache(1);
addToCache(2);
console.log(cache);
3.2 使用闭包/模块模式的可控状态
该模式能够实现对内部数据的受控访问，降低外部直接修改的风险，适合需要长期维护的脚本或模块化代码。
// 模块模式示例
const arrayModule = (function() {const data = [];return {add(item) { data.push(item); },get() { return data.slice(); }};
})();arrayModule.add(10);
arrayModule.add(20);
console.log(arrayModule.get()); // [10, 20]
该模式避免外部直接修改内部数据，提供受控的访问接口，便于后续维护。
3.3 返回新数组的函数式写法在组件中的应用
在需要不可变更新的场景，比如 React 组件的状态管理，返回新数组并赋值到状态变量是常用做法。
// React 组件中的状态更新示例（简化版）
import React, { useState } from 'react';function ListUpdater() {const [items, setItems] = useState([]);function add(item) {setItems(prev => [...prev, item]); // 不直接修改 prev}// …return null;
}
