js 変数スコープを使用するときに発生するバグ

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
                }
            }

上記のコードは、表面的には非常に奇妙に見える問題を作成します。ブランチ 2 = 4 の場合、外側の for ループが戻ることがあります。つまり、最も外側のループが明らかに最後の子に到達した後、外側の for ループが実行に戻ります。

原因分析:

私ほど悪くない専門家なら、問題は変数
iにあることがわかると思います。ここで、iはブロックレベルの変数ではなく、関数レベルになります。ブランチ 2 の変更により、外側の層 i が変更され、ループがループバックします。 ES6 より前の js にはブロック レベルのスコープがなく、グローバル スコープと関数レベルのスコープにのみ分割されていました。ここで i は関数レベルのスコープであり、それを使用してループ index
を作成するとき、実際には次のことを行います。それをブロックレベルのスコープの使用として扱います。

解決策

ブロックレベルのスコープ効果を実現したい場合は、ES6 構文の let キーワードを使用できます:

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

この記事のケースを読んだ後は、この方法を習得したと思います。内容については、PHP 中国語 Web サイトにご注意ください

その他

関連記事! 推奨読書:

一般的に使用される CSS スタイルの概要

Component と PureComponent の使用の違いの詳細な説明

以上がjs 変数スコープを使用するときに発生するバグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。