Javascript 優化項目代碼技巧之語言基礎（二）

& 160;& 160;& 160;& 160; "上一篇隨筆" 介紹瞭如何正確判斷對象類型、避免變數污染，特殊值（null、undefined、NaN）的使用，以及其他Javascript中常用關鍵字與方法的優化，這篇隨筆將著重介紹Javascript語言中的條件與迴圈優化。 & 160;& 16 ...

上一篇隨筆介紹瞭如何正確判斷對象類型、避免變數污染，特殊值（null、undefined、NaN）的使用，以及其他Javascript中常用關鍵字與方法的優化，這篇隨筆將著重介紹Javascript語言中的條件與迴圈優化。
如有問題，請不吝指出，非常感謝；如果喜歡，右下角點個推薦吧~

1.if、switch、查表

1.1 if-else分治策略

// 方法一，假設value的值平均分佈
// 方法一的平均查詢次數是 (n+1)/2，即複雜度是O(N)
// 方法二採用了二分查找，平均查找次數為lg(n)，複雜度是對數級別的
if(value === 0){
    func0();
} else if (value === 1){
    func1();
} else if (value === 2){
    func2();
} else if (value === 3){
    func3();
} else if (value === 4){
    func4();
} else if (value === 5){
    func5();
} else if (value === 6){
    func6();
} else if (value === 7){
    func7();
}
// 方法二（分治策略），為方便排版，壓縮、省略部分代碼塊
if (value < 4) {
    if(value < 2){
        if(value === 0){ func0(); }
        else { func1(); }
    }else {
        if(value === 2){ func2(); }
        else { func3(); }
    }
} else {
    // 省略同上的結構...
}

優化技巧一：二分查找能夠顯著降低複雜度，提高性能，上述例子只是其中一個，在項目中涉及到判斷，查找而數據量較大時可以考慮二分提高性能。
優化技巧二：對於if-else語句，判斷情況較少，或者考慮代碼可讀性（比如判斷周一到周五），方法一會更直觀，不能一味追求效率。
優化技巧三：如果判斷值不是平均分佈的，那麼考慮將出現頻率高的判斷放在前面（上例中如果90%情況下value等於7，幾乎每次都要判斷8次，如果將這個判斷放在最前面，就降到了1次）。

1.2 什麼情況下用switch

switch-case語句利用轉發表，快速定位入口，在數據量較大時，switch-case執行效率會比if-else好很多。
數據量較多時，switch-case的可讀性也會好很多。
以下情況適合用switch

(1) 判斷值超過2個，而且值是離散的。例如 case '男' (2) 表達式的值是固定的，不是動態變化的
(3) 表達式的值值一般為整數、字元串等類型的數據

1.3 使用查表提高性能

當有大量離散值需要測試時，如果有一張轉發表可以直接查詢，那麼無疑可以極大地提高性能，如果將這個表以字典（dict）的形式呈現，可讀性也得到了提高。Javascript中字典往往等價於對象，舉兩個例子：

/* 適用情況一：條件執行代碼很少，如使用if或switch顯得笨重 */
function func1(key){
    if(key === 0){ return ans0; }
    if(key === 1){ return ans1; }
    // 省略 2,3,4,5...
}
// 替換為
function func1(key){
    var ans = [ans0,ans1,ans2,ans3 ... ];
    return ans[key];
}

/* 適用情況二：條件執行代碼很多，如用if或switch可讀性很差 
 * 同時，執行代碼可能多次復用，而且整體性較強
 * 這種寫法常用在javasript框架中，書寫鉤子函數（Hook）
 * 可讀性很高，而且容易擴展，代碼本身即文檔
 */
function func1(key){
    if(key === "created"){  /* ... 省略10行代碼 */ }
    else if(key === "init"){ /* ... 省略10行代碼 */ }
    // 省略 "resume","start","pause","destroy",...
}
// 替換為
var hooks = {
    "created": function(){ /* ... 省略10行代碼 */ }；
    "init": function(){ /* ... 省略10行代碼 */ }；
    // ... 省略更多屬性
}
function func1(key){ 
    hooks[key]();
}

2.短路表達式（&&和||）

2.1 改善 && 與 || 性能

