1、扩大运算符简介
扩大运算符（ spread ）是三个点（…），能够将一个数组转为用逗号分开的参数序列。
说的浅显易懂点，有点像化骨绵掌，把一个大元素给打散成一个个零丁的小元素。
基础用法：拆解字符串与数组
var array = [1,2,3,4];
console.log(...array);//1 2 3 4
var str = "String";
console.log(...str);//S t r i n g
2、扩大运算符运用
2.1 某些场景能够替换apply
在运用Math.max()求数组的最大值时，ES5能够经由过程 apply 做到（用一种不友好且烦琐的体式格局）
// ES5 apply 写法
var array = [1,2,3,4,3];
var max1 = Math.max.apply(null,array);
console.log(max1);//4
荣幸的是JavaScript的天下在不停转变，扩大运算符可用于数组的析构，文雅的处置惩罚了这个题目。
// ES6 扩大运算符 写法
var array = [1,2,3,4,3];
var max2 = Math.max(...array);
console.log(max2);//4
先把 array 打散成 1 2 3 4 3，再在内里找最大的那一个，就不言而喻了。
2.2 替代数组的push、concat 等要领
完成把 arr2 塞到 arr1 中
// ES5 apply 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1 [0, 1, 2, 3, 4, 5]
扩大运算符又要发挥化骨大法了
// ES6 扩大运算符 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//arr1 [0, 1, 2, 3, 4, 5]
浅显的诠释下， 扩大运算符先把 arr2 打散成 3 4 5 ， 以后再往arr1里push，就轻松多了。
同理可推，concat 兼并数组的时刻：
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的兼并数组
arr1.concat(arr2, arr3) // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的兼并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
ES5的兼并数组写法，像是 arr1 把 arr2，arr3 给吸收了。
而ES6的兼并数组写法，则是先把 arr1，arr2， arr3 拆解，以后塞到新的数组中。
2.3 拷贝数组或对象
//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]
//拷贝数组
var obj = {
age:1,
name:"lis",
arr:{
a1:[1,2]
}
}
var obj2 = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}
无论是像克隆数组照样对象，先用化骨绵掌之扩大运算符，将其打散，以后再拼装的到一同就能够了，何等简朴易用。
2.4 将伪数组转化为数组
//伪数组转换为数组
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]); // [div, div, div ... ]
上面代码中，querySelectorAll 要领返回的是一个 nodeList 对象。它不是数组，而是一个相似数组的对象。这时候，扩大运算符能够将其转为真正的数组，缘由就在于 NodeList 对象完成了 Iterator。
注重：运用扩大运算符将伪数组转换为数组有局限性，这个类数组必需得有默许的迭代器且伪可遍历的。
3、rest 运算符简介
盈余运算符（the rest operator），它的模样看起来和睁开操纵符一样，然则它是用于解构数组和对象。在某种程度上，盈余元素和睁开元素相反，睁开元素会“睁开”数组变成多个元素，盈余元素会网络多个元素和“紧缩”成一个单一的元素。
说的浅显点，有点像吸星大法，网络多个元素，紧缩成单一的元素 。
rest参数用于猎取函数的过剩参数，如许就不须要运用arguments对象了。rest参数搭配的变量是一个数组，该变量将过剩的参数放入数组中。
比方完成盘算传入一切参数的和运用arguments参数：
function sumArgu () {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result
}
console.log(sumArgu(1,2,3));//6
运用rest参数：
function sumRest (...m) {
var total = 0;
for(var i of m){
total += i;
}
return total;
}
console.log(sumRest(1,2,3));//6
上面代码应用 rest 参数，能够向该函数传入恣意数目的参数。传递给 sumRest 函数的一组参数值，被整合成了数组 m。
就像是吸星大法，把疏散的元素网络到一同。
所以在某些场景中，无需将arguments转为真正的数组，能够直接运用rest参数替代。
4、rest 运算符运用
4.1 rest 参数替代arguments变量
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
上面的两种写法，比较后能够发明，rest 参数的写法更天然也更简约。
不过，rest参数和arguments对象有肯定的区分：
4.2 与解构赋值组合运用
var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]
备注：rest参数可理解为盈余的参数，所以必需在末了一名定义，假如定义在中心会报错。
var array = [1,2,3,4,5,6];
var [a,b,...c,d,e] = array;
// Uncaught SyntaxError: Rest element must be last element
5、总结
5.1 扩大运算符和rest运算符是逆运算
扩大运算符：数组=>支解序列
rest运算符：支解序列=>数组
5.2 扩大运算符运用场景
因为其烦琐的语法，apply 要领运用起来并非很轻易。当须要拿一个数组的元素作为函数挪用的参数时，扩大运算符是一个不错的挑选。
扩大运算符还改良了数组字面量的操纵，你能够更轻易的初始化、衔接、复制数组了。
运用析构赋值你能够提取数组的一部分。经由过程与迭代器协定的组合，你能够以一种更天真的体式格局运用该表达式。
5.3 rest运算符运用场景
rest运算符主如果处置惩罚不定数目参数，rest参数使得网络参数变得异常简朴。它是类数组对象arguments一个合理的替换品。
rest参数还能够与解构赋值组合运用。
在现实项目中天真运用扩大运算符、rest运算符，能写出更精简、易读性高的代码。
