数组扩展运算符之ES6篇

今天，我来给大家介绍一下数组的扩展运算符，废话不多说，进入正题~

首先介绍一下什么是数组的扩展运算符:

举个例子:

vararray= [1,2,3];

console.log(...array);// 1 2 3

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

扩展运算符的样子就如array前的那三个点，它能够将数组或字符串解析为以逗号形式分隔开的元素队列表现形式。在上面的那个例子当中，就相当于下面这一串代码:

console.log(1,2,3);// 1 2 3

明白了数组的扩展运算符之后，我们就来看看其到底能干些什么？

作为函数的参数:

(function(...array){

console.log(...array);

})(...[1,2,3]);// 1 2 3

也可以这样写:

//传入数组

(function(...array){

console.log(...array);

})([1,2,3]);// [1,2,3]

再举一个例子:

function(...array){

console.log(...array);

})(true,[3,4,6],123,"aaa");// true [3,4,6] 123 aaa

总而言之，带有扩展运算符的数组即是将逗号分隔开的元素集视为数组。

解构赋值中的运用:

var[a,...array] = [1,2,3,4];

console.log(a);// 1

console.log(...array);// 2 3 4

如果扩展运算符数组不是放在最后一位则会报错，如下:

var[...array,a] = [1,2,3,4];// Uncaught SyntaxError: Rest element must be last element

var[a,...array,b] = [1,2,3,4];// Uncaught SyntaxError: Rest element must be last element

看到这里，可能有的小伙伴会问，...array能作变量使用吗？在解构赋值中，...array是没有问题的，但是在其他一些地方就不见得能用，举几个例子:

var...array;// Uncaught SyntaxError: Unexpected token ...在谷歌下的报错信息。

vararray= [1,2,3];

console.log(`array数组的值为:${...array}`);// Uncaught SyntaxError: Unexpected token ...

console.log("array数组的值为:"+...array);// Uncaught SyntaxError: Unexpected token ...

说明了扩展运算符声明的数组是不能作为一般的变量来使用的，尽管在一些场合如函数的参数以及解构赋值中使用。

将字符串转化为字符数组:

varstr="Hello World";

console.log([...str]);// ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

也可以这样使用更为直接:

console.log([..."Hello World"]);// ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

这说明了扩展运算符可以运用到字符串上面，并将其解析为以逗号分隔开的字符集。有没有发现一个小小的细节，中括号可以让带逗号分隔开的元素集合成一个数组，就如第一个例子所示般，在扩展运算符中逆向使用中括号可以创造一个数组(前提是，该变量能被扩展运算符解析)。

喜欢的小伙伴们可以点击左上角"Miku灬Rua"关注，有问题的小伙伴也可以关注并留言。

扫下面的二维码也是可以的哟~