摘要：if-else 語句對於程式員來說，是非常非常熟悉的一個判斷語句，我們在日常開發和學習中都經常看見它。 本文分享自華為雲社區《JavaScript代碼之美—代碼優化，減少if-else冗餘的技巧》，作者：黛琳ghz。 前言 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語句進行多層嵌套了，代碼顯得清晰簡潔，可讀性更好。而且代碼的維護和修改更加清晰。
