为什么for循环显示未定义的值[重复]答案

【问题标题】：why for in loop showing undefined value [duplicate]为什么for循环显示未定义的值[重复]
【发布时间】：2017-07-16 20:45:35
【问题描述】：

我无法理解这个 for-in 循环如何在 JavaScript 中显示未定义的值，但在循环中 first 的长度是 3。那么，为什么会有这么多未定义的值。

<div class="tab-menu">
    <ul>
        <li id="first">first item</li>
        <li id="second">second item</li>
        <li id="third">third item</li>
    </ul>
</div>

和循环 -

var first = document.querySelectorAll(".tab-menu ul li");
var f;
for (var i in first) {
    f = first[i].innerHTML;
    console.log(f);
}

它会在控制台中给出这个 -

"first item"
"second item"
"third item"
undefined
undefined
undefined
undefined
undefined
undefined

【问题讨论】：

您必须了解for...in 循环是如何工作的。请改用for 循环。

标签： javascript undefined console.log for-in-loop

【解决方案1】：

你可以使用forEach。

var first = document.querySelectorAll(".tab-menu ul li")

first.forEach(function(e) {
  var f = e.innerHTML
  console.log(f)
})

【讨论】：

那么，哪一个更好用而且速度也更快——简单 for 还是 forEach？

【解决方案2】：

您不应该将 for..in 与数组一起使用。尝试..of：

var first = document.querySelectorAll(".tab-menu ul li");
var f;
for(var el of first){
  f = el.innerHTML;
  console.log(f);
}

【讨论】：