...运算符的用法，es6 三个点运算符

话不多说，直接上例子，看看  ...运算符到底能干嘛

let arr1 = [1,2,3];
console.log(...arr1);//1,2,3

根据上面例子，可以得出

 let arr1 = [1,2,3];
 let arr2 = [5,6,7];
 console.log([...arr1,...arr2])//[1,2,3,5,6,7]

这个是不是比数组的连接concat更简便了

同理，可直接对数组里面的值进行运算

function sum(x,y){
    return x+y;
}
let arr1 = [3,5];
let arr1 = [3,5,8];
sum(...arr1);// 8
sum(...arr2);// 8

如果我们想把一个数组添加到另一个数组的尾部，常规的写法是

//常规写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

//使用 es6的  ... 写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

 对于dom标签

console.log(document.querySelectorAll('div'))
console.log([...document.querySelectorAll('div')])

输出结果

扩展运算符可以与解构赋值结合起来，用于生成数组。

var arr = ['ni','wo','ta'];
var first = list[0];//ni
rest = arr.slice(1);//['wo','ta']

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  报错

const [last,...butLast] = [1, 2, 3, 4, 5];//正确

扩展运算符还可以将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

上面的写法，有一个重要的好处，那就是能够正确识别 32 位的 Unicode 字符。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

【右上角点个赞，谢谢】