三点运算符到底做了什么？

Question

constobj7={a:{b:1}};
constobj8={...obj7}
obj7.a.b=7
console.log(obj7.a.b,obj8.a.b)
//77
constobj9={a:1};
constobj10={...obj9}
obj10.a=7
console.log(obj9.a,obj10.a)
//17
老哥们有点不懂为什么第二段代码是浅复制？还有第一段和第二段为什么不一样？我好像看文档错过了什么但是找不到解释。。。求大佬打醒我。
----------分割线----------上面的我懂了但是这个三点运算符做了什么？和var=有什么区别？
constobj3={a:1};
varobj4=obj3
obj3.a=3;
console.log(obj3.a,obj4.a)
//33
constobj9={a:1};
constobj10={...obj9}
obj10.a=7
console.log(obj9.a,obj10.a)
//17

Answer 1

无论是...还是assign都是浅拷贝，什么是浅拷贝，顾名思义就是只拷贝第一层属性，如果第一层属性的值为一个引用类型的数据，那么复制的就是这个数据的地址，也就是并没有把数据本身拷贝过来，只是说我记住你了，有事我再找你。第一个例子中a属性是一个对象，拷贝过来后改变这个数据的值，那么就相当于改变了原数据第二个例子中a属性是一个namber类型的值，不是引用类型的，所以直接拷贝过来，改变值后，源对象不会跟着改变...是ES6新出现的一种运算符，名为解构。详细的可以看阮一峰老师的ECMAScript6入门顾名思义就是分解一个数据的结构，那么什么数据可以被分解？所有可被遍历的数据(具有Iterator接口的对象)，如对象、数组、Map、Set、argument，另外字符串也可以结构(某种意义上字符串可以理解为数组)。结构一个数据后得到了什么？这就要讲到数据的遍历了，你可以把结构理解为遍历取值，可是也不是什么值都取的。就拿object来说，使用for...in来遍历，得到的是所有可枚举的共有的属性，而使用结构来结构一个对象，得到的是所有可枚举的私有的属性，这点要知道。结构最常用的两个地方，一是结构赋值，一是结构复制。其基本原理都是遍历取值。

Answer 2

origin={name:"James",hello:"World",child:{}};consta=origin;constb={...origin};console.log(a===origin,a);console.log(b===origin,b);console.log(b.child===origin.child);true{name:'James',hello:'World',child:{}}false{name:'James',hello:'World',child:{}}true所以扩展运算符干了什么——浅复制（最后那个true输出说明了child未被复制）