基于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) “...”,這種寫法在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ù)組或者類數(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)文章
js彈性勢(shì)能動(dòng)畫之拋物線運(yùn)動(dòng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了js彈性勢(shì)能動(dòng)畫之拋物線運(yùn)動(dòng)的制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07js實(shí)現(xiàn)最短的XML格式化工具實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)最短的XML格式化工具,實(shí)例分析了基于jquery-latest.js實(shí)現(xiàn)XML代碼格式化的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03帶你用原生js寫一個(gè)簡(jiǎn)單的注冊(cè)登錄頁(yè)面
這篇文章主要給大家介紹了關(guān)于如何使用原生js寫一個(gè)簡(jiǎn)單的注冊(cè)登錄頁(yè)面的相關(guān)資料,文中介紹了一個(gè)以js驗(yàn)證表單的簡(jiǎn)潔的注冊(cè)登錄頁(yè)面,需要的朋友可以參考下2023-06-06基于js實(shí)現(xiàn)微信發(fā)送好友如何分享到朋友圈、微博
微信瀏覽器內(nèi)置了javascript私有對(duì)象WeixinJSBridge,可以實(shí)現(xiàn)發(fā)送給朋友、分享到朋友圈、分享到微博等功能,本篇文章給大家介紹基于js實(shí)現(xiàn)微信發(fā)送給朋友如何分享到朋友圈、微博,感興趣的朋友一起學(xué)習(xí)吧2015-11-11JavaScript實(shí)現(xiàn)微信紅包算法及問(wèn)題解決方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)微信紅包算法及遇到的問(wèn)題解決方法,需要的朋友可以參考下2018-04-04js實(shí)現(xiàn)手表表盤時(shí)鐘與圓周運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手表表盤時(shí)鐘與圓周運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09