es6 - spreed & rest 【... 扩展运算符】

扩展运算符：…运算符

好处：简化书写长度，提升开发效率。

具备两个功能：

1、展开功能

2、收集功能

所以…运算符又可以叫做展开收集运算符。

他的不同作用需要在不同场景中使用才会出现：

a、读 - 展开作用，输出、打印的情况。读完输出散列的值

读取arg2这个数组，并返回散列的项

1 var arg2 = [1,2,3,4,5];
2 
3 console.log(...arg2);// 读，展开数组成散列的项

b、写 - 收集作用，写入、整合的情况。写完得到一个数组

把实参这些散列项写入到args里边并返回一个数组

function test(...args){

    console.log(args);//写，把散列的项写入到一个数组中

}

test(1,2,3,4,6);

不光这一种用法，他还可以有选择性的写：

如下图，把扩展运算符写到最后，前边有单独的行参：

* 但是尝试把…写在行参中间，就会报错：

展开作用【读】的应用：

用法一：把聚合的值展开成散列的值。

var arg2 = [1,2,3,4,5];

console.log(...arg2);// 读，展开数组成散列的项

// 比如写…[1,2,3] 相当于写 1,2,3

观察了一下babel编译后的代码，是让log调用时使用apply的原理调用：

往apply的第二个参数处传入一个数组，数组在apply内部就会被一一展开成一个参数列表，log接收到的就是这个展开的参数列表，

执行console.log再次打印就是这个参数列表被一一打印了。这么看来apply也有展开数组的作用。

用法二：数组合并

 1 // 读操作 - 数组合并
 2 
 3 let arr1 = [1,2,3,4],
 4 
 5 arr2 = [6,7,8,9],
 6 
 7 newArr = [...arr1,...arr2];
 8 
 9 console.log(newArr);
10 
11 // 相当于下边的写法：
12 
13 let concatArr = [].concat(arr1,arr2);
14 
15 console.log(concatArr);

实际上babel编译后确实是这么处理的：

这也是他语法糖的说明。

这种方法如果用来做数组克隆的话，也是一种浅克隆。举例说明：

 1 var arrA = [{
 2     a: 1,
 3     b: 1
 4     },
 5     'b', 
 6     {
 7     a: 2,
 8     b: 2
 9     }
10 ];
11 var arrB = [...arrA];
12 console.log(arrB) arrB[0].a = '浅克隆？';
13 arrB[1] = '浅克隆！';
14 console.log('arrA：', arrA, 'arrB', arrB);

打印结果：

收集作用【写】的应用：

比如我们写一个求和函数：

1 function getSum() {
2     let len = arguments.length,
3         sum = 0;
4     for (let i = 0; i < len; i++) {
5         sum += arguments[i]
6     }
7     return sum
8 }
9 console.log(getSum(1, 2, 3, 4, 6));

这样写的原理是利用arguments实质为一个伪数组，遍历这个伪数组，把每一项累加求和。

因为之所以叫伪数组，就是因为他们是假数组，不能随心所欲的用数组的方法(比如forEach遍历)，必须通过转换。

【更多伪数组转换为数组的方法见这里】https://www.cnblogs.com/padding1015/p/10106957.html：

如果我们想用数组的方法，就得把arguments这个伪数组转化为数组再进行处理。

1 function getSum() {
2   let arr = Array.prototype.slice.call(arguments); // 转换伪数组为真数组。
3   return arr.reduce((pre, cur) => {
4     return pre += cur;
5   }, 0);
6 }
7 console.log(getSum(1, 2, 3, 4, 6));

奇迹就是，当我们利用扩展运算符的收集作用后，我们就可以直接使用扩展运算符收集后的结果，而这个结果就是一个数组格式：

1 function getSum(...arr) {
2         // let arr = Array.prototype.slice.call(arguments);为了和上边做清晰的对比，我直接注视了这一句而不是直接删掉了。
3     return arr.reduce((pre, cur) = >{
4         return pre += cur
5     },
6     0)
7 }
8 console.log(getSum(1, 2, 3, 4, 6));