- 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=1739180912-RFR0PjUWOt67Z1hR9ljokkKWDtGFBseR-0-06eacdee449ffb97e97da338a8f4790b)
上面的代码中把args数组当作实参传递给了a、b和c。在ES6中可以更加简洁地来传递数组参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164870.jpg?sign=1739180912-3kUcjvRoXhtGDsbT0S82nEp5VC152bq4-0-abe180c6b90ce12e33d0483d62a1a4ee)
这里使用展开运算符把args直接传递给test()函数。
2.数组字面量中使用展开运算符
在ES6中,可以直接加一个数组并合并到另外一个数组当中:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164871.jpg?sign=1739180912-JfcIZZqpMjpMnLgwspfH0eYv0eQe9MmV-0-7d44c7e0ecf308c0dd0da340c33e3630)
展开运算符也可以用在push()函数中,可以不需要再使用apply()函数来合并两个数组:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164872.jpg?sign=1739180912-hHzV3KJU2lU1dZ863hkCM5QKd9FvY3Hf-0-4ef5131c7ed59a62ee8d729fb3f9250d)
3.用于解构赋值
解构赋值也是ES6中新添加的一个特性,这个展开运算符可以用于部分情景:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164873.jpg?sign=1739180912-WnY3BFyrvLOMTHPanJKGmF7WF6LWotb6-0-128a6b2ae66e0e96cad6ffad9fff7b89)
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,它将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_165329.jpg?sign=1739180912-N5PfjjhZkUxoYAQUf45lYbpUJBNtHplB-0-d2459f3c8b88e655e82e9e73c5ab99a4)
4.类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164874.jpg?sign=1739180912-DRZ4hnZKIunj6lv3WG1Cd0442TKJoIKs-0-4b70279580a3176bfa034f0f5935b703)
list是类数组对象,这里通过使用展开运算符使其变成了数组。