Vue.js中推入answers数组的对象值为何随原数组被清空？

你碰到的这个问题其实是JavaScript里很常见的引用类型特性坑——你以为把elements里的对象复制到answers里了，但实际上只是复制了对象的内存引用，两个数组里的对象指向的是同一个内存地址。所以当你清空elements里对象的value时，answers里的对应对象因为共享同一个引用，value也会跟着被清空。

为什么map()方法没用？ #

你用this.elements.map((item) => item)这种写法，本质上只是做了浅拷贝：它复制了数组的外层结构，但数组里的每个对象还是原来的那个引用，并没有生成新的对象实例。打个比方，就像你给别人复制了一把你家的钥匙，别人开门和你开门进的都是同一个家，你在家里把东西清空了，别人进去也看不到东西。

解决方法：深拷贝每个对象 #

要解决这个问题，你需要在map的时候，给每个对象创建一个新的副本，让answers里的对象和elements里的对象不再共享引用。这里有几种简单的实现方式：

1. 使用对象扩展运算符（推荐，语法简洁）

修改你的reset方法，在map里用扩展运算符生成新对象：

methods: {
  reset() {
    // 为每个对象创建新的副本，而非引用
    const newArray = this.elements.map((item) => ({ ...item }));
    this.answers.push(newArray);
    this.elements.forEach((item) => (item.value = ""));
  },
},

2. 使用Object.assign

和扩展运算符效果一致，也是创建新对象并复制属性：

const newArray = this.elements.map((item) => Object.assign({}, item));

3. 处理复杂嵌套对象的情况

如果你的对象里还有嵌套的子对象，上面两种浅拷贝方法就不够用了，这时候可以用JSON序列化的方式（注意：这种方法无法处理函数、Symbol等特殊类型）：

const newArray = JSON.parse(JSON.stringify(this.elements));

验证效果 #

修改后再点击reset按钮，你会发现answers里会完整保存之前输入的内容，而elements里的value被清空，两者不再互相影响。

内容的提问来源于stack exchange，提问作者mjwals