es6解构问题

Question

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里的数据不跟着变化？？

Answer 1

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

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

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

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

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

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

如果有帮助，希望采纳！

Answer 2

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