Vue.js 3.0从入门到精通(视频教学版)
上QQ阅读APP看书,第一时间看更新

3.6 展开运算符

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

1.函数调用中使用展开运算符

在ES5中可以使用apply方法来将一个数组展开成多个参数:

上面的代码中把args数组当作实参传递给了a、b和c。在ES6中可以更加简洁地来传递数组参数:

这里使用展开运算符把args直接传递给test()函数。

2.数组字面量中使用展开运算符

在ES6中,可以直接加一个数组并合并到另外一个数组当中:

展开运算符也可以用在push()函数中,可以不需要再使用apply()函数来合并两个数组:

3.用于解构赋值

解构赋值也是ES6中新添加的一个特性,这个展开运算符可以用于部分情景:

展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,它将多个数组项组合成了一个新数组。

不过要注意,解构赋值中展开运算符只能用在最后。

4.类数组对象变成数组

展开运算符可以将一个类数组对象变成一个真正的数组对象:

list是类数组对象,这里通过使用展开运算符使其变成了数组。