为什么节点列表包含额外的未定义项，这些项未反映在其长度属性中？

Question

背景：

---

我在使用节点列表时遇到了一个非常奇怪的现象。我想使用 getElementsByClassName 或类似的东西，然后对其进行排序。我决定一种方法是迭代节点列表并将每个项目推送到数组并对数组进行排序。 （顺便说一句，这确实有效，但没有达到预期）。我尝试使用 for (var i in nodeList) 进行迭代，但它一直在最后几个未定义的项目上引发异常。奇怪的是我可以使用 for (var i = 0; i

for (var i in document.getElementsByTagName("span"))
    console.count("items");
console.log(document.getElementsByTagName("span").length);

它计数为 items: 382 但长度为 380。正如预期的那样，当我输入 document.getElementsByTagName("span")[380] 和 document.getElementsByTagName("span")[381] 时，它们返回未定义。这种奇怪的行为不会发生在数组上（当然，nodeLists 和数组是不同的，但这确实证明不是不同的 for 循环导致了问题）。

问题：

---

为什么 for(var i in nodeList) 构造在最后返回几个未定义项的 nodeList 上表现不同？

Answer 1

for in 迭代语句捕获的两个附加属性是：

• length
• item

让我给你一个简单的例子。假设页面上有 3 个 SPAN 元素。

var spans = document.getElementsByTagName( 'span' );

现在，spans 是一个 NodeList 对象，其中包含 5 属性：

• 0
• 1
• 2
• length
• item

前 3 个属性是索引，它们包含对这些属性的引用跨度元素。另外两个属性 - length 和 item - 是两个附加属性。所有NodeList对象都具有这两个属性。

for in 语句迭代 NodeList 对象的所有 5 个属性，这可能不是您想要的。因此，请使用常规的 for 语句。

var i, span;

for ( i = 0; i < spans.length; i++ ) {
    span = spans[i];
    // do stuff with span
}

Answer 2

for-in 迭代对象的所有可枚举属性，例如长度和项目（这是您的情况）。这是另外两个结果的来源。它还将枚举添加到对象原型的所有内容。

for 循环遍历数字索引，并且不考虑可枚举属性。这就是为什么使用前一种方式更可靠。