在 ES6 中,iterable是一个允许for...of
的对象,并且有一个Symbol.iterator键。
数组是可迭代的,集合和映射也是如此。问题是:是HTMLCollection和 NodeList可迭代?他们应该是吗?
MDN 文档似乎表明 NodeList
是一个可迭代对象。
for...of
loops will loop over NodeList objects correctly, in browsers that supportfor...of
(like Firefox 13 and later)
这似乎证实了 Firefox 的行为。
我在 Chrome 和 Firefox 中测试了以下代码,并惊讶地发现 Firefox 似乎认为它们是可迭代的,但 Chrome 却不然。此外,Firefox 认为 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 中的实际文件/控制台中运行会产生不同的结果(特别是最后一个比较)。任何对这里这种奇怪行为的启发也将不胜感激。
最佳答案
Symbol.iterator
支持 NodeList
、HTMLCollection
、DOMTokenList
和 DOMSettableTokenList
> 是 discussed和 added到WHATWG's DOM spec去年。
关于javascript - HTMLCollection 和 NodeList 是可迭代的吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32285937/