传播方法在对象上有效吗?您如何复制对象

Question

我有以下内容：

constructor() {
    super();
    this.state = {
        lists: [], 
        items: {}  
    };
}

所以 this.state.items是一个对象。

现在我有：

handleAddItem(s) {
    var key = Object.keys(s)[0];
    var value = s[key];
    var allItems = {...this.state.items};
    allItems[key].push({name: value});
    console.log(allItems);
    console.log(this.state.items);
}

this.state.items最初是null just {}，s是一个具有键值对的对象：snoopy

var s={};
   s[this.props.idName] = this.refs.id.value;

为什么在console.log中都相同？

Answer 1

传播语法确实在对象上工作。但是，在复制数组时，有效地传播语法会有效地深入一个水平。因此，allItems[key]仍会引用相同的对象，当您突变allItems[key]时，导致其突变。

根据MDN文档：

注意：在复制一个时有效地传播语法在 大批。因此，它可能不适合复制多维 如下示例所示的数组（与 object.assign（）和传播语法）。

var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// Now array a is affected as well: [[], [2], [3]]

如果您想克隆嵌套状态，您会做

var allItems = {
    ...this.state.items, 
    [key]: [...this.state.items[key]]
};

var items = {
   x: ['a']
};
var value="abc"
var key='x'
var allItems = {
    ...items, 
    [key]: [...items[key]]
};
console.log(allItems, 'before');
allItems[key].push({name: value});
console.log(allItems);
console.log(items);

Answer 2

传播对象上的作品。

在此处检查文档以获取更多信息。结果是相同的，因为差异的作用是复制引用，因此，如果您更改任何值（数组，对象），它会反映出原始内容。

通过使用酱，您基本上是制作浅副本而不是深副本，因此内部值保持完整。