pourquoi dans la boucle montrant la valeur indéfinie

Question

J'ai de la difficulté à comprendre comment cette boucle for-in montrant des valeurs indéfinies à la fin en JavaScript, mais en boucle la longueur du premier est 3. Alors, pourquoi tant de valeurs indéfinies.

<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> 

et la boucle -

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

Il va donner ceci dans la console -

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

Answer 1

Vous ne devriez pas utiliser for..in avec des tableaux. Essayez for..of:

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

Answer 2

Vous pouvez utiliser forEach.

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

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