JS ES6中扩展运算符(...)的作用

扩展运算符(spread)是三个点(…),该运算符主要用于函数调用。但是也还有其他一些特别实用的功能。

数组传参

function add(x ,y){
            console.log("你"+ x + "，我"+ y);
        }
        let arr = ["艾希","奶妈"];
        add(...arr);  //输出为你艾希，我奶妈

如果在ES5中，需要对应取值只能通过数据加下标一个个传进去，在ES6中，可以直接…数组直接传进去。

复制数组

        let a = ["疾风剑豪"];
        let b = [...a];
        console.log(...b);  //复制了数组a的值
        console.log(a === b); //false

如果直接将数组a赋值给b，b得到的只是一个数组a的地址，并不能得到数组a里面的值。如果，采用…a 可以直接复制到数组a里面的值，但是，改变数组b里面的值，并不会影响数组a里面的值。

合并数组

  		let a1= ["暗夜猎手"];
        let b1= ["澡子哥 UZI"];
        console.log([...a1,...b1]); //["暗夜猎手","澡子哥 UZI"]

在ES5中，我们可以采用concat(a1,b1)，将两个数组合并，在ES6中，我们就可以采用[…a1,…b1]，将两个数组合并。

解构赋值

		let a1= ["暗夜猎手"];
        let b1= ["澡子哥 UZI"];
        let arr = ["艾希","奶妈"];
        let arr1 = [...a1,...b1,...arr]; // 将三个数组合并
        let [aa1,...aa2] =arr1; // 采用解构赋值
        console.log(aa1); //输出：暗夜猎手
        console.log(aa2); //输出：["澡子哥 UZI","艾希","奶妈"] 

在解构赋值中，它又相当于一个剩余运算符，那什么是解构运算符呢？
就是 ：赋值运算符的扩展，专门对数组和对象进行模式匹配。
例如 let [a,b] = [2,1] ，此时a= 2， b = 1；
上面输出aa1 就是赋值运算符右边数组第一个，而…aa2则被赋值的是运算符右边数组剩下的元素。
不过该运算符在解构赋值中，只能放参数最后一位，不然会报错。

字符串转数组

console.log([..."hello"]); // [h,e,l,l,o]

类数组转真数组

let nodeList = document.querySelectorAll("div")
        let array = [...nodeList]

可以将获取的dom节点构成的类数组（数组类型为NodeList）转化为真数组。querySelectorAll方法返回的是一个NodeList对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组