如何變異對象而不重複？

Question

我有這樣的對象

var originalObj = { 
    shop: [ 
    { id: 1, list: "buy milk", complete: false}, 
    { id: 2, list: "buy bread", complete: false} 
    ] 
} 

我想第一個項目更改爲complete: true

var newObj = Object.assign({}, originalObj, { 
    ['shop']: [ 
    {...originalObj['shop'][0] 
     complete: true}, ...originalObj['shop'] 
    ] 
}) 

這樣做的問題是，newObj與三個對象結束了，其中一個我想編輯得到重複。

Answer 1

深拷貝可能有問題的某個時候。當被分配的屬性是對象時，Object.assign（）複製屬性引用。最好你可以使用下面的方法。

var originalObj = { 
    shop: [ 
    { id: 1, list: "buy milk", complete: false}, 
    { id: 2, list: "buy bread", complete: false} 
    ] 
}; 
var newObj = JSON.parse(JSON.stringify(originalObj)); 
newObj.shop[0].complete = true; 

Answer 2

我的評論：「這是因爲你在後面加上整店數組，添加此物後{... originalObj.shop [0]，完整的：真正}」

的... originalObj.shop正在傳播整個陣列。 所以你有這樣的

[{the newly edited object with complete = true}, ...originalObj.shop] 
...originalObj.shop looks like this : 
[{ id: 1, list: "buy milk", complete: false}, 
{ id: 2, list: "buy bread", complete: false}] 

在我的答案我篩選 「老」{ID：1，表： 「買牛奶」，完整的：假}出來。

var changeObject = function(index, objectToEdit){ 
 
    var newObject = {}; 
 
    newObject = Object.assign({}, originalObj.shop[index]); 
 
    newObject.complete = true; 
 
    return newObject; 
 
}; 
 

 
var originalObj = { 
 
    shop: [ 
 
    { id: 1, list: "buy milk", complete: false}, 
 
    { id: 2, list: "buy bread", complete: false} 
 
    ] 
 
}; 
 

 
var changedObj = changeObject(0, originalObj); 
 
var unchangedObjs = originalObj.shop.filter(sobj => { 
 
    if(sobj.id != changedObj.id) 
 
    return sobj; 
 
}); 
 

 
var newObj = { 
 
    'shop': [ 
 
    changedObj, 
 
    ...unchangedObjs 
 
    ] 
 
}; 
 

 
console.log(JSON.stringify(newObj));

只注意到我的回答完全避免你想要的解決方案。 因此，這裏是你想要的解決方案：

var newObj = { 
    'shop': [ 
    {...originalObj.shop[0], complete:true}, 
    ...originalObj.shop.filter(so => {return so.id != originalObj.shop[0].id}) 
    ] 
};