javascript - 为什么 array.map 不返回新数组？

Question

我想使用 map 函数创建一个数组的副本，但我却得到了相同的引用。我不明白为什么。我想要另一种方法来创建数组的副本。

我使用 map 函数创建了原始数组的副本，然后对副本使用了 filter 函数来改变单个元素。我希望原始数组不会发生突变，但实际上发生了突变。

谁能告诉我为什么会发生这种情况的背景信息，以及真正复制数组、创建对不同对象的引用的正确方法？

const arr = [{name: 'hello'}, {name: 'world'}] 
const arr2 = arr.map(i => i)
const [partial] = arr2.filter(i => i.name === 'hello')
partial.name = 'HELLO'
arr2[0].name === 'HELLO' // true
arr[0].name === 'HELLO' // true

Answer 1

对象和数组在 JavaScript 中是引用类型，这意味着，当您复制它们时，您正在复制它们的引用，它仍然指向原始对象。

所以当你映射时:

const arr2 = arr.map(i => i);

您正在将项目从 arr 一个接一个地复制到 arr2 。由于这些项目是对象，因此只复制它们的引用。您确实有两个不同的数组，但它们包含对相同对象的引用。

您可以改为在映射时使用扩展运算符对内部对象进行浅拷贝:

const arr = [{name: 'hello'}, {name: 'world'}] 

const arr2 = arr.map(o => ({ ...o })) // spread operator + implicit return notation

arr[0].name = 'bye';
console.log(arr[0].name, arr2[0].name);

正如 @3limin4t0r 在评论中提到的，您还可以使用 Object.assign({}, o) 而不是 { ...o } 进行浅拷贝，因为属性的扩展运算符当前位于 ECMAScript proposal stage 4 中:

const arr = [{name: 'hello'}, {name: 'world'}] 

const arr2 = arr.map(o => Object.assign({}, o))

arr[0].name = 'bye';
console.log(arr[0].name, arr2[0].name);