
本文揭示了在循环中向嵌套对象数组添加动态数组时,因直接引用同一数组实例而导致数据被清空的根本原因,并提供使用扩展运算符创建浅拷贝的解决方案。
本文揭示了在循环中向嵌套对象数组添加动态数组时,因直接引用同一数组实例而导致数据被清空的根本原因,并提供使用扩展运算符创建浅拷贝的解决方案。
在 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());
完整修复后的关键代码段如下:
const args_arr = [];
const options_arr = [];
let text = "";
for (let i = 0; i ' + 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 动态数据结构陷阱的关键。始终在需要保留快照时创建副本,而非传递引用。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











