![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
3.6 展开运算符
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
1.函数调用中使用展开运算符
在ES5中可以使用apply方法来将一个数组展开成多个参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164869.jpg?sign=1738894330-FNs9Ejei05BK5FIpqZ5l453XNXcQ16lA-0-2e98884f31d0ac818c4a5d9ccc9d0858)
上面的代码中把args数组当作实参传递给了a、b和c。在ES6中可以更加简洁地来传递数组参数:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164870.jpg?sign=1738894330-7YVKUj9LGzFrZSwjuAAdB5i6BOk4zd39-0-445f1e0ed887f6eea8d6f8242fd405f2)
这里使用展开运算符把args直接传递给test()函数。
2.数组字面量中使用展开运算符
在ES6中,可以直接加一个数组并合并到另外一个数组当中:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164871.jpg?sign=1738894330-YyqaK8AsuRpHXx5hGogGUxRkyGRhKSs7-0-0b6aeea17a016cbd6ec790f229510042)
展开运算符也可以用在push()函数中,可以不需要再使用apply()函数来合并两个数组:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164872.jpg?sign=1738894330-CMvFf0kSSIVeoK4mWDsqYsypb0hE1ZgY-0-b23d95ee202a997d034dfae511f3a8a6)
3.用于解构赋值
解构赋值也是ES6中新添加的一个特性,这个展开运算符可以用于部分情景:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_164873.jpg?sign=1738894330-E5cxnbGPaoWLBSJf1r6syDHR10YagHAQ-0-ebc377045669aa376f1cc0341801e9a0)
展开运算符在解构赋值中的作用跟之前的作用看上去是相反的,它将多个数组项组合成了一个新数组。
不过要注意,解构赋值中展开运算符只能用在最后。
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P43_165329.jpg?sign=1738894330-IMLFrrZpQfrNcm0ptBOBMJs1XgrVNJGq-0-0b4abfaa925340fba7bb69c110087c4d)
4.类数组对象变成数组
展开运算符可以将一个类数组对象变成一个真正的数组对象:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P44_164874.jpg?sign=1738894330-WZtX1OwYEBOPeey3PsnkimsBHlq0cHN1-0-98d5cb081d0faae1a7e185eef6fae53c)
list是类数组对象,这里通过使用展开运算符使其变成了数组。