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

Question

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