使用&&運算時，從左到右計算表達式，一旦為false就返回，例如：

A && B，如果A為false，表達式返回false，不再計算B。

A為true，會繼續計算B，再決定返回值，這稱為短路表達式
因此，如果B為false的概率大於A，寫為B && A可以減少計算次數
使用||運算時，同樣先計算||左側的表達式，例如：

A || B，如果A為true，表達式返回true，不再計算B。

因此，如果B為true的概率大於A，寫為B || A可以減少計算次數

2.2 巧用短路表達式賦值

&& 與 || 不僅用在判斷語句中，常用在賦值語句中

a = {} || [] // => a = {}，a並沒有被賦值為true，而是 {}

利用javascript的弱類型，我們可以構造很精巧的賦值表達式，0、""、null、false、undefined、NaN 判斷為false，其他為true

/* || */
var value = a || [];
// 等價於
value = a ? a : [];
// 等價於
if(a){ value = a; }
else { value = []; } 
 
/* && */
var value = a && b;
// 等價於
value = a ? b : a;

當表達式較簡單時，使用三目運算符也能讓我們的代碼很優雅，但是當表達式數量很多時，&&和||能更優雅。

/* 當a和b均返回false時，返回一個新建對象 */
return a || b || {};

/* jQuery中大量使用短路表達式賦值 
 * 代碼過於簡潔，代碼可讀性會降低，適當使用
 */
diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
        (~b.sourceIndex || MAX_NEGATIVE) -
        (~a.sourceIndex || MAX_NEGATIVE);

Javascript的弱類型使得短路表達式賦值很容易，但是有時我們需要明確返回一個布爾值，這個時候可以強制類型轉換。

var value = !!( a || b) // => value = true/false 
if(!!(a && b)) // => 顯式轉換，與if(a && b)結果一致

3.迴圈優化

3.1 少用 forEach

Javascript的數組有一個原型方法：forEach，可以在每一個成員上執行一個函數，forEach接收3個參數，數組項的值（value），數組項的索引（index），以及數組自身（array）
forEach 相比一般的迴圈，將關聯額外的函數調用，如果將forEach改為普通的迴圈結構，效率將大大提高。

items = [1,2,3];
items.forEach(function(value,index,array) {
    // ... func(value);
})
// 等價於
var len = items.length;
for(var i = 0; i < len; ++i ){
    // ... func(items[i]);
}

3.2 重覆變數暫存

在迴圈中，重覆使用一個變數的情況是十分常見的，例如上個例子的中len，如果不使用變數len暫存，那麼每次迴圈都需要訪問數組的length屬性，比起直接訪問一個數字，訪問一個對象屬性的花銷會更大。
變數暫存在這個例子中優勢並沒有那麼明顯，但是如果迴圈中進行了DOM操作，我們知道DOM操作是相當費時的，如果將DOM對象緩存，性能提高就很可觀了。

// 暫存變數前，獲取 p#item，需要3次DOM操作，
$('p#item').func1();  
$('p#item').func2();
$('p#item').func3();
// 等價於（這裡不考慮jQuery的鏈式操作）
// 只需要一次DOM操作（DOM操作非常耗時）
var p_item = $('p#item');
p_item.fun1();
// ...

重覆使用的需要計算的變數賦值給另一個變數，還有一個好處是易於壓縮，考慮下麵的例子

/* 不暫存變數 */
var obj = { nickname:{} };
obj['nickname'].firstname = 'Tom';
obj['nickname'].lastname = 'Smith';
obj['nickname'].fullname = 'Tom Smith';
// 壓縮結果
var a = { nickname:{} };
a['nickname'].firstname = 'Tom';
a['nickname'].lastname = 'Smith';
a['nickname'].fullname = 'Tom Smith';

/* 暫存變數 */
var obj = { nickname:{} };
var nickname = obj['nickname'];
nickname.firstname = 'Tom';
nickname.lastname = 'Smith';
nickname.fullname = 'Tom Smith';
// 壓縮結果如下
var a = { nickname:{} };
var b = a['nickname'];
b.firstname = 'Tom';
b.lastname = 'Smith';
b.fullname = 'Tom Smith';