首頁 >web前端 >js教程 >為什麼使用「for/of」迭代 HTMLCollection 有時會失敗,有哪些替代方法?

為什麼使用「for/of」迭代 HTMLCollection 有時會失敗,有哪些替代方法?

Patricia Arquette
Patricia Arquette原創
2024-12-05 11:04:10980瀏覽

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循環:

    現代瀏覽器支援HTMLCollection 和NodeList 物件的迭代。這是最簡單直接的方法。

      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);
    });
  • 手動新增陣列迭代器:

    在不支援的瀏覽器中原生支援/of,您可以手動將Array迭代器加入HTMLCollection或NodeList

    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);
    }
  • 具有 Length 屬性的 for 迴圈:

    更傳統的方法是使用 for 迴圈迭代到集合的長度。

    var list = document.getElementsByClassName("events");
    for (var i = 0; i < list.length; i++) {
        console.log(list[i].id);
    }

透過利用這些替代方法,您可以有效地迭代 HTMLCollection 的元素並存取它們的屬性,包括它們的 ID。

以上是為什麼使用「for/of」迭代 HTMLCollection 有時會失敗,有哪些替代方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn