Javascript中的循環變量聲明，到底應該放在哪兒？

不放走任何(he)一(yi)(yi)個細節。相信很多Javascript開發者都在聲明(ming)循環(huan)變(bian)量時猶 豫過var i到底應該放在哪里(li)：放在不同的(de)(de)(de)位(wei)置會對程序(xu)的(de)(de)(de)運行產生怎樣的(de)(de)(de)影響？哪一(yi)(yi)種(zhong)方式(shi)(shi)符合Javascript的(de)(de)(de)語言規范(fan)？哪一(yi)(yi)種(zhong)方式(shi)(shi)和ecma標準未來的(de)(de)(de)發展 方向匹配(pei)？本(ben)文將對四種(zhong)常(chang)見的(de)(de)(de)聲明(ming)循環(huan)變(bian)量的(de)(de)(de)書寫方式(shi)(shi)進行簡單的(de)(de)(de)分(fen)析和比較。

習慣1：不聲明直接使用

function loop(arr) { 
    for (i = 0; i < arr.length; i++) { 
        // do something 
    } 
} 

非常危險的使用習慣，一般情況下循環變量將成為window對象上的一個屬性被全局使用，極有可能影響程序的正常邏輯實現，想想都蛋疼，大家都懂的，就不在這里贅述了。 
需要著重提一下的是，在strict模式下，未聲明變量而直接賦值的使用方式會直接拋出異常，早就該這么做啦！引用一下ecma-262標準附錄C中的一段話：
"Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object. When a simple assignment occurs within strict mode code, its LeftHandSide must not evaluate to an unresolvable Reference. If it does a ReferenceError exception is thrown (6.2.3.2)."
換言之，如果再(zai)使用(yong)未經聲明的(de)變量的(de)話，ReferenceError異常(chang)會被(bei)拋(pao)出。

習慣2：放在for循環初始語句塊中并反復聲明

function loop(arr) { 
    for (var i = 0; i < arr.length; i++ ){ 
        // do someting 
    } 
    // console.log(i); 
    for (var i = 0; i < arr.length; i++ ){ 
        // do something else 
    } 
} 

這種方式看似最安全規范，很多從C和Java轉到前端開發的同學都偏愛這樣的寫法，事實上，這也許是由于對Javascript中一個重要概念有所 誤解造成的——變量作用域。不同于C和Java，Javascript并不具備真正的塊級作用域，也就是說，在第一個循環結束之 后，console.log(i)并不會打印undefined或者拋出ReferenceError異常，而是會正常打印出arr.length。
當 然，這樣的寫法雖然除了美觀以外意義不大，但是長久以來兼容性良好且沒有違反任何規范——ecma標準中并沒有禁止在某一個作用域內對于同一變量的重復聲 明。不僅如此，其實這里還有一個另外好消息，在ECMAScript 6中，一個新的，為支持真正的塊級作用域而生的關鍵字出現了——let。這里放一個傳送門，有興趣的同學可以自行了解：

習慣3：在函數頂部和其他變量一起集中定義

function loop(arr) { 
    var var1; 
    var var2; 
    var i; 
 
    for (i = 0; i < arr.length; i++) { 
        // do something 
    } 
} 

這(zhe)種c89-like式(shi)的(de)變(bian)量(liang)定義方式(shi)在Javascript中(zhong)幾乎無可挑(tiao)剔，既不會(hui)造成Javascript支持塊級作用域的(de)誤(wu)解(jie)(jie)，又不會(hui)污染(ran)全 局scope，還不違反任何標(biao)準和規范，主(zhu)要(yao)缺點就是(shi)循環(huan)變(bian)量(liang)的(de)聲明和循環(huan)體(ti)可能會(hui)隔開比(bi)較遠。在不借助更(geng)多(duo)代碼(ma)的(de)前提下，除了等(deng)待各(ge)大主(zhu)流瀏覽(lan)器廠商實 現ECMAScript 6中(zhong)的(de)let關鍵字以(yi)外，這(zhe)個問題似乎找不到更(geng)好的(de)解(jie)(jie)決方案。

習慣4：將循環代碼封裝到IIFE中

function loop(arr) { 
    (function () { 
        for (var i = 0; i < arr.length; i++) { 
            // do something 
        } 
    })(); 
}

最后一種(zhong)習慣(guan)是前(qian)端程序員(yuan)們熟悉的(de)IIFE（Immediately-Invoked Function Expression），即立即執(zhi)行函數。此種(zhong)方法的(de)主要缺點是書(shu)寫相對麻(ma)煩，且有(you)多余的(de)性(xing)(xing)能(neng)損耗（很小），但在兼容性(xing)(xing)、對各標準規(gui)范的(de)遵循上(shang)表現良好。 如果不嫌麻(ma)煩，開發者可以采取這種(zhong)方式。

以上就是對Javascript中四種常見循環(huan)變(bian)(bian)量定(ding)義書寫(xie)習慣的簡單介紹和分析(xi)，各有利弊，讀者可以結合自己的需求擇優使用。應該說，在 ECMAScript 6之前并沒有一(yi)種定(ding)義循環(huan)變(bian)(bian)量的完美(mei)解決方案。好在ECMAScript標(biao)準委員會也(ye)及時發現(xian)了這個(ge)問題，讓我們一(yi)起期待let關鍵字吧。