javascript - Vue 在复制数据后更改数据中的数组

Question

所以我在 vue 中有这段代码:

export default {
 name: 'Test',
  data() {
    return {
      test1: ['1', '2', '3'],
      test2: [{
        name: 'Hello'
      }, {
        name: 'Number two'
      }, {
        name: 'What ever'
      }], 
     };
  },
 created() {    
    const first = [...this.test1];
    first.forEach((elm, index) =>  first[index] = 'New');
    console.log('first: ', first);
    console.log('test1 in data', this.test1);

    const second = [...this.test2];
    second.forEach(elm => elm.name = 'New');
    console.log('second: ', second);
    console.log('test2 in data', this.test2);
  },
}

在设置数组“first”的每个项目的值后(应该是一个没有引用数据“test1”数组的副本)每个项目都等于“new”。 this.test1 的值不变。

我对 test2 做了同样的事情。复制每个项目的值并将其更改为“新建”。但是现在数据数组 'test2' 的值在每个项目中也有 'New'。

我不知道为什么会这样。有什么想法吗？

Answer 1

扩展语法创建一个 shallow copy .如果您的数组具有数字或字符串等基本类型，则它不会更新原始数组。 test1 就是这种情况。在第二种情况下，只创建了一个新数组。如果您从数组中push 或pop，原始数组将不会更新。但是，这些对象仍然指向它们在内存中的相同位置。更新它们也会更新原始数组的对象。

您可以在单个对象上使用传播语法来创建对象的副本:

const second = this.test2.map(o => ({...o}))

您还可以使用 JSON.parse 和 JSON.stringify。但是，如果对象具有任何函数属性，它们将被删除。

const second = JSON.parse(JSON.stringify(this.test2))