一个 JS for 循环示例,求助

示例本身的代码是这样的:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	for (var i=0;i<5;i++){
		x=x + "该数字为 " + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

显示结果是:
image

我看了一遍示例,尝试自己写出来,是这样:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="";
	for (var i=0;i<5;i++){
		x="该数字为 " + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

运行结果:
image

我不明白为什么这一行要这么写:

x=x + "该数字为 " + i + "<br>";

x=x + "该数字为 " + i + “
”;
第一次循环: x(空) = x(空) + "该数字为 " + 0 + “
”; //此时 x = "该数字为 " + 0 + “

第二次循环: x("该数字为 " + 0 + “
”) = x("该数字为 " + 0 + “
”) + "该数字为 " + 1 + “
” ; //此时x = "该数字为 " + 0 + “
” + "该数字为 " + 1 + “

以此类推循环到第五次,x中存储了5条数据
才能出现示例那种循环出五条数据的效果。
直接x = "该数字为 " + i + "
"的话,每一次循环x都会替换成最新的值,循环到符合条件退出循环的时候 x = "该数字为 " + 4+ “

1赞

原来是这样!谢谢!

这里的注释我还是不明白:

第二次循环: x("该数字为 " + 0 + “
”) = x("该数字为 " + 0 + “
”) + "该数字为 " + 1 + “
” ; //此时x = "该数字为 " + 0 + “
” + "该数字为 " + 1 + “

此时 x = “该数字为” + 0 + “ ” + “该数字为” + 1 + “ ”

这里不是有两个 “该数字为” 吗?为啥结果是 “该数字为 1”,省略了一个"该数字为"啊?

第三次循环是不是这样啊:

x("该数字为 “+1+” ")=x("该数字为 “+1+” ")+"该数字为 “+2+” "

那结果就是 该数字为 该数字为 3 吗?

怎么没有 该数字为 2 这条结果啊?

谢谢 @nian-s 帮助!

x=x + "该数字为 " + i + "<br>"是因为要把之前计算的结果累加起来。比如说for循环0到5,如果是x=i的话那么结果则是4,如果是x=x+i(x初始等于0)的话等于10。

1赞

谢谢你的解答。
可是,在这个例子里,x=x+"该数字为 "+i,结果不是 10,而是循环五次,显示:
image
为什么呢?

因为你的是字符串拼接,x=x+"该数字为 "+i。 相当于x=“a”+i,等于“a0”+“a1”+“a2”=“a0a1a2”