最近写代码遇到了一个bug,找了好久不知道问题出现在哪，最终发现竟然是由于对es6中...拷贝人事太过浅显。
起因
对象obj是我需要的对象，但是我并不想改变这个对象，因此拷贝为对象obj1,最初代码示例如下：
let obj={ status:1, message:{ name:'小明', age:'20' } } let obj1={...obj}; obj1.message.name="张三"; console.log(obj); console.log(obj1);
打印结果：
可以看到打印的两个对象完全一样，原对象和被拷贝对象的name属性值都被改变。
修改
修改代码如下：
let obj={ status:1, message:{ name:'小明', age:'20' } } let obj1={...obj}; let mes={...obj1.message}; mes.name="张三"; obj1.message=mes; console.warn(obj) console.warn(obj1)打印结果：
可以看到原对象obj没有被修改，目标对象obj1被修改了，这正是我想要的。可是为什么会导致一开始的错误呢？
分析
es6中的...拷贝是浅拷贝，对于对象中的属性如果是一个对象的情况，它拷贝的是这个属性对象的引用，因此在改变这个对象属性的时候原对象的这个属性也会被改变。
如果对对象深拷贝，这样也可以解决我的上述问题，可以先序列化对象为一个字符串，然后反序列化生成一个新对象。对于上面示例来说即是：
let obj={ status:1, message:{ name:'小明', age:'20' } } let obj1= JSON.parse(JSON.stringify(obj)) obj1.message.name='张三' console.log(obj) console.log(obj1)打印结果：
最后
更详细的可以看大佬分享的内容：blog.csdn.net/ccaoee/arti…
