javascript - HTMLCollections 可以用 for...of (Symbol.iterator) 迭代吗？

Question

DOM4 使 NodeList可迭代:

interface <i>NodeList</i> {
  getter <a href="https://www.w3.org/TR/dom/#node" rel="noreferrer noopener nofollow">Node</a>? <a href="https://www.w3.org/TR/dom/#dom-nodelist-item" rel="noreferrer noopener nofollow">item</a>(unsigned long <i>index</i>);
  readonly attribute unsigned long <a href="https://www.w3.org/TR/dom/#dom-nodelist-length" rel="noreferrer noopener nofollow">length</a>;
  iterable<<a href="https://www.w3.org/TR/dom/#node" rel="noreferrer noopener nofollow">Node</a>>;
};

根据 WebIDL , 这意味着

Objects implementing an interface that is declared to be iterable support being iterated over to obtain a sequence of values.

Note: In the ECMAScript language binding, an interface that is iterable will have “entries”, “forEach”, “keys”, “values” and @@iterator properties on its interface prototype object.

所以以下是可能的:

for (var el of document.querySelectorAll(selector)) ...

我注意到在 Firefox 和 Chrome 上，HTMLCollections 似乎同样有效:

for (var el of document.getElementsByTagName(tag)) ...

其实我明白了

HTMLCollection.prototype[Symbol.iterator] === [][Symbol.iterator]; // true

然而，HTMLCollection未定义为可迭代的:

interface <i>HTMLCollection</i> {
  readonly attribute unsigned long <a href="https://www.w3.org/TR/dom/#dom-htmlcollection-length" rel="noreferrer noopener nofollow">length</a>;
  getter <a href="https://www.w3.org/TR/dom/#element" rel="noreferrer noopener nofollow">Element</a>? <a href="https://www.w3.org/TR/dom/#dom-htmlcollection-item" rel="noreferrer noopener nofollow">item</a>(unsigned long <i>index</i>);
  getter <a href="https://www.w3.org/TR/dom/#element" rel="noreferrer noopener nofollow">Element</a>? <a href="https://www.w3.org/TR/dom/#dom-htmlcollection-nameditem" rel="noreferrer noopener nofollow">namedItem</a>(DOMString <i>name</i>);
};

我还检查了 WHATWG DOM spec它也不是可迭代的。

那么，这种行为规范不规范呢？ HTMLCollection 应该在原型(prototype)中有一个 @@iterator 吗？

Answer 1

我找到了，在WebIDL中有解释:

If the interface has any of the following:

• an iterable declaration
• an indexed property getter and an integer-typed attribute named “length”
• a maplike declaration
• a setlike declaration

then a property must exist whose name is the @@iterator symbol, with attributes { [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true } and whose value is a function object. [...]

If the interface defines an indexed property getter, then the Function object is %ArrayProto_values%.

在这种情况下，HTMLCollections 有一个索引属性 getter:

getter <a href="https://www.w3.org/TR/dom/#element" rel="noreferrer noopener nofollow">Element</a>? <a href="https://www.w3.org/TR/dom/#dom-htmlcollection-item" rel="noreferrer noopener nofollow">item</a>(unsigned long <i>index</i>);

和一个名为“length”的整数类型属性:

readonly attribute unsigned long <a href="https://www.w3.org/TR/dom/#dom-htmlcollection-length" rel="noreferrer noopener nofollow">length</a>;

因此，是的，它应该有效。事实上，它也适用于 NodeLists，即使它们没有被声明为可迭代的，但它们不会有 entries、forEach、keys 和 values 属性。正如@lonesomeday 提到的，很可能 HTMLCollection 没有定义为可迭代的，因为添加这些方法不会向后兼容，因为 namedItem getter 接受任意字符串。