为什么如果我在JavaScript中的for循环中将myVariable + = 1替换为myVariable ++，在此代码中生成无限循环？

问题描述

此代码正在正常运行，因为我希望将输入值用作javascript函数的参数，以便在html文档中生成年份选择器（选择器中的结果年份从您在（from）输入字段中输入的年份开始，然后结束您在（至）输入字段）中输入的年份，

但是当我在for循环中用（years + = 1） 替换（years ++）时，我陷入无限循环，浏览器停止工作！

我也尝试过（年=年+1），并且得到的结果与上述相同；

我搜索了一个答案，但没有找到让我理解的答案，

提前谢谢。

var fromInput = document.getElementById("fromInput"),toInput = document.getElementById("toInput"),startY,endY;
    
function generateYears(start,end) {
    "use strict";
    
    var years;
    document.write("<select>");
    
    for (years = start; years <= end; years++) {
        
        document.write("<option value= '" + years + "' >" + years + "<option>");
    }
    
    document.write("</select>");
}


function genYe() {
    "use strict";
    startY = fromInput.value;
    endY = toInput.value;
    generateYears(startY,endY);
}

<!DOCTYPE html>
<html>
 <head>
     
     <Meta charset="utf-8">
     <Meta name="description" content="years selector">
     <title>years selector</title>
     
 </head>
 
 <body>
     
     from <input id="fromInput" value=""><br>
     to <input id="toInput" value=""><br><br>
     <button onclick="genYe()">generate years</button>
     
     <script src="mainscript.js"></script> 
     
 </body>


</html>

解决方法

+运算符用于字符串连接和加法操作，具体取决于其操作数的数据类型。当您切换到+=或+时，您正在执行字符串串联，而不是加法运算，因为 start（和year的值）是一个字符串。 <运算符将按字典顺序比较两个字符串。尽管看起来值变得“更大”，但字符串的第一个字符从未改变，因此条件永远不会为真。

var start = '1'
var end = '3'
var year = start;
console.log(typeof year,year,year < end);
console.log(typeof year,year += 1,year < end);

++运算符总是将操作数转换为数字：

var start = '1'
var end = '3'
var year = start;
console.log(typeof year,year < end);
year++;
console.log(typeof year,year < end);

您可以解决先将值转换为数字的问题：

function genYe() {
    "use strict";
    startY = Number(fromInput.value);
    endY = Number(toInput.value);
    generateYears(startY,endY);
}

问题不是for循环不支持+=或类似的东西。

您正在根据语句years = start;中的字符串初始化年份。这里的开始是一个字符串，不是输入字段返回的整数。

现在，当您运行year++ javascript时，它会自动将其类型转换为整数，因为该字符串不能在++运算符上进行操作。

但是在其他情况下，例如years += 1不会将其强制转换为整数，因此1会附加到字符串后，循环会继续。

即，对于前5次迭代，年份的值为。

，每个值都是字符串。因此，在将其分配给for循环中的年份之前，只需使用parseInt将值转换为整数即可。

var fromInput = document.getElementById("fromInput"),toInput = document.getElementById("toInput"),startY,endY;
    
function generateYears(start,end) {
    "use strict";
    
    var years;
    document.write("<select>");
    
    for (years = parseInt(start); years <= end; years += 1) {
        
        document.write("<option value= '" + years + "' >" + years + "<option>");
    }
    
    document.write("</select>");
}


function genYe() {
    "use strict";
    startY = fromInput.value;
    endY = toInput.value;
    generateYears(startY,endY);
}

<!DOCTYPE html>
<html>
 <head>
     
     <meta charset="utf-8">
     <meta name="description" content="years selector">
     <title>years selector</title>
     
 </head>
 
 <body>
     
     from <input id="fromInput" value=""><br>
     to <input id="toInput" value=""><br><br>
     <button onclick="genYe()">generate years</button>
     
     <script src="mainscript.js"></script> 
     
 </body>


</html>

for-loop javascript operators