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

Question

const obj7 = {a: {b: 1}};

const obj8= { ...obj7 } 

obj7.a.b = 7

console.log(obj7.a.b, obj8.a.b)

// 7 7

const obj9 = {a: 1};

const obj10= { ...obj9 } 

obj10.a = 7

console.log(obj9.a, obj10.a)

// 1 7

老哥们有点不懂 

为什么第二段代码是浅复制？ 还有第一段和第二段为什么不一样？

我好像看文档错过了什么 但是找不到解释。。。

求大佬打醒我。

----------分割线----------

上面的 我懂了 但是这个三点运算符 做了什么？ 和 var = 有什么区别？

const obj3 = {a: 1};

var obj4 = obj3

obj3.a = 3;

console.log(obj3.a,obj4.a)

// 3 3

const obj9 = {a: 1};

const obj10= { ...obj9 } 

obj10.a = 7

console.log(obj9.a, obj10.a)

// 1 7

Answer 1

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

Answer 2

origin = {    name: "James",    hello: "World",    child: {}};const a = origin;const b = { ...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 未被复制）

Answer 3

扩展运算符（spread）引用类型与值类型