- Vue.js 3.0从入门到精通(视频教学版)
- 李小威编著
- 431字
- 2022-07-27 18:37:38
3.6 展开运算符
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
1.函数调用中使用展开运算符
在ES5中可以使用apply方法来将一个数组展开成多个参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164869.jpg?sign=1739005137-klTK2mM51lPaxYXv7g11pS6DJPmCDyJe-0-08ece65db5bc61d21e20a7fee601e6a8)
上面的代码中把args数组当作实参传递给了a、b和c。在ES6中可以更加简洁地来传递数组参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164870.jpg?sign=1739005137-y3XVU3tcFGeMMzYI2RsxbN7LHgtILmDQ-0-cf6fc86851fc1518c92f297991c648d8)
这里使用展开运算符把args直接传递给test()函数。
2.数组字面量中使用展开运算符
在ES6中,可以直接加一个数组并合并到另外一个数组当中:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164871.jpg?sign=1739005137-0iyy7r7G8ZxYhSoXFwwxEvpNnmEc2ZRB-0-6181b06ef005e98ed284d501cee08352)
展开运算符也可以用在push()函数中,可以不需要再使用apply()函数来合并两个数组:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164872.jpg?sign=1739005137-ONvXTgg7B0Ns09VqijNunYWCF68uG1Dt-0-73881f0c86b46b59bfe18944b34d2b01)
3.用于解构赋值
解构赋值也是ES6中新添加的一个特性,这个展开运算符可以用于部分情景:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164873.jpg?sign=1739005137-Fk30bRK3EieJrGERxSJ3quEGWNzQupzr-0-9fdb3e34ce58678f4d6ca6f9d977c3d2)
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,它将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_165329.jpg?sign=1739005137-18eedj6Bi9xXhtlgT1fWDvQn9hUVVlWT-0-3725e2d7fcc92b68615dd03834eafbf0)
4.类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164874.jpg?sign=1739005137-8Kd7QkXOOcqocjDMSWyOfF9Zzvp6DNCm-0-fe195857faeda664d3dca6e9a5b1fd4f)
list是类数组对象,这里通过使用展开运算符使其变成了数组。