這篇文章給大家介紹ES6擴(kuò)展運(yùn)算符的使用場(chǎng)景有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站是一家專(zhuān)業(yè)提供屏邊企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都做網(wǎng)站、成都網(wǎng)站制作、HTML5建站、小程序制作等業(yè)務(wù)。10年已為屏邊眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

ES6的擴(kuò)展運(yùn)算符可以說(shuō)是非常使用的，在給多參數(shù)函數(shù)傳參，替代Apply，合并數(shù)組，和解構(gòu)配合進(jìn)行賦值方面提供了很好的便利性。

擴(kuò)展運(yùn)算符就是三個(gè)點(diǎn)“...”，就是將實(shí)現(xiàn)了Iterator 接口的對(duì)象中的每個(gè)元素都一個(gè)個(gè)的迭代并取出來(lái)變成單獨(dú)的被使用。

看這個(gè)例子：

console.log(...[3, 4, 5])

結(jié)果：

3 4 5

調(diào)用其實(shí)就是：

console.log(3, 4, 5)

合并數(shù)組

可以使用擴(kuò)展運(yùn)算符將多個(gè)數(shù)組進(jìn)行合并。

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [7, 8, 9]
console.log([...arr1, ...arr2, ...arr3])

結(jié)果：

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

函數(shù)多參數(shù)傳遞, 替換Apply

先把參數(shù)定義成數(shù)組，函數(shù)定義好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']
let fun1 = (a1, a2, a3, a4) => {
 console.log( a1, a2, a3, a4)
}

在ES6前，要把數(shù)組參數(shù)傳遞給函數(shù)，要么按照下標(biāo)訪問(wèn)數(shù)組元素去調(diào)用函數(shù)，缺點(diǎn)是數(shù)組個(gè)數(shù)和函數(shù)參數(shù)個(gè)數(shù)完全綁定，有一個(gè)個(gè)數(shù)發(fā)生變化，那么就要修改了。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])

要么就用Apply進(jìn)行調(diào)用，結(jié)果當(dāng)然是沒(méi)毛病，也是ES6之前用的最多的。

fun1.apply(null, arr4)

如果是用擴(kuò)展運(yùn)算符，那就方便咯。

fun1(...arr4)

結(jié)果：

arg1 arg2 arg3 arg4

調(diào)用簡(jiǎn)潔爽快。

與解構(gòu)配合賦值

配合使用，可以從數(shù)組中提取除第一個(gè)以后的所有元素成另外一個(gè)數(shù)組。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)

結(jié)果：

1
[ 2, 3, 4, 5, 6 ]

但要注意，與解構(gòu)配合時(shí)，擴(kuò)展運(yùn)算符只能用在最后一個(gè)上，否則報(bào)錯(cuò)。

可以展開(kāi)實(shí)現(xiàn)了Iterator 接口的對(duì)象

比如Map，Set，數(shù)組就是從Iterator接口實(shí)現(xiàn)來(lái)的，Object不是，所以擴(kuò)展Object會(huì)報(bào)錯(cuò)。

擴(kuò)展Set。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)

結(jié)果:

1 2 3

擴(kuò)展Map。

let map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log(...map1)

結(jié)果：

[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]

注意，擴(kuò)展出來(lái)的一個(gè)個(gè)的數(shù)組，按照map的鍵值對(duì)結(jié)構(gòu)，每個(gè)數(shù)組都是2個(gè)元素，一個(gè)是key，一個(gè)是value。

如果擴(kuò)展Object，就會(huì)報(bào)錯(cuò)。

let obj1 = {
  p1: 1,
  p2: 2,
  p3: 3
}
console.log(...obj1)

關(guān)于ES6擴(kuò)展運(yùn)算符的使用場(chǎng)景有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：ES6擴(kuò)展運(yùn)算符的使用場(chǎng)景有哪些-創(chuàng)新互聯(lián)
文章起源：http://www.rwnh.cn/article6/doejig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、Google、靜態(tài)網(wǎng)站、網(wǎng)站改版、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)