ES6特性之 Spread操作符

2021-09-20 04:58:27 字數 1137 閱讀 7513

spread操作符(...),也稱作展開操作符,作用是將可迭代的(iterable)物件進行展開。

比如有2個陣列,我們要將其中乙個陣列中所有元素插入到另乙個陣列中,通過spread操作符,就可以這樣進行:

var shoppinglist = ["t-shirt", ...fruits, "egg"];

我們看到,通過在shoppinglist中使用spread操作符對fruits陣列進行展開,就可以輕鬆的將fruits陣列元素變成shoppinglist中的陣列元素,非常簡單。如果不用spread操作符,我們也可以通過迴圈陣列並建新陣列的方式來實現,但是明顯會複雜的多。

另乙個常見的場景是在函式呼叫傳參的時候:

function testfunc(x, y, z) 

var args = [10, 15, 20];

testfunc(args); //不正確

testfunc(...args); //正確

我們的testfunc()是乙個接受3個引數的函式,而變數args是乙個包含了3個元素的陣列。如果直接把args作為引數傳入testfunc(),肯定是不符合這個函式的設計邏輯的。在這種情況下,使用spread操作符,就可以把陣列中的元素展開並填充這個函式的引數列表,達到理想中的效果。

最後,我們在一開始提到,spread操作符可以展開iterable的物件,這樣的話,除了陣列之外,所有實現了symbol.iterator的物件,如:set, map和generator等等,都可以使用spread操作符。

var map = new map();

map.set("a", 1);

map.set("b", 2);

var arr1 = [...map]; //[["a", 1], ["b", 2]]

var set = new set();

set.add(1);

set.add(2);

set.add(1);

set.add(3);

var arr2 = [...set]; //[1, 2, 3]

function *mygen()

var arr2 = [...mygen()]; //["hello", "world"]

es6新特性展開操作符「 」

展開操作符 允許乙個表示式在某處展開,在存在多個引數 用於函式呼叫 多個元素 用於陣列字面量 或者多個變數 用於解構賦值 的地方就會出現這種情況。如果在之前的js中想讓乙個函式把乙個陣列一次作為引數進行呼叫時 function test x,y,z var args 1,2,3 使用 時 var a...

ES6 擴充套件運算子(Spread)

含義 擴充套件運算子用 表示,它會將乙個陣列轉化為用逗號分隔的引數序列。嗯?這個含義?話不多說,上例子!要學就認真理解內容,請認真看並理解例子3分鐘 舉些栗子 console.log 1,2,3 輸出結果為 1 2 3 console.log 1,2,3,4 5 輸出結果為 1 2 3 4 5 do...

ES6的擴充套件操作符

es6中的擴充套件操作符實際上與rest引數非常相似。前者是.後者則是.變數名。那它們主要的區別我個人認為主要是兩個 rest引數使用在函式的引數定義時,擴充套件操作符使用在函式呼叫時。function foo items console.log 1,2,3,4,5 這裡的.就是擴充套件操作符擴充套...