「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 サイトの他の関連記事を参照してください。