在NodeList上使用'for ... of'时，Edge 15引发错误 [英] Edge 15 throws error when using 'for ... of' on a NodeList

问题描述

查看 ECMAScript兼容性表时，它表示Edge 15和Edge 16支持 for ... of 循环.

When looking at the ECMAScript compatibility table, it says that Edge 15 and Edge 16 support for ... of loops.

但是，当我运行这段代码时:

However, when I run this code:

const list = document.querySelectorAll('[data-test]');
console.log(list);

for (const item of list) {
  console.log(item);
}

<div data-test></div>
<div data-test></div>
<div data-test></div>
<div data-test></div>
<div data-test></div>

它适用于Chrome和Firefox，但不适用于Edge.相反，它说:

It works in Chrome and Firefox, but not in Edge. Instead it says:

对象不支持属性或方法'Symbol.iterator'.

Object doesn't support property or method 'Symbol.iterator'.

据我了解， NodeList 实际上应该支持它，对吧?

As I understand it, NodeList actually should support it, right?

以下是您自己尝试的方法:在线测试

Here's a fildde to try it yourself: Test it online

有人可以在这里解释问题或错误吗?

推荐答案

Edge确实支持 for ... of .

似乎它不支持NodeLists上的迭代器.并非所有类似数组的对象都支持迭代器，而且我不确定NodeList是否必须遵循任何标准.

It would seem that it doesn't support iterators on NodeLists. Not all array-like objects support iterators and I'm not sure whether there is any standard saying that NodeLists have to.

在任何情况下，都可以很容易地获得 for ... of 与他们一起工作:

In any case, it's easy enough to get for ... of to work with them:

const list = document.querySelectorAll('[data-test]');

for (const item of Array.from(list)) {
	console.log(item);
}

<div data-test>a</div>
<div data-test>b</div>
<div data-test>c</div>
<div data-test>d</div>
<div data-test>e</div>

这篇关于在NodeList上使用'for ... of'时，Edge 15引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！