ES6解构知多少

最近关于解构踩过两次坑，分别在 react 和 vue

当你发现更改对象无效时，就要思考是不是解构浅拷贝出了问题

理解还未完全透彻，先记录下，作为备份

 

1、解构赋值是浅拷贝（因为它确实不能对多维数组或对象达到深拷贝的作用）

• 深拷贝：修改新变量的值不会影响原有变量的值。默认情况下基本数据类型（number，string，null，undefined，boolean）都是深拷贝。
• 浅拷贝：修改新变量的值会影响原有的变量的值。默认情况下引用类型（object）都是浅拷贝。

2、解构需谨慎 

解构会改变原有引用类型的值，如果你用到了proxy，就会有问题

vue react均踩过坑

错误❎
Object.assign(item, new DimensionItemStore())
[...item, ...new DimensionItemStore()]
item = {...item, ...newItem}

正确✅
Object.assign(new DimensionItemStore(), item)
item.x = 'xxx'
item.y = 'yyy