幾個一看就會的實用JavaScript優(yōu)雅小技巧

?? 前言
大家好我是小盧，在工作中我們經(jīng)常可以通過一些小細(xì)節(jié)來增加代碼可讀性，讓代碼看起來更加優(yōu)雅。
這次我就給大家分享一些一看就會的實用JavaScript優(yōu)雅小技巧。
「難度：??」 「推薦閱讀時長:5min」
正片
減少if...else面條代碼
一旦當(dāng)我們寫到超過兩個if...else的函數(shù)的時候就該想想是否有更好的優(yōu)化方法。
比如現(xiàn)在需要讓我們根據(jù)名稱計算出麥某勞的食品價格，你可能會這么做。



這樣的寫法會讓函數(shù)體有很多的條件判斷語句，而當(dāng)我們想下次增加一個商品的時候就需要修改函數(shù)內(nèi)的邏輯增加一個if...else語句，這一定程度上也違反了「開閉原則」,當(dāng)我們需要增加一個邏輯的時候要盡量通過擴(kuò)展軟件實體來解決需求變化，而不是通過修改已有的代碼來完成變化。
這是很經(jīng)典的優(yōu)化方式，我們可以使用一個類似Map結(jié)構(gòu)的數(shù)據(jù)來保存所有商品，這里我們直接建立一個對象來存儲。



這樣我們下次需要再增加一個商品時就不需要改動getPrice的邏輯了，當(dāng)然了這里其實更多人喜歡直接在用的地方直接使用foodMap，我這里只是簡單舉了個例子表述這個思路。
那么這時候就有同學(xué)會問了，如果我不想key只用字符串呢，這時候你就可以用到new Map了，思路也是差不多的，額外擴(kuò)展一個實體來存儲變化。
管道操作取代冗余循環(huán)
有這么一個麥某勞食物列表



如果你想找出屬于套餐1的食物，你會怎么找呢？
上面這種是我們以前經(jīng)常使用的方法，顯然我們替換成使用filter與map來取代for循環(huán)不僅可以使代碼更精簡，還可以使語義更加明確，這樣我們一下就可以看出是先對數(shù)組過濾再重組。



find取代冗余循環(huán)
還是上面的例子，如果我們要在這個食品對象數(shù)組中按照屬性值查找特定的食物時，find的用處就出來了。








includes取代冗余循環(huán)
和上面兩個細(xì)節(jié)類似的這些都是既有的函數(shù)也就是不用我們重新寫的內(nèi)置函數(shù)，巧用它會節(jié)省很多時間。
眾所周知，一碗「康某傅老壇酸菜牛肉面」有「酸菜」，「面」，「牛肉?！?，「煙頭」和「腳皮」組成，那我們想用函數(shù)證實這個面里面是否有腳皮我們怎么寫會比較簡潔呢？



同樣的，不止是「康某傅的酸菜牛肉面」可以這樣耍，所有類似的在數(shù)組里面找到特定元素的操作都可以使用includes函數(shù)來調(diào)用。
result返回值
我們通常在寫一些擁有返回值的函數(shù)的時候常常會以返回值變量命名而糾結(jié)，甚至對于一些長函數(shù)的時候還不使用變量而是直接return，這樣的習(xí)慣其實是不好的，因為等我們下次再去參照這段代碼的時候還需要重新捋清邏輯。
通常的，在一個小函數(shù)中，我們可以使用result作為返回值。



提前返回
然而上面用result作為返回值并不適用于所有情況，往往有些時候我們需要提前結(jié)束函數(shù)體來避免后面的同事閱讀多余的程序。

如下的例子中當(dāng)我們selectedKey不存在的時候應(yīng)該立即return，這樣就不用繼續(xù)閱讀下面的代碼，否則面對更復(fù)雜的函數(shù)時會增加很多的閱讀成本。



保持對象完整
經(jīng)常在我們通過請求拿到后端返回的數(shù)據(jù)會根據(jù)其中一些屬性進(jìn)行處理，如果需要處理的屬性少的時候很多同學(xué)會習(xí)慣使用第一種方法。
但其實這種習(xí)慣是不好的，因為當(dāng)你無法確定這個函數(shù)以后還需不需要增加依賴屬性的時候應(yīng)該保持對象的完整，就像我上篇文章提到的，「學(xué)會擁抱變化」，假如getDocDetail不止要用到icon和content,可能以后還會有title，date等屬性，所以我們不如直接的解構(gòu)完整對象，不僅增加縮短參數(shù)列表還會讓代碼更易讀。



巧用運算符
當(dāng)我們需要創(chuàng)建新變量時, 有時需要檢查為其值引用的變量是否為null或未定義時, 就可以使用簡便寫法。



???? 寫在最后
首先還是很感謝大家看到這里??，這次的文章就分享到這里，總結(jié)了幾個很基礎(chǔ)的優(yōu)化方法，希望可以幫到大家。

作者：快跑啊小盧


歡迎關(guān)注微信公眾號 ：前端快快跑