(ES6)有用的提示與技巧

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扛施,快速升職加薪鸿捧,走上人生巔峰。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疙渣,一起剝皮案震驚了整個(gè)濱河市匙奴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌妄荔,老刑警劉巖泼菌,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異啦租,居然都是意外死亡哗伯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門篷角,熙熙樓的掌柜王于貴愁眉苦臉地迎上來焊刹,“玉大人,你說我怎么就攤上這事恳蹲∨翱椋” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵嘉蕾,是天一觀的道長贺奠。 經(jīng)常有香客問我,道長错忱,這世上最難降的妖魔是什么儡率? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任颁糟,我火速辦了婚禮,結(jié)果婚禮上喉悴,老公的妹妹穿的比我還像新娘棱貌。我一直安慰自己,他們只是感情好箕肃,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布婚脱。 她就那樣靜靜地躺著,像睡著了一般勺像。 火紅的嫁衣襯著肌膚如雪障贸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天吟宦,我揣著相機(jī)與錄音篮洁,去河邊找鬼。 笑死殃姓,一個(gè)胖子當(dāng)著我的面吹牛袁波,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蜗侈,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼篷牌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了踏幻?” 一聲冷哼從身側(cè)響起枷颊,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎该面,沒想到半個(gè)月后夭苗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡隔缀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年题造,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚕泽。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡晌梨,死狀恐怖桥嗤,靈堂內(nèi)的尸體忽然破棺而出须妻,到底是詐尸還是另有隱情,我是刑警寧澤泛领,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布荒吏,位于F島的核電站,受9級特大地震影響渊鞋,放射性物質(zhì)發(fā)生泄漏绰更。R本人自食惡果不足惜瞧挤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望儡湾。 院中可真熱鬧特恬,春花似錦、人聲如沸徐钠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尝丐。三九已至显拜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間爹袁,已是汗流浹背远荠。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留失息,地道東北人譬淳。 一個(gè)月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像盹兢,于是被迫代替她去往敵國和親瘦赫。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持蛤迎,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券确虱,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,028評論 3 37
  • 一替裆、ES6簡介 ? 歷時(shí)將近6年的時(shí)間來制定的新 ECMAScript 標(biāo)準(zhǔn) ECMAScript 6(亦稱 ...
    一歲一枯榮_閱讀 6,062評論 8 25
  • SynchronousQueue 是一個(gè)同步阻塞隊(duì)列校辩,它的每個(gè)插入操作都要等待其他線程相應(yīng)的移除操作,反之亦然辆童。S...
    泰迪的bagwell閱讀 6,575評論 0 12
  • 就當(dāng)是老朋友一場 有過一段非常美好的回憶 we were happy together 只是我不能再拉著你每天陪我...
    Ghatanothoa閱讀 195評論 0 0
  • 沒錯(cuò)宜咒,買錯(cuò)了票,看了一場自己以往絕對沒有買過的電影票把鉴。但影片是一部十足的爆米花電影故黑,看得還是十分過癮。 一喜劇 朋...
    潔可閱讀 396評論 1 0