es6知识点2-数组的扩展运算符（spread）

一、定义

**扩展运算符是三个点（…）,**将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]); // 1 2 3
//注意 扩展运算符所在的括号不是函数调用时，是会报错的。  直接写(...[1,2,3])报错

二、扩展运算符的用途

1.主要用于函数的调用

function add(a,b){
    return a+b
}
var nums = [3,4];
add(...nums); // 7

2. 替换函数的apply方法
   A.方法名.apply(B,[a,b…]) : 表示的是B借用A的方法，传入后面数组里面的值，也换个意思就是方法名的this指向B，调用者转移了，如果B没有的话就写为null

var nums = [7,3,2]
var nums2 = [3,5]

//从一组的数据中找到最大值，传的值不能是数组
Math.max()  
//在之前的方法中
Math.max.apply(null,nums);  // 7
//在使用了扩展运算之后
Math.max(...nums) // 7

//将一个数组添加到一个数组的尾部，但是push方法的参数不能是数组
Array.push()
//在之前的方法
Array.prototype.push.apply(nums, nums2);  // 5(数组长度)
nums // [7, 3, 2, 3, 5]
//在使用了扩展运算后
nums.push(...nums2)  // 5(数组长度)
nums // [7, 3, 2, 3, 5]

3. 复制数组：完整的克隆，相当于是深克隆

var a1 = [1,2];
//两种写法   改变a2,a1不会变的
var a2 = [...a1];
var [...a2] = a1;

4. 浅克隆合并数组

var a1 = [1,2,3];
var a2 = [4,5,6];
var a3 = [7,8,9];
//之前的concat()方法
a1.concat(a2,a3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//扩展运算
[...a1,...a2,...a3]; //[1, 2, 3, 4, 5, 6, 7, 8, 9]

5. 数组扩展运算进行赋值

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []
//如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [...butLast, last] = [1, 2, 3, 4, 5];  //报错

6. Map结构或Set数据结构的 Iterator 接口
   扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

三、数组去重

var array = [1,1,2,3,4,5,6,6,6];
function qc(arr){  //去重
	return [...new Set(arr)]  //扩展运算符 复制成数组
}
qc(array) //[1, 2, 3, 4, 5, 6]