快捷導(dǎo)航

ES6擴展運算符的用途實例詳解

更新時間：2017年08月20日 11:37:46 作者：白色的海

這篇文章主要介紹了ES6擴展運算符的用途 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

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

擴展運算符就是三個點“...”，就是將實現(xiàn)了Iterator 接口的對象中的每個元素都一個個的迭代并取出來變成單獨的被使用。

看這個例子：

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

結(jié)果：

3 4 5

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

console.log(3, 4, 5)

合并數(shù)組

可以使用擴展運算符將多個數(shù)組進行合并。

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ù)，要么按照下標訪問數(shù)組元素去調(diào)用函數(shù)，缺點是數(shù)組個數(shù)和函數(shù)參數(shù)個數(shù)完全綁定，有一個個數(shù)發(fā)生變化，那么就要修改了。

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

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

fun1.apply(null, arr4)

如果是用擴展運算符，那就方便咯。

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)配合時，擴展運算符只能用在最后一個上，否則報錯。

可以展開實現(xiàn)了Iterator 接口的對象

比如Map，Set，數(shù)組就是從Iterator接口實現(xiàn)來的，Object不是，所以擴展Object會報錯。

擴展Set。

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

結(jié)果:

1 2 3

擴展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 ]

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

如果擴展Object，就會報錯。

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

報錯。

總結(jié)

以上所述是小編給大家介紹的ES6擴展運算符的用途，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片