使用 for-of 循环迭代 HTMLCollection 对象答案

【问题标题】：Iterating an HTMLCollection object using for-of loop使用 for-of 循环迭代 HTMLCollection 对象
【发布时间】：2017-02-08 09:33:52
【问题描述】：

我正在使用 babel-polyfill 并且我正在尝试使用 for-of 循环迭代 HTMLCollection 对象：

const elements = document.getElementsByClassName('some-class')
for (const element of elements) {
  console.log(element)
}

它不工作。我收到一个错误elements[Symbol.iterator] is not a function。如何让它正常工作？

【问题讨论】：

解释一下你误解的几件事：core-js 是 babel-polyfill 的一部分，所以包含两次是没有意义的。如果在控制台输入Symbol.iterator 有效，则仅表示该符号存在；这并不一定意味着elements 具有Symbol.iterator 属性。 for-of 循环不会将任何内容视为数组——它只是调用对象的 @@iterator 方法。
另外，如果您不知道什么是 HTMLCollection 对象：它是由document.getElementsByClassName() 返回的对象。
@Gothdo，澄清一下，我从来没有同时包含 core-js 和 babel-polyfill：我只是尝试在不同的时间导入它们，以查看其中一个是否可以工作。尽管如此，感谢您的澄清。
@thesublimeobject 拥有Symbol.iterator 并不意味着elements[Symbol.iterator] 应该在那里。 elements 是否公开 iterator 接口（因此 [Symbol.iterator] 方法）与其类型有关。它只是在你的情况下看起来这种类型没有暴露它

标签： javascript dom ecmascript-6 htmlcollection babel-polyfill

【解决方案1】：

来自"Iterable DOM collections" on the core-js GitHub page：

一些 DOM 集合应该有 iterable interface 或者应该是 inherited from Array。这意味着他们应该有keys、values、entries和@@iterator方法用于迭代。所以添加它们。模块 web.dom.iterable:
{
  NodeList,
  DOMTokenList,
  MediaList,
  StyleSheetList,
  CSSRuleList
}
  #values()     -> iterator
  #keys()       -> iterator
  #entries()    -> iterator
  #@@iterator() -> iterator (values)

如您所见，该列表不包括HTMLCollection。为了能够在HTMLCollection 中使用for-of 循环，您必须手动将Array.prototype.values 分配给HTMLCollection.prototype[Symbol.iterator]。看这个例子：

HTMLCollection.prototype[Symbol.iterator] = Array.prototype.values

for (const element of document.getElementsByTagName('a')) {
  console.log(element.href)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<a href="//www.google.com">Google</a>
<a href="//www.github.com">GitHub</a>

或者，您可以只使用document.querySelectorAll()，它会返回一个NodeList 对象。

【讨论】：

@zer00ne 添加到回答中。
@Gothdo 这是一个非常有用的答案。非常感谢。我误解了可迭代规范，现在明白了我为什么会遇到这个问题。