Question

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

以下是失败的值：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

Answer 1

使用整数时需要使用parseInt

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

分割后你会得到带有字符串的数组，当你尝试将“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>

Answer 2

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

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

start = Number(Range[0]);

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

2 个答案: