來安利一下,編寫現代JavaScript程式碼的5個小技巧!

陝西優就業發表於2019-04-02

今天,給大家帶來一些乾貨技巧,編寫現代JavaScript程式碼的5個小技巧!希望大家無論是工作還是學習,都可以重視學習技巧,提高效率!快來看看吧!

1.Array.includes 與條件判斷

一般我們判斷或用 ||

2.Set與去重

ES6 提供了新的資料結構 Set。它類似於陣列,但是成員的值都是唯一的,沒有重複的值。Set 本身是一個建構函式,用來生成 Set 資料結構。

陣列去重 Array.from 方法可以將 Set 結構轉為陣列。我們可以專門編寫使用一個去重的函式。

字元去重 另外 Set 是如此強大,因此使用 Set 可以很容易地實現並集(Union)、交集(Intersect)和差集(Difference)。

3.Map 與字典型別資料

一般而已,JavaScript 實現字典資料是基於 Object 物件。但是 JavaScript 的物件的鍵只能是字串。對於程式設計來說有很多不便。 ES6 提供了 Map 資料結構。它類似於 Object 物件,也是鍵值對的集合,但是“鍵”的範圍不限於字串,各種型別的值,字串、數值、布林值、陣列、物件等等都可以當作鍵。

4.函式式的方式處理資料

按照我的理解,函數語言程式設計主張函式必須接受至少一個引數並返回一個值。所以所有的關於資料的操作,都可以用函式式的方式處理。

假設我們有這樣的需求,需要先把陣列foo中的物件結構更改,然後從中挑選出一些符合條件的物件,並且把這些物件放進新陣列result裡。

5.compose 與函式組合

由於函數語言程式設計大行其道,所以現在將會在 JavaScript 程式碼看到大量的箭頭()=>()=>()=>的程式碼。

在 compose 的定義中, g 將先於 f 執行,因此就建立了一個從右到左的資料 流。這樣做的可讀性遠遠高於巢狀一大堆的函式呼叫.我們選擇一些函式,讓它們結合,生成一個嶄新的函式。reverse 反轉列表, head 取列表中的第一個元素;

但是我們這個這個compose不夠完善,只能處理兩個函式引數。redux原始碼有個很完備的compose函式,我們借鑑一下。

有了這個函式,我們可以隨意組合無數個函式。現在我們增加需求,組合出一個lastAndUpper函式,內容是先reverse 反轉列表, head 取列表中的第一個元素, 最後toUpperCase大寫。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69902581/viewspace-2640068/,如需轉載,請註明出處,否則將追究法律責任。

相關文章