ホームページ >ウェブフロントエンド >jsチュートリアル >「for/of」を使用した HTMLCollection の反復処理が失敗する場合があるのはなぜですか?またその代替案は何ですか?

「for/of」を使用した HTMLCollection の反復処理が失敗する場合があるのはなぜですか?またその代替案は何ですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-05 11:04:10986ブラウズ

Why Does Iterating an HTMLCollection with `for/of` Sometimes Fail, and What Are the Alternatives?

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。