編寫現(xiàn)代JavaScript代碼的小技巧有哪些

這篇文章主要介紹“編寫現(xiàn)代JavaScript代碼的小技巧有哪些”，在日常操作中，相信很多人在編寫現(xiàn)代JavaScript代碼的小技巧有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”編寫現(xiàn)代JavaScript代碼的小技巧有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

1.Array.includes 與條件判斷

一般我們判斷或用 ||

2.Set與去重

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。Set 本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

數(shù)組去重 Array.from 方法可以將 Set 結(jié)構(gòu)轉(zhuǎn)為數(shù)組。我們可以專門編寫使用一個去重的函數(shù)。

字符去重 另外 Set 是如此強(qiáng)大，因此使用 Set 可以很容易地實(shí)現(xiàn)并集(Union)、交集(Intersect)和差集(Difference)。

3.Map 與字典類型數(shù)據(jù)

一般而已，JavaScript 實(shí)現(xiàn)字典數(shù)據(jù)是基于 Object 對象。但是 JavaScript 的對象的鍵只能是字符串。對于編程來說有很多不便。 ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于 Object 對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值，字符串、數(shù)值、布爾值、數(shù)組、對象等等都可以當(dāng)作鍵。

4.函數(shù)式的方式處理數(shù)據(jù)

按照我的理解，函數(shù)式編程主張函數(shù)必須接受至少一個參數(shù)并返回一個值。所以所有的關(guān)于數(shù)據(jù)的操作，都可以用函數(shù)式的方式處理。

假設(shè)我們有這樣的需求，需要先把數(shù)組foo中的對象結(jié)構(gòu)更改，然后從中挑選出一些符合條件的對象，并且把這些對象放進(jìn)新數(shù)組result里。

5.compose 與函數(shù)組合

由于函數(shù)式編程大行其道，所以現(xiàn)在將會在 JavaScript 代碼看到大量的箭頭()=>()=>()=>的代碼。

在 compose 的定義中， g 將先于 f 執(zhí)行，因此就創(chuàng)建了一個從右到左的數(shù)據(jù) 流。這樣做的可讀性遠(yuǎn)遠(yuǎn)高于嵌套一大堆的函數(shù)調(diào)用.我們選擇一些函數(shù)，讓它們結(jié)合，生成一個嶄新的函數(shù)。reverse 反轉(zhuǎn)列表， head 取列表中的第一個元素;

但是我們這個這個compose不夠完善，只能處理兩個函數(shù)參數(shù)。redux源碼有個很完備的compose函數(shù)，我們借鑒一下。

有了這個函數(shù)，我們可以隨意組合無數(shù)個函數(shù)。現(xiàn)在我們增加需求，組合出一個lastAndUpper函數(shù)，內(nèi)容是先reverse 反轉(zhuǎn)列表， head 取列表中的第一個元素, 最后toUpperCase大寫。

到此，關(guān)于“編寫現(xiàn)代JavaScript代碼的小技巧有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！