ES6擴(kuò)展運算符的使用場景有哪些
這篇文章給大家介紹ES6擴(kuò)展運算符的使用場景有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)永勝免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
ES6的擴(kuò)展運算符可以說是非常使用的，在給多參數(shù)函數(shù)傳參，替代Apply，合并數(shù)組，和解構(gòu)配合進(jìn)行賦值方面提供了很好的便利性。
擴(kuò)展運算符就是三個點“...”，就是將實現(xiàn)了Iterator 接口的對象中的每個元素都一個個的迭代并取出來變成單獨的被使用。
看這個例子：
console.log(...[3, 4, 5])
結(jié)果：
3 4 5
調(diào)用其實就是：
console.log(3, 4, 5)
合并數(shù)組
可以使用擴(kuò)展運算符將多個數(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)訪問數(shù)組元素去調(diào)用函數(shù)，缺點是數(shù)組個數(shù)和函數(shù)參數(shù)個數(shù)完全綁定，有一個個數(shù)發(fā)生變化，那么就要修改了。
fun1(arr4[0], arr4[1], arr4[2], arr4[3])
要么就用Apply進(jìn)行調(diào)用，結(jié)果當(dāng)然是沒毛病，也是ES6之前用的最多的。
fun1.apply(null, arr4)
如果是用擴(kuò)展運算符，那就方便咯。
fun1(...arr4)
結(jié)果：
arg1 arg2 arg3 arg4
調(diào)用簡潔爽快。
與解構(gòu)配合賦值
配合使用，可以從數(shù)組中提取除第一個以后的所有元素成另外一個數(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)配合時，擴(kuò)展運算符只能用在最后一個上，否則報錯。
可以展開實現(xiàn)了Iterator 接口的對象
比如Map，Set，數(shù)組就是從Iterator接口實現(xiàn)來的，Object不是，所以擴(kuò)展Object會報錯。
擴(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ò)展出來的一個個的數(shù)組，按照map的鍵值對結(jié)構(gòu)，每個數(shù)組都是2個元素，一個是key，一個是value。
如果擴(kuò)展Object，就會報錯。
let obj1 = {
p1: 1,
p2: 2,
p3: 3
}
console.log(...obj1)關(guān)于ES6擴(kuò)展運算符的使用場景有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當(dāng)前文章：ES6擴(kuò)展運算符的使用場景有哪些
URL網(wǎng)址：http://m.jiaotiyi.com/article/geohjo.html