javascript - 为什么在运行 map 时使用扩展运算符的数组副本会修改原始数组？

Question

1. 为什么通过map运行时使用展开运算符复制的数组会修改原数组？

2. 我应该怎么做才能不改变原始数组？

    const data = {hello : "10"};
    const prop = [{name : "hello", color: "red", value : ""}]
    
    const copyProp = [ ...prop ]
    
    copyProp.map(el => {
    	el.value = data[el.name] || ""
      	return el
    }) // 
    
    console.log(copyProp === prop) // -> false
    console.log(copyProp) // -> value: 10
    console.log(prop) // -> Value: 10 (Should still be "")

Answer 1

展开运算符创建数组的浅拷贝。换句话说，您创建了一个引用相同对象的新数组。因此，当您修改这些对象时，更改会反射(reflect)在原始数组中。

一般来说，当你需要复制一个数组时，你应该考虑做一个深拷贝。但是，在这种情况下，您只需要正确使用 map() 即可。 map() 创建一个新数组，因此它可以直接为您制作修改后的副本:

const copyProps = props.map(el => {
        return {
            ...el,
            value: data[el.name] || '',
        }
});

在这里，我使用扩展运算符复制每个对象。这意味着生成的数组有自己的对象引用。这与您的原始解决方案具有相同的警告:这是一个浅拷贝。对于您的示例数据，这很好，因为所有值和键都是字符串。但是，如果您的真实数据与更多数组和对象嵌套得更深，您将遇到同样的问题。