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

Question

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