使用js變數作用域遇到的bug

for (var i = 0; child && i < child.length; i++) {
            var obj = child[i];
            var kind = child[i].kind;
            var deiveId = child[i].id;
            if (kind == "4") {//分支1
                 // do sometjing
            }else{//分支2
                for(i in arr){
                   //do something
                }
            }

以上程式碼產生了一個表面上看起來會很詭異的問題，就是如果kind！ =4的分支2情況下，有時候會導致外層的for循環回頭，即：明明最外層已經循環到child的最後一個了，跑完分支2之後，外層for循環又回頭執行。

原因分析:
我想專業人士不像我這麼渣的話會發現問題在變數i，此處i並不會成為區塊級變量，而是函數級，分支2中的i變化會導致外層i變化，進而導致循環回頭。
js在ES6之前沒有區塊級作用域，只分為全域作用域和函數級作用域，此處i為函數級作用域，而我們用它做循環索引的時候其實是想當作塊級作用域使用。

解決方法

想要達到區塊級作用域效果可以使用ES6語法的let關鍵字實作：

for(let i=0;i<arr.length;i++){
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css常用樣式總結

#Component與PureComponent使用區別詳解

#

以上是使用js變數作用域遇到的bug的詳細內容。更多資訊請關注PHP中文網其他相關文章！