ES6新增擴(kuò)展(展開)運(yùn)算符(轉(zhuǎn))

ES6標(biāo)準(zhǔn)的制定為JavaScript加入了許多新特性。本文主要記錄擴(kuò)展(展開)運(yùn)算符。

展開運(yùn)算符(spread operator)允許一個表達(dá)式在某處展開。展開運(yùn)算符在多個參數(shù)(用于函數(shù)調(diào)用)或多個元素(用于數(shù)組字面量)或者多個變量(用于解構(gòu)賦值)的地方可以使用。
展開運(yùn)算符不能用在對象當(dāng)中,因?yàn)槟壳罢归_運(yùn)算符只能在可遍歷對象(iterables)可用。iterables的實(shí)現(xiàn)是依靠[Symbol.iterator]函數(shù),而目前只有Array,Set,String內(nèi)置[Symbol.iterator]方法,而Object尚未內(nèi)置該方法,因此無法使用展開運(yùn)算符。不過ES7草案當(dāng)中已經(jīng)加入了對象展開運(yùn)算符特性。

函數(shù)調(diào)用中使用展開運(yùn)算符

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

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

如上,我們把a(bǔ)rgs數(shù)組當(dāng)作實(shí)參傳遞給了a,b,c,這邊正是利用了Function.prototype.apply的特性。

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

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

我們使用...展開運(yùn)算符就可以把a(bǔ)rgs直接傳遞給test()函數(shù)。

數(shù)組字面量中使用展開運(yùn)算符

在ES6的世界中,我們可以直接加一個數(shù)組直接合并到另外一個數(shù)組當(dāng)中:

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

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

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

用于解構(gòu)賦值

解構(gòu)賦值也是ES6中的一個特性,而這個展開運(yùn)算符可以用于部分情景:

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

展開運(yùn)算符在解構(gòu)賦值中的作用跟之前的作用看上去是相反的。

不過要注意,解構(gòu)賦值中展開運(yùn)算符只能用在最后:

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

類數(shù)組對象變成數(shù)組

展開運(yùn)算符可以將一個類數(shù)組對象變成一個真正的數(shù)組對象:

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

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

ES7草案中的對象展開運(yùn)算符

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

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

如上,我們可以將一個對象當(dāng)中的對象的一部分取出來成為一個新對象賦值給展開運(yùn)算符的參數(shù)。

同時,我們也可以像數(shù)組插入那樣將一個對象插入另外一個對象當(dāng)中:

 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}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前,不能直接為函數(shù)的參數(shù)指定默認(rèn)值,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,708評論 0 1
  • 三,字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn),只要將碼點(diǎn)放入大括號,就能正確解讀該字符。有了這...
    eastbaby閱讀 1,671評論 0 8
  • 1.函數(shù)參數(shù)的默認(rèn)值 (1).基本用法 在ES6之前,不能直接為函數(shù)的參數(shù)指定默認(rèn)值,只能采用變通的方法。
    趙然228閱讀 830評論 0 0
  • JavaScript是ECMAScript的實(shí)現(xiàn)和擴(kuò)展,ES6標(biāo)準(zhǔn)的制定也為JavaScript加入了許多新特性。...
    hope7th閱讀 5,483評論 0 0
  • 01 ▲我們常說世風(fēng)日下、人心險惡,像我這種沒什么腦子的人在社會上被坑被騙完全是家常便飯。 舉個我起碼被同樣套路騙...
    兜帥宮閱讀 856評論 0 0

友情鏈接更多精彩內(nèi)容