从对象复制数组并对其进行修改会导致原始对象的更新

时间:2020-09-09 14:50:47

标签: javascript

考虑以下对象

values = {
  pieces: [
      {
        width: 15
      }
  ]
}

我将片段的副本存储在单独的变量中

pieces = values.pieces.slice();

现在我正在按如下方式更改块变量中的值

pieces[0].width =21

但是它也会更新值obj // values.pieces [0] .width现在变为21

我只希望对pieces变量进行更新。值对象应保持不变。

那是

个应该是

    [
      {
        "width": 21
      }
    ]

值应为

values = {
    pieces: [
      {
        width: 15
      }
  ]
}

关于如何解决此问题的任何想法。

2 个答案:

答案 0 :(得分:1)

对象始终是JS中的引用。要修复克隆对象。

pieces = values.pieces.map(p => ({...p}));

答案 1 :(得分:0)

片断是一个使用slice()函数时不可变的数组。但是内部对象仍然是突变的。为了避免某些情况,您可以使用以下代码。

pieces = values.pieces.map(function(item){
    //if latest chrome let newItem = {...item};
    //otherwise
    let newItem = JSON.parse(JSON.stringify(item));
    return newItem;
});