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

相信不少Javascript開發者都在聲明循環變量時猶豫過var i到底應該放在哪裏：放在不一樣的位置會對程序的運行產生怎樣的影響？哪種方式符合Javascript的語言規範？哪種方式和ecma標準將來的發展方向匹配？本文將對四種常見的聲明循環變量的書寫方式進行簡單的分析和比較。

 

習慣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)."
換言之，若是再使用未經聲明的變量的話，ReferenceError異常會被拋出。

 

習慣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。這裏放一個傳送門，有興趣的同窗能夠自行了解：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

 

習慣3：在函數頂部和其餘變量一塊兒集中定義

function loop(arr) {
    var var1;
    var var2;
    var i;

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

這種c89-like式的變量定義方式在Javascript中幾乎無可挑剔，既不會形成Javascript支持塊級做用域的誤解，又不會污染全局scope，還不違反任何標準和規範，主要缺點就是循環變量的聲明和循環體可能會隔開比較遠。在不借助更多代碼的前提下，除了等待各大主流瀏覽器廠商實現ECMAScript 6中的let關鍵字之外，這個問題彷佛找不到更好的解決方案。

 

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

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

最後一種習慣是前端程序員們熟悉的IIFE（Immediately-Invoked Function Expression），即當即執行函數。此種方法的主要缺點是書寫相對麻煩，且有多餘的性能損耗（很小），但在兼容性、對各標準規範的遵循上表現良好。若是不嫌麻煩，開發者能夠採起這種方式。

 

以上就是對Javascript中四種常見循環變量定義書寫習慣的簡單介紹和分析，各有利弊，讀者能夠結合本身的需求擇優使用。應該說，在ECMAScript 6以前並無一種定義循環變量的完美解決方案。好在ECMAScript標準委員會也及時發現了這個問題，讓咱們一塊兒期待let關鍵字吧。

（全文完）