首頁 > web前端 > js教程 > ES6擴充運算符

ES6擴充運算符

大家讲道理
發布: 2017-08-19 10:22:07
原創
2741 人瀏覽過

ES6的擴充運算子可以說是非常使用的,在給多參數函數傳參,取代Apply,合併數組,和解構配合進行賦值方面提供了很好的便利性。

擴充運算子就是三個點“...”,就是將實作了Iterator 介面的物件中的每個元素都一個個的迭代並取出來變成單獨的被使用。

看這個範例:

console.log(...[3, 4, 5])
登入後複製

#結果:

3 4 5
登入後複製

呼叫其實就是:

console.log(3, 4, 5)
登入後複製

合併陣列

可以使用擴充運算子將多個陣列進行合併。

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

結果:

#
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
登入後複製

函數多參數傳遞, 取代Apply

先把參數定義成數組,函數定義好。

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

在ES6前,要把陣列參數傳遞給函數,或是依照下標存取陣列元素去呼叫函數,缺點是陣列個數和函數參數個數完全綁定,有一個個數發生變化,那麼就要修改了。

fun1(arr4[0], arr4[1], arr4[2], arr4[3])
登入後複製

要嘛就用Apply進行調用,結果當然是沒毛病,也是ES6之前用的最多的。

fun1.apply(null, arr4)
登入後複製

如果是用擴充運算符,那就方便咯。

fun1(...arr4)
登入後複製

結果:

#
arg1 arg2 arg3 arg4
登入後複製

呼叫簡潔爽快。

與解構配合賦值

搭配使用,可以從陣列中提取除第一個以後的所有元素成另外一個陣列。

let [var1, ...arr5] = [1, 2, 3, 4, 5, 6]
console.log(var1)
console.log(arr5)
登入後複製

結果:

#
1[ 2, 3, 4, 5, 6 ]
登入後複製

但要注意,與解構配合時,擴展運算子只能用在最後一個上,否則報錯。

可以展開實作了Iterator 介面的物件

#例如Map,Set,陣列就是從Iterator介面實作來的,Object不是,所以擴充Object會報錯。

擴充Set。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log(...set1)
登入後複製

結果:

#
1 2 3
登入後複製

擴充Map。

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

結果:

#
[ 'k1', 1 ] [ 'k2', 2 ] [ 'k3', 3 ]
登入後複製

注意,擴展出來的一個個的數組,依照map的鍵值對結構,每個陣列都是2個元素,一個是key,一個是value。

如果擴充Object,就會報錯。

let obj1 = {
   p1: 1,
   p2: 2,
   p3: 3}
console.log(...obj1)
登入後複製

以上是ES6擴充運算符的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板