如何解决为什么如果我在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次迭代,年份的值为。
1
11
111
1111
11111
,每个值都是字符串。
因此,在将其分配给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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。