js新特性展開符的使用方式


同步發布於:http://mjzhang.cn/(轉載請說明此出處)。

JavaScript是ECMAScript的實現和擴展,ES6標准的制定也為JavaScript加入了許多新特性。本文主要記錄展開運算符。

展開運算符(spread operator)允許一個表達式在某處展開。展開運算符在多個參數(用於函數調用)或多個元素(用於數組字面量)或者多個變量(用於解構賦值)的地方可以使用。

展開運算符不能用在對象當中,因為目前展開運算符只能在可遍歷對象(iterables)可用。iterables的實現是依靠[Symbol.iterator]函數,而目前只有Array,Set,String內置[Symbol.iterator]方法,而Object尚未內置該方法,因此無法使用展開運算符。不過ES7草案當中已經加入了對象展開運算符特性。

函數調用中使用展開運算符

在以前我們會使用apply方法來將一個數組展開成多個參數:

function test(a, b, c) { } var args = [0, 1, 2]; test.apply(null, args); 

如上,我們把args數組當作實參傳遞給了a,b,c,這邊正是利用了Function.prototype.apply的特性。

不過有了ES6,我們就可以更加簡潔地來傳遞數組參數:

function test(a,b,c) { } var args = [0,1,2]; test(...args); 

我們使用...展開運算符就可以把args直接傳遞給test()函數。

數組字面量中使用展開運算符

''
在ES6的世界中,我們可以直接加一個數組直接合並到另外一個數組當中:

var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e'] 

展開運算符也可以用在push函數中,可以不用再用apply()函數來合並兩個數組:

var arr1=['a','b','c']; var arr2=['d','e']; arr1.push(...arr2); //['a','b','c','d','e'] 

用於解構賦值

解構賦值也是ES6中的一個特性,而這個展開運算符可以用於部分情景:

let [arg1,arg2,...arg3] = [1, 2, 3, 4]; arg1 //1 arg2 //2 arg3 //['3','4'] 

展開運算符在解構賦值中的作用跟之前的作用看上去是相反的,將多個數組項組合成了一個新數組。

不過要注意,解構賦值中展開運算符只能用在最后:

let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //報錯 

類數組對象變成數組

展開運算符可以將一個類數組對象變成一個真正的數組對象:

var list=document.getElementsByTagName('div'); var arr=[..list]; 

list是類數組對象,而我們通過使用展開運算符使之變成了數組。

ES7草案中的對象展開運算符

ES7中的對象展開運算符符可以讓我們更快捷地操作對象:

let {x,y,...z}={x:1,y:2,a:3,b:4}; x; //1 y; //2 z; //{a:3,b:4} 

如上,我們可以將一個對象當中的對象的一部分取出來成為一個新對象賦值給展開運算符的參數。

同時,我們也可以像數組插入那樣將一個對象插入另外一個對象當中:

let z={a:3,b:4}; let n={x:1,y:2,...z}; n; //{x:1,y:2,a:3,b:4} 

另外還要很多用處,比如可以合並兩個對象:

let a={x:1,y:2}; let b={z:3}; let ab={...a,...b}; ab //{x:1,y:2,z:3}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM