了解 JS 引擎如何循环获取数组元素的索引

Understanding how the JS engine is looping through to get the index of an array element

我写了一个函数,可以输出排队的人的姓名和真实索引。

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

当我运行这个函数时,输出是:

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

JavaScript 引擎如何解释循环?鲍勃-1怎么样?上次我检查了 2 + 1 = 3。

我想自己解决这个问题,但我试图了解这个看似简单的循环中发生了什么。

我修复了循环。我使索引过于复杂:

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

应该是:

${[i+1]} - 这是合法的语法吗?

此外,如果有人能阐明我的错误代码在做什么以及 JS 是如何迭代的,我将不胜感激。

你的分析答案是对的:

How is Bob -1? Last time I checked 2 + 1 = 3

在循环的第三次迭代中,i = 2。此行执行 i = 2:

line.indexOf(line[i+1])

那么这说明了什么?它说给我获取位置 (i + 1) 的元素,即位置 3,或 forth 元素。没有第四个元素,所以 line[i+1]undefined.

将其传递给 indexOf 调用,您的意思是,在 line 数组中找到 undefined 的位置。 line 包含 'Sarah'、'Mike' 和 'Bob'。它不包含 undefined.

我对 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);

${line.indexOf(line[i+1])} 的问题在于,在最后一次迭代中,i 为 2,它会检查 line[3]。那不存在,所以它吐出一个 -1,因为如果某些东西不存在,那是 indexOf 的 return 值。就这样吧:

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

这只是打印 i + 1,而不是寻找索引。

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