ホームページ >ウェブフロントエンド >jsチュートリアル >「for/of」を使用した HTMLCollection の反復処理が失敗する場合があるのはなぜですか?またその代替案は何ですか?
for/of を使用した HTMLCollection の反復
for/of を使用して HTMLCollection を反復しようとすると、予期しない結果が発生する可能性があります。この問題が発生する理由を詳しく調べ、HTMLCollection 要素を反復するための別のアプローチを検討してみましょう。
for/in が失敗する理由
for/in の使用に関する問題は、反復が繰り返されることです。オブジェクトの要素ではなく、オブジェクトのプロパティです。 HTMLCollection は配列のようなオブジェクトです。つまり、インデックスに要素が含まれています。ただし、length やnamedItem などのプロパティもあります。
HTMLCollection で for/in を使用すると、要素インデックス (0、1、2、...) とコレクション プロパティの両方が返されます。これにより、予期しない出力が発生し、一部の反復では要素 ID が返され、その他の反復では未定義 (非要素プロパティ) が返されます。
代替反復メソッド
これらの問題を回避するには、いくつかの代替手段がありますfor/in:
for/of Loop:
最新のブラウザは、HTMLCollection オブジェクトと NodeList オブジェクトの for/of 反復をサポートしています。これは最もシンプルで簡単なアプローチです。
var list = document.getElementsByClassName("events"); for (let item of list) { console.log(item.id); }
Array.from():
ES6 では Array.from() が導入されました。メソッド。配列のようなオブジェクトを実際の配列に変換します。その後、for/of を使用してそれを反復処理できます。
Array.from(document.getElementsByClassName("events")).forEach(item => { console.log(item.id); });
配列イテレータを手動で追加する:
そうでないブラウザではネイティブにサポートしているため、配列イテレータを HTMLCollection または NodeList に手動で追加できます。より伝統的なアプローチは、長さプロパティを指定した for ループを使用することです。コレクションの長さ。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]; // Use for/of as with modern browsers for (let item of list) { console.log(item.id); }
これらを利用することで代替メソッドを使用すると、HTMLCollection の要素を効果的に反復処理し、その ID を含むプロパティにアクセスできます。
以上が「for/of」を使用した HTMLCollection の反復処理が失敗する場合があるのはなぜですか?またその代替案は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。