可以一學的代碼優化小技巧：減少if-else冗余-有解無憂

摘要：if-else 陳述句對于程式員來說，是非常非常熟悉的一個判斷陳述句，我們在日常開發和學習中都經常看見它，

本文分享自華為云社區《JavaScript代碼之美—代碼優化，減少if-else冗余的技巧》，作者：黛琳ghz，

前言

if-else 陳述句對于程式員來說，是非常非常熟悉的一個判斷陳述句，我們在日常開發和學習中都經常看見它，if-else陳述句主要用于需要做出選擇的地方進行判斷，這里就不再贅述if-else語法和特點了，

我們在寫代碼（如圖下，是我以前寫的計算器專案）或看專案的時候或多或少都接觸過擁有大量if陳述句（簡稱“屎山”）的專案代碼，多重嵌套的if-else在維護和修改的時候真的讓人崩潰（特別是看被人的專案的時候），有時候一個 bug 排查下來，整個人都麻木了，

如圖下的計算器專案的代碼就是多重if-else的一個例子，一眼看過去就覺得很冗余了，在功能不完善時，需要添加代碼很不方便，維護時，可讀性很差，而且很多bug，

關于R星公司（Rockstar Games游戲公司）的屎山代碼，相信很多人都有所耳聞，據說公司旗下的GTA 5游戲中回圈19.8億次的if陳述句，可想而知加入游戲要多久啊，

因此，接下來我們將了解和學習一些優化的小技巧，來優化自己的代碼，

短路運算

什么是短路運算，顧名思義，就是觸發到特定條件就短路，只要短路了就不會繼續往后執行，短路運算可以分為兩種邏輯運算子，分別是&&（與）和||（或），

短路 &&

運算規則

運算式1 && 運算式2，只有所有運算式都為true，則整個運算式的運算結果才為true，根據集合的補集的思想，只要任意運算式為false，則整個運算式的運算結果為false，

只要碰到了false或者等價于false的條件就短路，只要短路了就不會繼續往后執行了，然后得到造成短路的這個值，如果不短路，得到的是第二個值

代碼測驗

console.log( true && true ); // true
console.log( false && true ); // false
console.log( true && false); // false
console.log(1 && 0); // 0
console.log( undefined && 0); // undefined 
console.log(null && 1); // null

短路 ||

運算規則

運算式1 || 運算式2，只要任意運算式為true，則整個運算式的運算結果為true，

只要碰到了true或者等價于true的條件就短路，只要短路了就不會繼續往后執行了，然后得到造成短路的這個值，如果不短路，得到的是第二個值

代碼測驗

?console.log( true || true ); // true
console.log( false || true ); // true
console.log( true || false); // true
console.log(1 || 0); // 1
console.log( undefined || 0); // 0 
console.log(null || 1); // 1

三元運算子

三元運算子是一種需要三個運算元的運算子，運算的結果根據給定條件決定，有時候可以用三元運算子代替簡單的if-else判斷，但是三元運算子不建議多層嵌套，可讀性較差

語法規則

條件運算式 ? 運算式1 : 運算式2

先求條件運算式的值，如果為true，則回傳運算式1的執行結果；如果條件運算式的值為false，則回傳運算式2的執行結果，

代碼測驗

//三元運算式來判斷
var age = prompt('請輸入需要判斷的年齡：')
var status = age >= 18 ? '已成年' : '未成年'
console.log(status)
//if-else來判斷
var age = prompt('請輸入需要判斷的年齡：')
if(age>=18){
    console.log('已成年')
}else{
    console.log('未成年')
}

switch陳述句

語法規則

swtich(n) { 
 case 常量1 :
 要執行的陳述句;
 break;
 case 常量2 :
 要執行的陳述句;
 break;
 case 常量3 :
 要執行的陳述句;
 break;
 default:
 要執行的陳述句;
 break;
}

switch 后面的 (n) 可以是運算式，也可以（并通常）是變數，然后運算式中的值會與 case 中的數字作比較，如果與某個 case 相匹配，那么其后的代碼就會被執行，break 的作用是防止代碼自動執行到下一行，

switch 陳述句和具有同樣運算式的一系列的if陳述句相似，很多場合下需要把同一個變數（或運算式）與很多不同的值比較，并根據它等于哪個值來執行不同的代碼，

面對多層嵌套的if-else判斷時，可以選擇使用switch陳述句來寫，這樣代碼可讀性更好

PS：有時候簡單的if判斷比switch陳述句更加簡潔

在寫讓數字1-9前面加上0時的效果，我就用過switch陳述句來寫，發現非常冗余

其實一句if判斷就解決了，就是判斷這個是否小于10，如果是就在數字前加上0

設計模式—策略模式

什么是策略模式?

策略模式是指有一定行動內容的相對穩定的策略名稱，策略模式作為一種
軟體設計模式，指物件有某個行為，但是在不同的場景中，該行為有不同的實作演算法，

策略模式是一種行為設計模式，定義一系列演算法，將每一個演算法封裝起來，并讓它們可以相互替換，目的是實作方法的使用和實作分開，

實際運用

文章開頭我也說過，我在寫計算器專案的時候，在撰寫計算器的功能時，我寫了大量的if-else陳述句來實作這些功能，但是這樣操作了代碼的冗余，并且可讀性差、bug很多，因此我親切的稱呼其為“8噶機”，如下圖可以看到代碼非常冗余，嵌套了大量的if-else來進行判斷，導致專案越寫bug越多

于是我選擇用JavaScript設計模式-策略模式來重新撰寫封裝這些功能函式，使用之前我們要分清楚策略模式的兩個組成部分，一個是策略類，一個是環境類

策略類（可變）：封裝了具體的方法，并且負責方法的實作，
環境類（不可變）：接受呼叫，并把請求委托給某個方法，最終被客戶端呼叫，

一些功能圖如下，由此可知圖一為策略類，圖二為環境類

圖一

圖二

脫離這個專案，我們做一個簡單測驗

代碼如下

let strategy = {
 "A": function ( salary ){
 return salary*4;
 },
 "B": function ( salary ) {
 return salary*3;
 },
 "C": function ( salary ) { 
 return salary*2;
 }
}
let calculateBonus = function ( level, salary ) { //level是指 A B C這三個物件
 return strategy[ level ]( salary );
}
console.log(calculateBonus('A', 10)) // 40

總結

JavaScript的物件可以直接創建，將函式封裝進去，這樣一來就可以減少if-else陳述句進行多層嵌套了，代碼顯得清晰簡潔，可讀性更好，而且代碼的維護和修改更加清晰，

點擊關注，第一時間了解華為云新鮮技術~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541395.html

標籤：JavaScript

上一篇：cookie、session,、token，還在傻傻分不清？

下一篇：day03-模塊化編程