本文揭示了在循环中向嵌套对象数组添加动态数组时，因直接引用同一数组实例而导致数据被清空的根本原因，并提供使用扩展运算符创建浅拷贝的解决方案。
本文揭示了在循环中向嵌套对象数组添加动态数组时，因直接引用同一数组实例而导致数据被清空的根本原因，并提供使用扩展运算符创建浅拷贝的解决方案。
在 JavaScript 中，数组是引用类型。当你执行 options.args.push(args_arr) 时，实际是将 args_arr 这个引用（内存地址） 推入 options.args，而非其当前内容的副本。随后调用 args_arr.length = 0 清空数组，会直接影响所有已推入的对象中对该数组的引用——因为它们指向的是同一个底层数组对象。
这就是为什么你在每次循环中看到 JSON.stringify(options) 显示正确（如 ["visible", [true,false,...]]），但最终 options_arr 中所有 args[1] 都变成空数组 []：循环结束时，args_arr 已被清空五次，所有之前“存进去”的引用都指向这个已被清空的数组。
✅ 正确做法是深拷贝（至少浅拷贝）该数组，确保每次推入的是独立副本：
options.args.push([...args_arr]); // ✅ 推入新数组副本（浅拷贝） // 或等价写法： // options.args.push(Array.from(args_arr)); // options.args.push(args_arr.slice());
完整修复后的关键代码段如下：
立即学习“Java免费学习笔记（深入）”；
const args_arr = [];
const options_arr = [];
let text = "";
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
args_arr.push(i === j);
}
const options = {
op1: true,
op2: false,
args: ['visible']
};
options.args.push([...args_arr]); // ? 关键修复：拷贝而非引用
options_arr.push(options);
args_arr.length = 0; // 安全清空，不影响已拷贝的数据
}
text += '<br>' + JSON.stringify(options_arr) + "<br>";
document.getElementById("demo").innerHTML = text;⚠️ 注意事项：
- 若
args_arr内部包含对象或嵌套数组，[...args_arr]仅做浅拷贝，此时需使用JSON.parse(JSON.stringify())或结构化克隆（如structuredClone()，现代环境支持）进行深拷贝； - 避免在循环中复用并原地修改同一数组变量再推入对象——这是引发此类“数据消失”问题的典型模式；
- 调试时可用
console.log(options.args[1] === args_arr)验证是否为同一引用，返回true即存在风险。
总结：理解引用与值的区别，是避免 JavaScript 动态数据结构陷阱的关键。始终在需要保留快照时创建副本，而非传递引用。
