ES6,擴充套件運算子的用途

2021-09-07 14:19:29 字數 1755 閱讀 1290

擴充套件運算子就是三個點「...」,就是將實現了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 ]

先把引數定義成陣列,函式定義好。

let arr4 = ['arg1', 'arg2', 'arg3', 'arg4']

let fun1 = (a1, a2, a3, a4) =>

在es6前,要把陣列引數傳遞給函式,要麼按照下標訪問陣列元素去呼叫函式,缺點是陣列個數和函式引數個數完全繫結,有乙個個數發生變化,那麼就要修改了。

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

如果是用擴充套件運算子,那就方便咯。

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 =

console.log(...obj1)

報錯。end

ES6,擴充套件運算子的用途

擴充套件運算子就是三個點 就是將實現了iterator 介面的物件中的每個元素都乙個個的迭代並取出來變成單獨的被使用。看這個例子 console.log 3,4,5 結果 3 4 5 呼叫其實就是 console.log 3,4,5 合併陣列 可以使用擴充套件運算子將多個陣列進行合併。let arr...

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1,陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...

ES6擴充套件運算子

首先,我們要讀仔細下面這句話,就很容易知道擴充套件運算子的使用了,可以在心裡反覆讀三遍 接下來,我們看下究竟怎麼個情況 宣告乙個方法 var foo function a,b,c console.log a console.log b console.log c 宣告乙個陣列 var arr 1,2...