ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の for..in ループ トラップの概要_javascript のヒント

JavaScript の for..in ループ トラップの概要_javascript のヒント

WBOY
リリース: 2016-05-16 17:15:53
オリジナル
1180 人が閲覧しました

JavaScript にはオブジェクトを反復するための 2 つの方法があることは誰もが知っています:
(1) for ループ;
(2) for..in ループ;
配列オブジェクトを反復するために for ループを使用することは、すでに一般的だと思います。 。ただし、for..in ループを使用する場合は、誰もが注意する必要があります。なぜそう言えるのでしょうか。皆さん、聞いてください...
JavaScript には特別なループ (つまり、for..in ループ) が用意されており、オブジェクトのプロパティまたは配列の各要素 (for...in) を反復するために使用されます。ループ内のループ カウンタは数値ではなく文字列です。これには、現在のプロパティの名前または現在の配列要素のインデックスが含まれます。
ケース 1:

コードをコピー コードは次のとおりです:

//使用しますfor.. ループでは、オブジェクト属性
varperson={
name: "Admin",
age: 21,
address: "shandong"
}; in person){
console.log(i);
}

実行結果は次のとおりです:
名前
年齢
住所
オブジェクトの場合、変数 i はループ カウンタがオブジェクトの属性名であることを意味します

コードをコピーします コードは次のとおりです。
// for..in ループを使用して配列を走査します
vararray = ["admin","manager","db"]
for(vari in array){
console.log(i);
}

実行結果:
0
1
2
配列を走査するとき、変数 iはループ カウンター、 は現在の配列要素のインデックスです
ケース 2:
ただし、for.. in ループは現在では非常に便利であるようですが、あまり早く満足しないでください。次の例を見てください:

コードをコピー コードは次のとおりです:
var array = ["admin","manager","db"];
// 配列名属性にプロトタイプを追加します
Array.prototype.name= "zhangsan";
for(var i in array){
alert(array[i]);
}

実行結果:
admin
manager
db
zhangsan
こんにちは。不思議に思いますが、なぜ zhangsan が理由もなく現れるのでしょうか
それでは、for ループを使用すると何が起こるか見てみましょう。

コードをコピー コードは次のとおりです。
vararray = ["admin","manager "," db"];
//配列のプロトタイプに name 属性を追加します
Array.prototype.name = "zhangsan";
for(var i =0 ; ialert(array[i]);
};

実行結果:
admin
manager
db
ああ、 .in ループは特定の型のプロトタイプ内のメソッドとプロパティを走査するため、コード内で予期しないエラーが発生する可能性があります。この問題を回避するには、オブジェクトの hasOwnProperty() メソッドを使用します。オブジェクトのプロパティまたはメソッドが継承されていない場合、hasOwnProperty() メソッドは true を返します。つまり、ここでのチェックには他のオブジェクトから継承されたプロパティやメソッドは含まれず、特定のオブジェクト自体で直接作成されたプロパティのみが含まれます。
ケース 3:

コードをコピー コードは次のとおりです。
vararray = [ "admin" ,"manager","db"];
Array.prototype.name= "zhangshan";
for(vari in array){
//によって直接作成された属性でない場合オブジェクト自体 (つまり、プロパティ // はプロトタイプ内の属性です) の場合、
if(!array.hasOwnProperty(i)){
continue
}
アラートの表示をスキップします。 (array[i]);
}

実行結果:
admin
manager
db
すべて以前と同じように良好です。これを読んだ同志は、「雲と霧が分かれて晴れた空が見える」ような気分ではないでしょうか(笑)
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート