为什么在一个实例中会跳过这个 js 循环？答案

【问题标题】：Why is this js loop being skipped in one instance?为什么在一个实例中会跳过这个 js 循环？
【发布时间】：2015-04-23 15:01:24
【问题描述】：

我有一个嵌套循环，大部分时间都可以工作，但对于一种特殊情况，它根本不运行。

这是失败的值：1, 3-5, 7-10, 22

JS代码：

document.getElementById("myButton").addEventListener("click", function () {
    document.getElementById("msg").innerHTML = "";

    // Get the short list
    var list = document.getElementById("myIn").value;
    var sublists = list.split(", ");

    var Range = [];
    var result = "";
    var start;    // for the nested loop
    var end;      // for the nested loop

    for (var i = 0; i < sublists.length; i++) {
        Range = sublists[i].split("-");
        start = Range[0];
        end = Range[Range.length-1];

        Log("Range: " + Range);  // Shows which parts of the sublist the program sees

        for (var j = start; j <= end; j++) {
            result = result + j + ",";
            Log("Result in loop: " + result);  // Show which parts make it inside the loop
        }
    }

    result = result.slice(0, -1); // Takes off the extra comma at the end

    Log("Result: " + result);  // Shows result
});

当输入失败值时，结果如下：

Range: 1
Result in loop: 1,
Range: 3,5
Result in loop: 1,3,
Result in loop: 1,3,4,
Result in loop: 1,3,4,5,
Range: 7,10   <--- Never goes inside the loop
Range: 22
Result in loop: 1,3,4,5,22,
Result: 1,3,4,5,22

我不明白为什么跳过了 7-10 部分。非常感谢任何帮助或解释。

这里是FIDDLE

【问题讨论】：

标签： javascript for-loop

【解决方案1】：

这里使用整数时需要使用parseInt

start = parseInt(Range[0],10);
end = parseInt(Range[Range.length-1],10);

在 splittng 之后，您会得到带有字符串的数组，当您尝试将 "7" 与 "10" 进行比较时，它会作为字符串进行比较，并且“7”总是大于“10” "，因为'7'的字符代码大于'1'的字符代码（“10”中的第一个字符）

要转换为数字，您还可以使用下一个函数：Number、parseInt 或 parseFloat

document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("msg").innerHTML = "";

  // Get the short list
  var list = document.getElementById("myIn").value;
  var sublists = list.split(", ");

  var Range = [];
  var result = "";
  var start; // for the nested loop
  var end; // for the nested loop

  for (var i = 0; i < sublists.length; i++) {
    Range = sublists[i].split("-");
    start = parseInt(Range[0], 10);
    end = parseInt(Range[Range.length - 1], 10);
    Log("Range: " + Range); // Shows which parts of the sublist the program sees

    for (var j = start; j <= end; j++) {
      result = result + j + ",";
      Log("Result in loop: " + result); // Show which parts make it inside the loop
    }
  }

  result = result.slice(0, -1); // Takes off the extra comma at the end

  Log("Result: " + result); // Shows result
});

// Log is my imitation of console.log()
function Log(stuff) {
  var msg = document.getElementById("msg");

  var newDiv = document.createElement("div");
  newDiv.innerHTML = stuff;

  msg.appendChild(newDiv);
}

<p>Try this value in the input: 1, 3-5, 7-10, 22</p>
<input id="myIn" type="text" />
<button id="myButton" type="button">Go</button>
<p id="msg"></p>

【讨论】：

谢谢！奇迹般有效。我会尽量记住不同类型的比较。
@Grundy - 在你包含你的 sn-p 之前，我已经制作了 jsFiddle。这只是一个工作演示，因为您没有提供一个。
@Moob o，谢谢，在我看来你暗示了一个错误:-)
@Grundy, Number 在将字符串转换为数字时通常是一种更安全的方法，除非您特别需要过滤掉部分字符串或需要使用非十进制基数进行转换。还有other reasons谨慎使用parseInt。

【解决方案2】：

由于您使用的是文本输入字段，因此该字段中的所有值都是字符串。然后使用返回更多字符串值的字符串操作。你从不处理数字。因此，Javascript 在测试一个值是否大于另一个时会将它们视为字符串值。

您可以使用Number 全局对象将字符串值安全地转换为数字。 Number 优于 parseInt 和 parseFloat 的好处是，如果字符串的任何部分不是数字，它将返回 NaN 值，而其他两个将返回与第一个数字一样多的字符串非数字字符。

start = Number(Range[0]);

【讨论】：