值得了解的幾個實用JavaScript優化小技巧

在工作中我們經常可以透過一些小細節來增加程式碼可讀性，讓程式碼看起來更優雅。這篇文章就來跟大家分享幾個一看就會的實用JavaScript優化小技巧，希望對大家有幫助！

「難度：?」 「推薦閱讀時間：5min」

正片

減少if...else麵條程式碼

• 一旦當我們寫到超過兩個if ...else的函數的時候就該想想是否有更好的最佳化方法。 【相關推薦：javascript學習教學】
• 例如現在需要讓我們根據名稱計算麥某勞的食品價格，你可能會這麼做。

• 這樣的寫法會讓函數體有很多的條件判斷語句，而當我們想下次增加一個商品的時候就需要修改函數內的邏輯增加一個if...else語句，這一定程度上也違反了開閉原則,當我們需要增加一個邏輯的時候要盡量透過擴展軟體實體來解決需求變化，而不是透過修改現有的程式碼來完成變更。
• 這是很經典的最佳化方式，我們可以使用一個類似Map機構的資料來保存所有商品，這裡我們直接建立一個物件來儲存。

• 這樣我們下次需要再增加一個商品時就不需要改動getPrice的邏輯了，當然了這裡其實更多人喜歡直接在用的地方直接使用foodMap，我這裡只是簡單舉了個例子表達這個想法。
• 那麼這時候就有同學會問了，如果我不想key只用字串呢，這時候你就可以用到new Map了，思路也是差不多的，額外擴充一個實體來儲存變化。

管道操作取代冗餘循環

• 有這麼一個麥某勞食物清單

• 如果你想找出屬於套餐1的食物，你會怎麼找呢？
• 上面這種是我們以前經常使用的方法，顯然我們替換成使用filter與map來取代for循環不僅可以使程式碼更精簡，還可以讓語意更加明確，這樣我們一下就可以看出是先對數組過濾再重組。

find取代冗餘循環

• 還是上面的例子，如果我們要在這個食品對象數組中依照屬性值找出特定的食物時，find的用處就出來了。

includes取代冗餘循環

• 和這些上面兩個細節類似的都是既有的函數也就是不用我們重新寫的內建函數，巧用它會節省很多時間。
• 眾所周知，一碗康某傅老壇酸菜牛肉麵有酸菜，面，牛肉粒， 煙頭和腳皮組成，那我們想用函數來確認這個面裡面有沒有腳皮我們怎麼寫會比較簡潔呢？

• 同樣的，不只康某傅的酸菜牛肉麵可以這樣耍，所有類似的在陣列裡面找到特定元素的運算都可以使用includes函數來呼叫。

result傳回值

• 我們通常在寫一些擁有傳回值的函數的時候常常會以傳回值變數命名而糾結，甚至對於一些長函數的時候還不使用變數而是直接return，這樣的習慣其實是不好的，因為等我們下次再去參照這段程式碼的時候還需要重新捋清邏輯。
• 通常的，在一個小函數中，我們可以使用result作為回傳值。

#

提前回傳

• 然而上面用result作為回傳值並不適用於所有情況，往往有些時候我們需要提前結束函數體來避免後面的同事閱讀多餘的程式。

• 如下的例子中當我們selectedKey不存在的時候應該立即return，這樣就不用繼續閱讀下面的程式碼，否則面對更複雜的函數時會增加很多的閱讀成本。

保持物件完整

• #經常在我們透過請求拿到後端回傳的資料會根據其中一些屬性來處理，如果需要處理的屬性少的時候很多同學會習慣使用第一種方法。
• 但其實這種習慣是不好的，因為當你無法確定這個函數以後還需不需要增加依賴屬性的時候應該保持物件的完整，就像我上篇文章提到的，學會擁抱變化，假如getDocDetail不只用到icon和content,可能以後還會有title， date等屬性，所以我們不如直接將完整物件傳入，不僅增加縮短參數清單還會讓程式碼更容易閱讀。

巧用運算子

• 當我們需要建立新變數時, 有時需要檢查為其值引用的變數是否為null或未定義時, 就可以使用簡單寫法。

寫在最後

• 首先還是很感謝大家看到這裡，這次的文章就分享到這裡，總結了幾個很基本的優化方法，希望可以幫到大家。

【相關影片教學推薦：web前端】

以上是值得了解的幾個實用JavaScript優化小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！