javascript - 如何在 Angular 中创建非链接变量？

Question

我需要从服务器(或json文件)获取数据并将它们添加到“firstVariable”以对其进行一些操作，并将“secondVariable”添加到默认未更改的数据(来自服务器的相同数据)。但是当我更改“firstVariable”中的数据时，“secondVariable”中的数据也会更改。我的问题:为什么？当我向变量添加数据时，我会从中创建新的数组。有一个example

Answer 1

您遇到的问题是，当您使用扩展运算符[...data]时，您正在扩展对数组内对象的引用。

您想要做的是将对象映射到新的对象引用中，您可以执行类似的操作

this.json = data.map(x => Object.assign({}, x));

请参阅以下代码片段。

let data = [{ id: 123 }];

let a = [...data];
let b = [...data];

a[0].id= 1234;

console.log('Without creating a new object');
data = [{ id: 123 }];
console.log(`A: ${JSON.stringify(a)}`);
console.log(`B: ${JSON.stringify(b)}`);


let c = data.map(x => Object.assign({}, x));
let d = data.map(x => Object.assign({}, x));

c[0].id= 9999;

console.log('Creating a new object');
console.log(`C: ${JSON.stringify(c)}`);
console.log(`D: ${JSON.stringify(d)}`);