您的位置:首頁>正文

看前端大佬如何使用三點運算子的方法!

先看一個es6規範下三點運算子的使用實例:

let fun=function(a,...list){ console.log(a,list);};fun('0','a','b','c');//0 [a,b,c]

以上可以看到我們現在在定義函數物件時可以動態設置參數的個數了:第一個參數a是普通參數(忽略),

大家可以看到第二個參數list前面有三個點 “...”, 這種寫法在es6規範中有兩個用途

1 . 作為參數使用。

2 . 作為拓展運算子使用。

● 三點--作為參數:

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表示了所有的形參, 不管傳入多少參數, 都可以通過args進行遍歷得到,args則集合所有的參數組成參數陣列let fun2=function(arr,...args){ console.log(arr); console.log(args);};fun2(1,2,3);//1, [2,3]fun2(1);//1, []當...args有其他參數時, rest參數args陣列集合除去前面參數之後的參數。 let fun3=function(arr1,..args,arr2){ console.log(args);}//此時報錯!切記, 三點作為rest參數的時候, 其後不能再有任何參數,

只能作為最後一個角色出現![x,...y]=[1,2,3];console.log(y);//[2,3][x,...y,z]=[1,2,3];//報錯, Rest element must be last element in array//作為參數, 三點運算子可以函數, 解構賦值等方面發揮重要作用。 ‘人如其名’, rest表示剩下的, //它把剩下的任意數量的參數推入陣列, 所以也繼承了陣列的方法。 rest參數只能出現在最後一位, //不然會報錯, 當然以擴展運算的身份出現時另當別論。

● 三點--作為拓展運算子使用:

let arr=[1,2,3];console.log(...arr);//1, 2, 3返回陣列中的各項let a=[2,3];console.log(1,...a,4);//1,2,3,4擴展運算子可以放在中間let divs=document.querySelectorAll('div');[...divs];//Array[300], []可以將divs轉為陣列解構;console.log(...divs);//div1,div2....遍歷divs各項let set=new Set([1,2,3,3]);[...set];//返回陣列[1,2,3], 可以將set資料結構轉化為陣列let map=new Map([[1,'a'],[2,'b'],[3,'c']]);[...map.keys];//返回[1,2,3],屬性陣列;[...map.values];//返回[a,b,c],value陣列[...'wbiokr'];//["w", "b", "i", "o", "k", "r"]遍歷字串, 返回各個字元;let str='abc';['aaa',...str,'ccc'];//[aaa, a, b, c, ccc]擴展運算子位置比較任性//三點的擴展運算子, 把陣列或者類陣列物件展開成一系列逗號隔開的值序列, 它好比rest參數時候的逆運算。

對於web前端的學習有不懂的,

或者不知道學習路線, 不知道學習方法, 不知道該如何扎實能找到工作的朋友, 我還是要推薦下我自己建的前端學習群:523218370, 首先你要是前端黨, 其次不管你是小白還是大牛, 我都挺歡迎, 小白嘛, 主動點多問問題也就學好了, 群裡每天分享乾貨, 包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料, 送給大家, 歡迎初學和進階中的小夥伴。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示