es6解构问题

snail_
  • 203

var obj = {
      id: 1,
      type: 'fruits',
      children: [
        {
          name: 'apple',
          price: 18
        },
        {
          name: 'pare',
          price: 12
        }
      ],
      otherChildren: [
        {
          name: 'banana',
          price: 10
        }
      ]
    }
    var {...newObj} = obj
    newObj.children.splice(1,1)

想把对象 obj的值 通过解勾的方式赋值给newObj, 但是通过上面的写法, 在解勾赋值给newObj后,操作newObj里面的数据,obj的数据也跟着变化了, 显然在解勾赋值的时候错了......
想问问大神,有什么简单的方法(看起来优雅一些的方法)能把obj的值赋值给newObj后,令操作newObj的数据让obj里的数据不跟着变化??

回复
阅读 1k
2 个回答
✓ 已被采纳

ES6 的解构赋值属于浅拷贝,只是拷贝对象的引用地址,也就造成了你说的结果:修改一个,另一个也跟着变。

如果想要深拷贝,生产环境一般推荐使用 JSON.parse(JSON.stringify(obj)) 。我看你的 obj 对象也符合该方法的使用条件。

不过要注意,JSON.parse(JSON.stringify(obj)) 方法的使用限制挺多的,有如下几点:

  • 会忽略函数、undefinedSymbolnull不会被忽略)
  • 不能正确拷贝正则表达式(会拷贝为空对象{}
  • 循环引用报错
  • 相同的引用会被重复拷贝

只要心里明白这些特殊情况,就可以放心使用 JSON.parse(JSON.stringify(obj)) 了。

另外,如果 JSON.parse(JSON.stringify(obj)) 满足不了你的需求,那你只能用现有库了,例如 lodash 的深拷贝函数(自己实现的深拷贝函数,容易漏掉很多边界情况,生产环境不推荐使用自己实现的)。

如果有帮助,希望采纳!

解构是浅拷贝,深拷贝用 JSON.parse(JSON.stringify(xxx)) 就可以了

宣传栏