EcmaScript 2015(ES6)已經(jīng)出來好幾年了,可以巧妙地使用各種新功能眨唬。列出并討論其中一些会前,你會發(fā)現(xiàn)它們很有用。如果你知道其他好方法单绑,請?jiān)谠u論中回復(fù)回官。
1.必傳參數(shù)
ES6提供了默認(rèn)參數(shù)值,沒有該參數(shù)的情況下調(diào)用函數(shù)時(shí)使用的默認(rèn)值搂橙。
在以下示例中歉提,將required()函數(shù)設(shè)置為 a 和 b 參數(shù)的默認(rèn)值笛坦。 這意味著如果未傳遞a或b,則調(diào)用required()函數(shù)苔巨,將收到錯(cuò)誤版扩。
2.強(qiáng)大的“reduce”
Array的reduce方法非常通用。它通常用于將項(xiàng)目數(shù)組轉(zhuǎn)換為單個(gè)值侄泽,但是你可以用它做更多的事情礁芦。
大多數(shù)這些技巧都依賴于初始值是數(shù)組或?qū)ο蠖皇窍褡址蜃兞窟@樣的簡單值。
2.1 使用reduce同時(shí)進(jìn)行 map 和 filter 操作
假設(shè)有一個(gè)項(xiàng)目列表的情況悼尾,并且想要更新每個(gè)項(xiàng)目(即 Array.map 操作)柿扣,然后只過濾幾個(gè)項(xiàng)目(即 Array.filter ),這意味著需要兩次循環(huán)遍歷列表!
在下面的示例中闺魏,我們希望將數(shù)組中的項(xiàng)的值加倍未状,然后選擇大于50的項(xiàng)。我們使用強(qiáng)大的 reduce 方法高效的同時(shí)做到:
2.2 使用 “reduce” 代替是 “map” 或 “filter”
如果仔細(xì)查看上面的示例(2.1)析桥,就會知道 reduce 可以代替 map 或 filter 司草!
2.3 使用 reduce 來判斷括號是否對稱
2.4 計(jì)算重復(fù)的數(shù)組項(xiàng)(轉(zhuǎn)換數(shù)組→對象)
有時(shí)你希望復(fù)制數(shù)組項(xiàng)或?qū)?shù)組轉(zhuǎn)換為對象。 你可以使用 reduce泡仗。
在下面的例子中埋虹,計(jì)算cars 中每個(gè)值重復(fù)數(shù)量,并將這組對應(yīng)的數(shù)據(jù)放到一個(gè)對象中:
reduce 還可以做更多的事情娩怎,建閱讀?MDN上列出的示例搔课。
3. 對象解構(gòu)
3.1 屬性挑揀
有時(shí)候你想挑揀需要的屬性排除一些平需要的屬性(可能是因?yàn)樗鼈儼舾行畔⒒蛘咛罅耍N覀儾恍枰闅v整個(gè)對象來挑揀它們峦树,只需將這些不需要的數(shù)據(jù)提取到對應(yīng)變量中辣辫,并將有用的保存在rest參數(shù)中旦事。
在下面的示例中魁巩,我們不需要的屬性如_internal和tooBig屬性,我們可以將它們分配給_internal和tooBig變量(名字要一樣)姐浮,并將剩余的保存到在restparametercleanObject 參數(shù)中:
3.2 在函數(shù)參數(shù)中分解嵌套對象
在下面的示例中谷遂,engine 屬性是 car 對象的一個(gè)內(nèi)嵌對象。如果我們想獲取 engine 中的 vin 值卖鲤,可以使用以下解構(gòu)方式:
3.3 合并對象
ES6附帶了一個(gè)擴(kuò)展操作符(由三個(gè)點(diǎn)表示)肾扰。它通常用于解構(gòu)數(shù)組值,但也可以在對象上使用它蛋逾。
在下面的示例中集晚,我們使用擴(kuò)展操作符(...)在新對象中進(jìn)行擴(kuò)展。第二個(gè)對象中的屬性鍵將覆蓋第一個(gè)對象中的屬性鍵:
4.Sets
4.1 使用 set 時(shí)行數(shù)組去重
在ES6中区匣,可以使用 set 輕松時(shí)行數(shù)組去重偷拔,因?yàn)?set 只允許存儲惟一的值:
4.2 使用數(shù)組的方法
使用擴(kuò)展運(yùn)算符(...) 將 set 轉(zhuǎn)換為數(shù)組很簡單且在集合上使用所有數(shù)組方法!
5. 數(shù)組解構(gòu)
5.1 交換值
5.2 從一個(gè)函數(shù)接收和分配多個(gè)值
在下面的例子中,我們在/post獲取一個(gè)post莲绰,并在/comments 獲取相關(guān) comments 欺旧。由于使用?async/wait,該函數(shù)以數(shù)組的形式返回結(jié)果蛤签。使用數(shù)組析構(gòu)辞友,我們可以直接將結(jié)果賦值到相應(yīng)的變量中。
最后:“相信有很多想學(xué)前端的小伙伴震肮,今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨称龙,從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5等都有整理,送給每一位前端小伙伴戳晌,53763茵瀑,1707這里是小白聚集地,歡迎初學(xué)和進(jìn)階中的小伙伴躬厌÷碜颍”
祝大家早日學(xué)有所成,拿到滿意offer扛施,快速升職加薪鸿捧,走上人生巔峰。