我对javascript浅拷贝感到困惑

Question

‘a’数组不受影响。

const a = [1,2,3]
const b = [...a] // shallow copy

b[0] = 9

console.log(a) // [1,2,3]
console.log(b) // [9,2,3] results as expected


----------

const a = [{name:"John"},{name:"George"}];
const b = [...a];

b[0] = {name:"Oliver"}

console.log(a) // [ { name: 'John' }, { name: 'George' } ]
console.log(b); // [ { name: 'Oliver' }, { name: 'George' } ] results as expected


----------

const a = [{name:"John"},{name:"George"}];
const b = [...a];

b[0].age = 21

console.log(a); //[ { name: 'John', age: 21 }, { name: 'George' } ]
console.log(b); // [ { name: 'John', age: 21 }, { name: 'George' } ]

// 为什么'a'数组受到影响？

为什么他们都受到影响？它显示了相同的引用，但在上面的其他 2 个示例中，没有任何更改，仅更改了“b”数组。

Answer 1

发生这种情况是因为对象的引用没有改变，在内部当你对“a”数组进行浅表复制时，你正在复制对这些对象的引用，所以在改变 b[0] 对象之后你也影响 a[0] 因为它是同一个对象

Answer 2

在第二个示例中，您将

b[0]

分配给全新的对象（具有新的引用），但在第三个示例中，您更改了对象中的

age

，并在

a

和

b

数组之间共享引用。

如果您需要相同的行为，则需要映射新的引用。

const a = [{name:"John"},{name:"George"}];
const b = [...a.map(o => ({...o}))];

b[0].age = 21

console.log(a); //[ { name: 'John' }, { name: 'George' } ]
console.log(b); // [ { name: 'John', age: 21 }, { name: 'George' } ]