22

在 ES6 中，一个可迭代对象是一个允许for... of并具有 Symbol.iterator 键的对象。

数组是可迭代的，Sets 和 Maps 也是如此。问题是：HTMLCollection和NodeList是可迭代的吗？他们应该是吗？

MDN 文档似乎表明 aNodeList是可迭代的。

for...offor...of在支持的浏览器（如 Firefox 13 及更高版本）中，循环将正确循环 NodeList 对象

这似乎证实了 Firefox 的行为。

我在 Chrome 和 Firefox 中测试了以下代码，惊讶地发现 Firefox 似乎认为它们是可迭代的，但 Chrome 却没有。另外，Firefox 认为 and 返回的迭代器HTMLCollection是NodeList一回事。

var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems
var nod = document.querySelectorAll('.test');      // Should get NodeList of 2 elems
var arr = [].slice.call(col);                      // Should get Array of 2 elems

console.log(col[Symbol.iterator]);    // Firefox: iterator function, Chrome: undefined
console.log(nod[Symbol.iterator]);    // Firefox: iterator function, Chrome: undefined
console.log(arr[Symbol.iterator]);    // Firefox & Chrome: iterator function
console.log(col[Symbol.iterator] === nod[Symbol.iterator]);  // Firefox: true
console.log(col[Symbol.iterator] === arr[Symbol.iterator]);  // Firefox: false
<div class="test">1</div>
<div class="test">2</div>

一件非常奇怪，令人困惑的事情：运行代码片段与复制它并在Firefox中的实际文件/控制台中运行产生不同的结果（特别是最后一个比较）。对这里这种奇怪行为的任何启示也将不胜感激。

4

4 回答 4

6

Symbol.iterator去年， WHATWG 的 DOM 规范讨论并添加了对NodeList、HTMLCollection、DOMTokenList和DOMSettableTokenList的支持。

于 2015-07-22T22:11:29.023 回答
5

不幸的是，还没有。但在它们完成之前，您可以像这样轻松地填充它们：

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
于 2015-08-13T21:57:15.517 回答
2

正如greiner指出的那样，2014 年 WHATWG 的 DOM 规范中添加了对 的原生Symbol.iterator支持。NodeList

不幸的是，Chrome 51 是第一个支持它的 Chrome 版本，在撰写此答案时，它的 Beta 版才刚刚发布。此外，任何版本的 Internet Explorer 或 Edge 都不支持。

要在您的代码中添加Symbol.iterator对NodeList所有浏览器的支持，只需使用以下 polyfill ：

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
于 2016-04-29T22:35:25.943 回答
1

对于尝试使用 TypeScript 在 NodeList 上进行迭代的任何人。我通过修复https://github.com/microsoft/TypeScript/issues/4947发现了这个问题，这是tsconfig.json您需要的：

{
  "compilerOptions": {
    "lib": ["es2017", "dom", "dom.iterable"],
    "downlevelIteration": true
  }
}

我得到的问题错误：

Type 'NodeListOf<Element>' is not an array type.

这是触发该问题的代码：

[...document.querySelectorAll('#md-view a')]
于 2020-06-02T23:07:11.600 回答