扩展操作符（…）可在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；
还以在构造对象时, 将对象表达式按key-value的方式展开；
1. 数组
1.1 构造数组
没有扩展运算符的时候，只能组合使用 push，splice，concat 等方法，将已有数组元素变成新数组的一部分。
有了扩展运算符, 构造新数组会变得更简单、更优雅：
扩展运算符(spread)就是我们知道的三个点(…)，它就好像 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1,2,3]); // 1 2 3 console.log(1,...[2,3,4],5) // 1 2 3 4 5 console.log([1,...[2,3,4],5]) // [1, 2, 3, 4, 5]
1.2 数组拷贝
展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝
let arr = [1, 2, 3]; let arr2 = [...arr]; // [1, 2, 3] arr2.push(4); console.log(arr2); // [1, 2, 3, 4] // 数组含空位 let arr3 = [1, , 3], arr4 = [...arr3]; console.log(arr4); // [1, undefined, 3]
1.3 合并数组
本质：将一个数组转为用逗号分隔的参数序列，然后置于数组中
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回 //等同于 var arr4 = arr1.concat(arr2); console.log(arr3,arr4) // [0,1,2,3,4,5] [0,1,2,3,4,5]
2. 对象
扩展运算符（…）用于取出 参数对象 所有 可遍历属性 然后拷贝到当前对象。
2.1 克隆对象
当 String，Number，Boolean 时，属于深拷贝；
当 Object，Array时，属于浅拷贝；
var obj1 = { foo: 'bar', x: 42 }; var clonedObj = { ...obj1 }; console.log(clonedObj); // { foo: "bar", x: 42 }
2.2 合并对象
let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name}; console.log(person); // {age: 15, name: "Amy"}
注意：
自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉；
自定义的属性在拓展运算度前面，则自定义的属性将被覆盖掉；
let person = {name: "Amy", age: 15}; let someone = { ...person, name: "Mike", age: 17}; let someone1 = { name: "Mike", age: 17,...person}; console.log(someone); // {name: "Mike", age: 17} console.log(someone1); // {name: "Amy", age: 15}
扩展运算符后面是空对象、null、undefined，没有任何效果也不会报错。
//空对象 let a = {...{}, a: 1, b: 2}; console.log(a); //{a: 1, b: 2} // null 、 undefined let b = {...null, ...undefined, a: 1, b: 2}; console.log(b); //{a: 1, b: 2}
3. 函数
函数调用中，扩展运算符（…）将一个数组，变为参数序列
function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; //不使用延展操作符 console.log(sum.apply(null, numbers)); //使用延展操作符 console.log(sum(...numbers)); // 6
扩展运算符与的函数参数可以结合使用，非常灵活：
function f(x,y,z,v,w,u){ console.log(x,y,z,v,w,u) } var args = [0,1,5]; f(-1,...args,2,...[3]); // -1, 0, 1, 5, 2 ,3
4. 在 react 中的运用
通常我们在封装一个组件时，会对外公开一些 props 用于实现功能，大部分情况下在外部使用都应显示的传递 props ，
但是当传递大量的props时，会非常繁琐，这时我们可以使用 …(扩展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。
之前的写法：
<CustomComponent name ='Jine' age ={21} />
使用 … ，等同于上面的写法
const params = {name: 'Jine', age: 21} <CustomComponent {...params} />
配合解构赋值避免传入一些不需要的参数
var params = { name: '123', title: '456', type: 'aaa' } var { type, ...other } = params; <CustomComponent type='normal' number={2} {...other} /> //等同于 <CustomComponent type='normal' number={2} name='123' title='456' />
