为什么如果我在 javascript 中将 (my Variable += 1) 作为 (Variable) in (for loop) in javascript 的替代方案生成无限循环？

Question

此代码按我预期的那样工作，将输入值作为 javascript 函数的参数以在 html 文档中生成年份选择器（选择器中的结果年份从您输入的年份开始在（从）输入字段中，并以您在（到）输入字段中输入的年份结束），

但是当我在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>

Answer 1

+ 运算符用于字符串连接和加法，具体取决于其操作数的数据类型。当您切换到 += 或 + 时，您正在执行 字符串连接 ，而不是加法，因为 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);
console.log(typeof year, year += 1, year < end);

另一方面，++ 运算符总是将操作数转换为数字：

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

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

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

Answer 2

问题不在于 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>

为什么如果我在 javascript 中将 (my Variable += 1) 作为 (Variable) in (for loop) in javascript 的替代方案生成无限循环？

why if I put (myVariable += 1) as alrenative to (myVariable++) in (for loop) in javascript generate infinite loop in this code?

javascript

for-loop

operators