基于es6三點(diǎn)運(yùn)算符的使用方法(實(shí)例講解)
先看一個(gè)es6規(guī)范下三點(diǎn)運(yùn)算符的使用實(shí)例:
let fun=function(a,...list){
console.log(a,list);
};
fun('0','a','b','c');//0 [a,b,c]
以上可以看到我們現(xiàn)在在定義函數(shù)對(duì)象時(shí)可以動(dòng)態(tài)設(shè)置參數(shù)的個(gè)數(shù)了:第一個(gè)參數(shù)a是普通參數(shù)(忽略),
大家可以看到第二個(gè)參數(shù)list前面有三個(gè)點(diǎn) “...”,這種寫(xiě)法在es6規(guī)范中有兩個(gè)用途
1 . 作為參數(shù)使用。
2 . 作為拓展運(yùn)算符使用。
● 三點(diǎn)--作為參數(shù):
let fun1=function(...args){
for(let arg of args){
console.log(arg);
};
console.log(args)
};
fun1('a','b','c');//a b c,[a,b,c]
fun1(1,2);//1 2,[1,2] ...args表示了所有的形參,不管傳入多少參數(shù),都可以通過(guò)args進(jìn)行遍歷得到,args則集合所有的參數(shù)組成參數(shù)數(shù)組
let fun2=function(arr,...args){
console.log(arr);
console.log(args);
};
fun2(1,2,3);//1, [2,3]
fun2(1);//1, []當(dāng)...args有其他參數(shù)時(shí),rest參數(shù)args數(shù)組集合除去前面參數(shù)之后的參數(shù)。
let fun3=function(arr1,..args,arr2){
console.log(args);
}//此時(shí)報(bào)錯(cuò)!切記,三點(diǎn)作為rest參數(shù)的時(shí)候,其后不能再有任何參數(shù),只能作為最后一個(gè)角色出現(xiàn)!
[x,...y]=[1,2,3];
console.log(y);//[2,3]
[x,...y,z]=[1,2,3];//報(bào)錯(cuò),Rest element must be last element in array
//作為參數(shù),三點(diǎn)運(yùn)算符可以函數(shù),解構(gòu)賦值等方面發(fā)揮重要作用。‘人如其名',rest表示剩下的,
//它把剩下的任意數(shù)量的參數(shù)推入數(shù)組,所以也繼承了數(shù)組的方法。rest參數(shù)只能出現(xiàn)在最后一位,
//不然會(huì)報(bào)錯(cuò),當(dāng)然以擴(kuò)展運(yùn)算的身份出現(xiàn)時(shí)另當(dāng)別論。
● 三點(diǎn)--作為拓展運(yùn)算符使用:
let arr=[1,2,3];
console.log(...arr);//1, 2, 3返回?cái)?shù)組中的各項(xiàng)
let a=[2,3];
console.log(1,...a,4);//1,2,3,4擴(kuò)展運(yùn)算符可以放在中間
let divs=document.querySelectorAll('div');
[...divs];//Array[300],[]可以將divs轉(zhuǎn)為數(shù)組解構(gòu);
console.log(...divs);//div1,div2....遍歷divs各項(xiàng)
let set=new Set([1,2,3,3]);
[...set];//返回?cái)?shù)組[1,2,3],可以將set數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化為數(shù)組
let map=new Map([[1,'a'],[2,'b'],[3,'c']]);
[...map.keys];//返回[1,2,3],屬性數(shù)組;
[...map.values];//返回[a,b,c],value數(shù)組
[...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍歷字符串,返回各個(gè)字符;
let str='abc';
['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]擴(kuò)展運(yùn)算符位置比較任性
//三點(diǎn)的擴(kuò)展運(yùn)算符,把數(shù)組或者類(lèi)數(shù)組對(duì)象展開(kāi)成一系列逗號(hào)隔開(kāi)的值序列,它好比rest參數(shù)時(shí)候的逆運(yùn)算。
以上這篇基于es6三點(diǎn)運(yùn)算符的使用方法(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
移動(dòng)端左右滑動(dòng)切換頁(yè)面效果完整代碼(純JavaScript)
這篇文章主要介紹了如何通過(guò)原生JavaScript實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果,并結(jié)合tab切換卡功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS把內(nèi)容動(dòng)態(tài)插入到DIV的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
微信小程序云開(kāi)發(fā)(數(shù)據(jù)庫(kù))詳解
使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)數(shù)據(jù)庫(kù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05
js實(shí)現(xiàn)將json數(shù)組顯示前臺(tái)table中
本文主要介紹了把JSON數(shù)組顯示在前臺(tái)的table中的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析
本文給大家分享使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析及核心代碼,需要的朋友參考下2017-03-03

