Edge 15 在节点列表上使用'for ... of'时引发错误

Question

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

但是，当我运行此代码时：

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。相反，它说：

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

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

这里有一个可以自己尝试的技巧：在线测试

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

Answer 1

Edge 确实支持 for... of 。

它似乎不支持节点列表上的迭代器。并非所有类似数组的对象都支持迭代器，我不确定是否有任何标准的说法是 NodeList 必须这样做。

无论如何，让for ... of与他们合作很容易：

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>

Answer 2

如果支持 for..of，但 Edge 15 忘记将行为添加到 NodeList，则可以使用很少的代码自行填充它：

NodeList.prototype[Symbol.iterator] = function* () {
    for(var i = 0; i < this.length ; i++) {
        yield this[i]
    }
}

要回答另一个问题(它在规范中是否定义为可迭代的？(，答案是肯定的：

DOM 规范将 NodeList 定义为：

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

请注意第三个属性，iterable<Node>; 。在 WebIDL 规范中查找它：

在 ECMAScript 语言绑定中，可迭代的接口将 具有"条目"、"forEach"、"键"、"值"和@@iterator属性 在其接口原型对象上。

似乎Edge没有实现任何这些。