JS中的三个点，扩展运算符(...)的意思

我写了js一年，其实我没怎么用过它，但是吧，我看别人写代码的时候会发现，总会有这三个点，我也不知道什么意思，最近遇到的越来越多了，所以我还学一下吧。

这三个点其实是扩展运算符！它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开，说白话就是脱衣服不管是大括号（[]）、花括号（{}）

var a = [1,2,3],...a输出打印会是1,2,3，就是把它们展开了

// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6

//object类型
var man = {name:'chuichui',height:176}
console.log({...man})

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

 let bar = { a: 1, b: 2 };
 let baz = { ...bar }; // { a: 1, b: 2 }

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

 let bar = {a: 1, b: 2};
 let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

 这个例子扩展运算符拷贝的对象是基础数据类型，因此对obj2的修改并不会影响obj1

 let obj1 = { a: 1, b: 2};
 let obj2 = { ...obj1, b: 'aqing'};
 console.log(obj1); // {a: 1, b: 2}
 console.log(obj2); //  {a: 1, b: "aqing"}

 这里可以看到，对obj2的修改影响到了被拷贝对象obj1，原因上面已经说了，因为obj1中的对象c是一个引用数据类型，拷贝的时候拷贝的是对象的引用。

let obj1 = { a: 1, b: 2, c: {name: 'a'}};
 let obj2 = { ...obj1};
 obj2.c.name = 'aqing';
 console.log(obj1); // {a: 1, b: 2, c: {name: 'aqing'}}
 console.log(obj2); // {a: 1, b: 2, c: {name: 'aqing'}}

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

 let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
 x // 1
 y // 2
 z // { a: 3, b: 4 }

如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

 {...'hello'}
 // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

 可以将数组转换为参数序列

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42