JavaScript の for と for in の違い、および for in が推奨されない理由

js

var array=['a']
//标准的
for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//
foreach
循环
for(var i in array){
    alert(array[i])
}

で配列を走査するには2つの方法があります

通常、配列を走査する上記の2つの方法の結果は同じです。 2 つの間の最初の違いについて話しましょう

標準の for ループの i は数値型で、配列の添字を表しますが、foreach ループの i は配列のキーが文字列型であることを表します。なぜなら、js 内のすべてはすべてオブジェクトだからです。自分で試してみてください。次のコードを追加すると、上記の実行結果は異なります。

//扩展了js原生的Array
Array.prototype.test=function()
 
}

試してみて、上記のコードが何をするのか見てみましょう。標準の for ループは実際に配列をループしていることがわかりましたが、この時点では、foreach ループは先ほど作成したテスト メソッドを出力します。これが、配列を走査するための for と foreach の最大の違いです。プロジェクト内の配列を走査するために foreach を使用する場合、ある日、誰かが誤って js のネイティブ Array クラスを拡張したり、外部の js フレームワークを導入して、ネイティブ配列。次に問題が発生します。

ステートメントで for を使用しないのはなぜですか?

キーワード: ネイティブ Array クラス、拡張 Array クラス
for in ステートメントを使用して配列オブジェクトを走査する場合の潜在的なバグは次のとおりです: ネイティブ Array クラスが他の JS スクリプト ライブラリによってプロトタイプ拡張されている場合 (toJSON の追加など)メソッド、つまり Array .prototype.toJSON=xxxx) を使用する場合、for in を使用して展開された Array オブジェクト を走査するロジックは、ネイティブ Array オブジェクトを走査するロジックとは異なります。
簡単な例を挙げると、

var x=[1]; 
for(var s in x){ 
alert(s); 
};

常識によれば、Array がネイティブ JS クラスの場合、上記のステートメントはアラート メソッドを 1 回だけ実行する必要があり、s は配列の インデックス 0 です。ただし、Array クラスが追加の toJSON メソッドで拡張されている場合、上記のステートメントはアラートを 2 回実行します。1 回目は s がインデックス 0 で、2 回目は s がメソッド名「toJSON」です。

あなたが設計したコードのロジックがネイティブの Array クラスに基づいており、ある日同僚がページ上でサードパーティの JS ライブラリを参照し、そのライブラリがたまたま Array クラスを拡張した場合、その結果は想像を絶するものになるでしょう。非常に危険です。おそらく、元のコードのロジックは維持できなくなります。

この種のネイティブ JS クラスを拡張するライブラリとしては、prototype.js が有名で、toJSON や each などの Array クラスに多くのメソッドを拡張しています。 jquery の創設者がプロトタイプについてなぜあんなに怒っていたのかがわかりました (多くの人が特別な理由で jquery とプロトタイプを同じページで使用します。noConflict だけでは解決できない予期せぬ競合問題が数多く発生するでしょう)。さらに、jqModal の作者が私の記事を理解した場合、おそらくプロトタイプについて文句を言い、「配列トラバーサルに for in を使用するのは賢明ではありませんが、より悪いのはプロトタイプです...」と言うでしょう。上で述べたように、jqModal を使用していて、他の理由でプロトタイプも使用している場合、おめでとうございます。騙されました。この競合により、ie6 および ie7 で closeClass によって設定されたボタンを使用して jqModal のポップアップ ボックスを自動的に閉じることができなくなります。デバッグ コードをトレースすると、この記事の冒頭で説明した hs メソッドの for in ループ内に例外があることがわかります。 。 。
3、問題を解決します
配列を走査するときは、for inではなくfor varステートメントを使用します。

以上がJavaScript の for と for in の違い、および for in が推奨されない理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。