Comprendre comment le moteur JS effectue une boucle pour obtenir l'index d'un élément de tableau

Question

J'ai écrit une fonction pour afficher les noms et les index réels des personnes en attente de ligne.

var line = ["Sarah", "Mike", "Bob"]; 
 

 
function currentLine(line) { 
 
    if (line.length === 0) { 
 
    document.write(`The line is currently empty.`); 
 
    } else { 
 

 
    var array = []; 
 
    for (var i = 0; i < line.length; i++) { 
 
     array.push(` ${line.indexOf(line[i+1])}. ${line[i]}`); 
 
    } 
 
    document.write(`The line is currently:` + array); 
 
    } 
 
} 
 

 
currentLine(line);

Quand je lance la fonction, la sortie est:

The line is currently: 1. Sarah, 2. Mike, -1. Bob

Comment est le moteur JavaScript interprétait la boucle? Comment va Bob -1? La dernière fois que j'ai vérifié 2 + 1 = 3.

Je veux résoudre ce problème moi-même, mais j'essaie de comprendre ce qui se passe dans cette boucle apparemment simple.

Answer 1

La réponse est dans votre analyse:

Comment est Bob -1? La dernière fois que j'ai vérifié 2 + 1 = 3

Sur la troisième itération de la boucle, i = 2. Cette ligne exécute avec i = 2:

line.indexOf(line[i+1]) 

Alors qu'est-ce que ça dit? Il dit me obtenir l'élément à la position (i + 1), qui est la position 3, ou l'élément quatrième. Il n'y a pas de quatrième élément, donc line[i+1] est undefined. Passez ce que à l'appel indexOf et ce que vous dites est, trouvez-moi la position de undefined dans le tableau line. line contient 'Sarah', 'Mike' et 'Bob'. Il ne contient pas undefined.

J'ai fait un petit changement à la ligne correctement et il fonctionne maintenant array.push:

var line = ["Sarah", "Mike", "Bob"]; 

function currentLine(line) { 
    if (line.length === 0) { 
    document.write(`The line is currently empty.`); 
    } else { 

    var array = []; 
    for (var i = 0; i < line.length; i++) { 
     array.push(` ${i+1}. ${line[i]}`); 
    } 
    document.write(`The line is currently:` + array); 
    } 
} 

currentLine(line); 

Answer 2

J'ai corrigé la boucle. J'overcomplicated l'indexation:

${line.indexOf(line[i+1])}

qui devrait être:

${[i+1]} - est que la syntaxe légitime?

En outre, si quelqu'un pouvait faire la lumière sur ce que mon code incorrect faisait et comment JS itérait, je l'apprécierais grandement.

Answer 3

Le problème avec ${line.indexOf(line[i+1])} est que la dernière itération, où i est 2, il vérifie line[3]. Cela n'existe pas, donc il crache un -1, car c'est la valeur de retour de indexOf si quelque chose n'existe pas. Il suffit d'aller avec ceci:

array.push(` ${i+1}. ${line[i]}`); 

Ce i + imprime seulement 1, au lieu de chercher index.

var line = ["Sarah", "Mike", "Bob"]; 
 

 
function currentLine(line) { 
 
    if (line.length === 0) { 
 
    document.write(`The line is currently empty.`); 
 
    } else { 
 
    var array = []; 
 
    for (var i = 0; i < line.length; i++) { 
 
     console.log(line.indexOf(line[i+1])); //On last iteration, it's -1 because it's not found in the array! 
 
     array.push(` ${i+1}. ${line[i]}`); 
 
    } 
 
    document.write(`The line is currently:` + array); 
 
    } 
 
} 
 

 
currentLine(line);