HTMLCollection和NodeList是否可迭代？

Question

在ES6中,iterable是一个允许的对象for... of,并且具有Symbol.iterator键.

数组是可迭代的,就像集合和地图一样.问题是:HTMLCollection和NodeList是否可迭代？他们应该是吗？

MDN文档似乎暗示a NodeList是可迭代的.

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

这似乎证实了Firefox的行为.

我在Chrome和Firefox中测试了以下代码,并且惊讶地发现Firefox似乎认为它们是可迭代的,但Chrome却没有.此外,火狐认为,迭代器返回的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中的实际文件/控制台中运行不同的结果(特别是最后的比较).对这种奇怪行为的任何启示也将受到赞赏.

Answer 1

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

Answer 2

不幸的是,还没有.但在它们出现之前,您可以像这样轻松地将它们填充:

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