相信很多Javascript開發者都在宣告迴圈變數時猶豫過var i到底應該放在哪裡：放在不同的位置會對程式的執行產生怎樣的影響？哪一種方式符合Javascript的語言規範？哪一種方式和ecma標準未來的發展方向匹配？本文將對四種常見的宣告迴圈變數的書寫方式進行簡單的分析和比較。
習慣1：不宣告直接使用
|
1 2 3 4 5 |
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迴圈初始語句塊中並反覆宣告
|
1 2 3 4 5 6 7 8 9 |
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：在函式頂部和其他變數一起集中定義
|
1 2 3 4 5 6 7 8 9 |
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中
|
1 2 3 4 5 6 7 |
function loop(arr) { (function () { for (var i = 0; i < arr.length; i++) { // do something } })(); } |
最後一種習慣是前端程式設計師們熟悉的IIFE（Immediately-Invoked Function Expression），即立即執行函式。此種方法的主要缺點是書寫相對麻煩，且有多餘的效能損耗（很小），但在相容性、對各標準規範的遵循上表現良好。如果不嫌麻煩，開發者可以採取這種方式。
以上就是對Javascript中四種常見迴圈變數定義書寫習慣的簡單介紹和分析，各有利弊，讀者可以結合自己的需求擇優使用。應該說，在ECMAScript 6之前並沒有一種定義迴圈變數的完美解決方案。好在ECMAScript標準委員會也及時發現了這個問題，讓我們一起期待let關鍵字吧。