如果在JavaScript中更新引用变量，为什么实际对象会更新新值？

Question

考虑我的对象名称x的值为x = { a: 'abc', b: 'jkl' }，

现在，我已x将此对象y分配给新的本地变量var y = x。

当var y值更改为新值 y.a = 'pqr', y.b = 'xyz'时，var x对象自动更新{ a: 'pqr', b: 'xyz' }的{​​{1}}。

这是一个很好的场景，但在某些情况下我想阻止它。我怎样才能做到这一点？

您可以找到此here

的plunker代码

Answer 1

有两种方法可以防止这种情况：

1 - Object.assign：

var x = { a: 'abc', b: 'jkl' }
var y = Object.assign({}, x);
y.a = 'modified';
console.log('x: ', x);
console.log('y: ', y);

2 - Spread operator：

var x = { a: 'abc', b: 'jkl' }
var y = { ...x };
y.a = 'modified';
console.log('x: ', x);
console.log('y: ', y);

Answer 2

在上述方案中，y获取了一个新对象，x仍然存在。

如果您更新x或y的某些属性，则会有所不同，然后两者都会使用更新引用相同的对象。

var x = { a: 'abc', b: 'jkl' };
    y = x;

y = { a: 'pqr', b: 'xyz' };

console.log(x);
console.log(y);