为什么我把(myVariable+=1)作为(myVariable++)的替代品放在javascript中的(for l

这段代码按照我的预期工作，将输入值作为javascript函数的参数，以在html文档中生成年份选择器(选择器中的结果年份从您在(from(输入字段中输入的年份开始，到您在(to(输入字段输入的年份结束(，

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

我也试过(年=年+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(的值是字符串。<运算符将按字典顺序比较两个字符串。虽然看起来该值变为"0"；"较大"；，字符串的第一个字符永远不会改变，因此条件永远不会为true。

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);
}

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

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

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

但在其他情况下，如CCD_ 12，它不将其类型转换为整数，因此CCD_。

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

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

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>

相关内容

最新更新

热门标签：