为什么使用'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循环：

  现代浏览器支持 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中文网其他相关文章！