ES6 新特性 扩展运算符(...)详解

扩展操作符（…）可在函数调用/数组构造时, 将数组表达式或者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' />