在工作中我們經常可以通過一些小細節來增加代碼可讀性 ， 讓代碼看起來更加優雅 。 本篇文章就來給大家分享幾個一看就會的實用JavaScript優化小技巧 ， 希望對大家有所幫助！
文章插圖
「難度：?」 「推薦閱讀時長:5
min」 正片減少if...else面條代碼
- 一旦當我們寫到超過兩個
if...else的函數的時候就該想想是否有更好的優化方法 。 【相關推薦：javascript學習教程】比如現在需要讓我們根據名稱計算出麥某勞的食品價格 ， 你可能會這么做 。 
文章插圖
- 這樣的寫法會讓函數體有很多的條件判斷語句 ， 而當我們想下次增加一個商品的時候就需要修改函數內的邏輯增加一個
if...else語句 ， 這一定程度上也違反了開閉原則,當我們需要增加一個邏輯的時候要盡量通過擴展軟件實體來解決需求變化 ， 而不是通過修改已有的代碼來完成變化 。 這是很經典的優化方式 ， 我們可以使用一個類似Map機構的數據來保存所有商品 ， 這里我們直接建立一個對象來存儲 。 
文章插圖
- 這樣我們下次需要再增加一個商品時就不需要改動
getPrice的邏輯了 ， 當然了這里其實更多人喜歡直接在用的地方直接使用foodMap ， 我這里只是簡單舉了個例子表述這個思路 。 那么這時候就有同學會問了 ， 如果我不想key只用字符串呢 ， 這時候你就可以用到new Map了 ， 思路也是差不多的 ， 額外擴展一個實體來存儲變化 。 - 有這么一個麥某勞食物列表
文章插圖
- 如果你想找出屬于套餐1的食物 ， 你會怎么找呢？上面這種是我們以前經常使用的方法 ， 顯然我們替換成使用
filter與map來取代for循環不僅可以使代碼更精簡 ， 還可以使語義更加明確 ， 這樣我們一下就可以看出是先對數組過濾再重組 。 
文章插圖
find取代冗余循環
- 還是上面的例子 ， 如果我們要在這個食品對象數組中按照屬性值查找特定的食物時 ，
find的用處就出來了 。 
文章插圖
includes取代冗余循環
- 和上面兩個細節類似的這些都是既有的函數也就是不用我們重新寫的內置函數 ， 巧用它會節省很多時間 。 眾所周知 ， 一碗康某傅老壇酸菜牛肉面有酸菜 ， 面 ， 牛肉粒 ， 煙頭和腳皮組成 ， 那我們想用函數證實這個面里面是否有腳皮我們怎么寫會比較簡潔呢？
文章插圖
- 同樣的 ， 不止是康某傅的酸菜牛肉面可以這樣耍 ， 所有類似的在數組里面找到特定元素的操作都可以使用
includes函數來調用 。 - 我們通常在寫一些擁有返回值的函數的時候常常會以返回值變量命名而糾結 ， 甚至對于一些長函數的時候還不使用變量而是直接
return ， 這樣的習慣其實是不好的 ， 因為等我們下次再去參照這段代碼的時候還需要重新捋清邏輯 。 通常的 ， 在一個小函數中 ， 我們可以使用result作為返回值 。 
文章插圖
提前返回
- 然而上面用
result作為返回值并不適用于所有情況 ， 往往有些時候我們需要提前結束函數體來避免后面的同事閱讀多余的程序 。 如下的例子中當我們
selectedKey不存在的時候應該立即return ， 這樣就不用繼續閱讀下面的代碼 ， 否則面對更復雜的函數時會增加很多的閱讀成本 。 
文章插圖
保持對象完整
- 經常在我們通過請求拿到后端返回的數據會根據其中一些屬性進行處理 ， 如果需要處理的屬性少的時候很多同學會習慣使用第一種方法 。 但其實這種習慣是不好的 ， 因為當你無法確定這個函數以后還需不需要增加依賴屬性的時候應該保持對象的完整 ， 就像我上篇文章提到的 ， 學會擁抱變化 ， 假如
- 纖云護眼 超級簡潔的護眼神器
- 一文了解CSS3中的新特性@layer
- Win11怎么設置關機鍵？Win11快捷鍵關機的設置方法
- 50張圖片如何摳圖最快速？一鍵批量摳圖的方法
- Win11提示打印機錯誤0x00000040指定的網絡名不再可用怎么辦？
- 人物照片如何快速摳圖？人物照片快速摳圖的方法
- 人物照片如何快速摳圖更換背景？人物照片摳圖更換背景的方法
- 網頁在線刷pv和ip的源碼
- 舊年代老照片怎么修復？一鍵完成老照片人臉修復的方法
- 黑白老照片如何修復？黑白老照片修復最簡單的方法
