迭代期间数组元素上的循环停顿答案

【问题标题】：Loop stalls on array element during iteration迭代期间数组元素上的循环停顿
【发布时间】：2017-12-30 19:03:46
【问题描述】：

我正在尝试使用“上一个”和“下一个”按钮循环遍历数组，分别在数组中移动。

它可以正常工作，直到您更改“方向”并尝试说，例如 '下一个' 然后 '以前的'

数组显示它已经存在的相同元素，而不是显示数组的前一个元素。

例如，我在 4，点击“上一个”按钮，它仍然在 4。您必须再次按“上一个”按钮才能使其回到 3。

我在这里错过了什么......？

var numbers = ["I am index number 0", "I am index number 1", "I am index number 2",
    "I am index number 3", "I am index number 4", "I am index number 5"];
var i=0;
var text = "";

document.getElementById("back").addEventListener("click", function previous() {
  if (i-1 >= 0) {
    var text = numbers[--i];
  }

document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function next(){
  if (i < numbers.length) {
    var text = numbers[i++];
  }

document.getElementById("filler").innerHTML = text;
});

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>

【问题讨论】：

--i 递减值然后返回值。 i++ 返回当前值，然后递增。如果您希望它们的行为相同，请使用 --i 和 ++i 或在索引引用之外执行操作。
我建议你学习如何使用 Chrome 开发者工具。具体来说，它有一个调试器，允许您一次单步执行代码并观察变量的值。这是所有 JavaScript 程序员的宝贵工具。
Code-Apprentice，我一直在使用开发工具来查找实际错误，但是在这种情况下并没有未捕获的错误。您能否建议我如何更有效地使用此工具来帮助解决此类问题？

标签： javascript arrays loops iteration

【解决方案1】：

首先你应该看看 Crayon Violent 的评论

--i 递减值然后返回值。 i++ 返回当前值然后递增。如果您希望它们的行为相同，请使用 --i 和 ++i 或在索引引用之外执行操作。

你不应该重新定义 ifs 中的文本

var text = numbers[--i];

以下解决方案有效：

	var numbers = ["I am index number 0", "I am index number 1", "I am index number 2",
	    "I am index number 3", "I am index number 4", "I am index number 5"];
	var i =  -1;
	var text = "";

	document.getElementById("back").addEventListener("click", function previous() {
	  if (i > 0) {
	    text = numbers[--i];
	  }

	document.getElementById("filler").innerHTML = text;
	});

	document.getElementById("forward").addEventListener("click", function next(){
	  if (i < numbers.length - 1) {
	    text = numbers[++i];
	  }

	document.getElementById("filler").innerHTML = text;
	});

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>

【讨论】：

在这里感谢您的解决方案。

【解决方案2】：

实际上，您看到的是增量前而不是增量后。 ++i 增加值然后返回值，另一方面i++ 返回当前值然后增加值。

还有一个建议，你不需要一直创建 var text，一旦你创建并定义它为空，你最好只做 text = numbers[--i]without var。

我注意到的另一件事是，在您的第二个条件（如果）中，您应该执行 if (i < numbers.length - 1)，因为 .lengthmethod 从 1 开始计数。

我为你做了一个 jsfiddle :) https://jsfiddle.net/t2cjf5m8/16/

【讨论】：

【解决方案3】：

我在下面修改了您的代码以使其正常工作：

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>


<script>
    var numbers = [
        "I am index number 0",
        "I am index number 1",
        "I am index number 2 ",
        "I am index number 3",
        "I am index number 4",
        "I am index number 5"
    ];
    var i = 0;
    var text = "";



    document.getElementById("back").addEventListener("click", function previous() {
        if (i - 1 >= 0) {
            var text = numbers[i--];
            document.getElementById("filler").innerHTML = text;
        }
    });




    document.getElementById("forward").addEventListener("click", function next() {
        if (i < numbers.length) {
            var text = numbers[i++];
            document.getElementById("filler").innerHTML = text;
        }
    });
</script>

我所做的唯一更改是在var text = numbers[i--]; 我将操作员的位置从左到右更改。 "If the operator appears before the variable, the value is modified before the expression is evaluated. If the operator appears after the variable, the value is modified after the expression is evaluated." 引用自： https://docs.microsoft.com/en-us/scripting/javascript/reference/increment-and-decrement-operators-javascript

【讨论】：