一道Javascript基础问答题

Js
yutao

我有时候会去百度知道javaScript分类逛一逛，因为里面会有很多小伙伴问一些基础题。
我会选择一些我感兴趣的去来回答，因为可以帮助我重温基础。
他的问题是这样的：

谁会javascript啊，下图中划横线的 x+ 是干嘛用的？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
function mytest(){
	var x = "";
	for(var i=0; i<5; i++){
		x = x + "Num is" + i + "<br/>";
	}
	document.getElementById("demo").innerHTML = x;
}
</script>
输出的结果是：
Num is 1
Num is 2
Num is 3
.
.
.
我觉得那个x+没必要加上，但是去掉以后输出结果只有
Num is 4
......初学js，说多都是泪

我选择来回答这道题；
一、这或许是一个新手的疑惑点。
二、看到其他人回复的都比较简单而楼主又在不停追问。
三、这样细致的来分析一个知识点是比较有意思的事情。

我的回复是：

1.首先要明白js按从上往下执行，for循环完毕才会执行document.xxxx.innerHTML = x;

2.先看不要x+的情况,这个很好理解

1
2
3
4
5
6
7
8
9
10

for开始循环
  i = 0的时候，x ＝ ”The number is“ + i + ”换行“;
  结果：x = The number is 0 + ”换行“;
  i = 1的时候， x ＝ ”The number is“ + i + ”换行“;
  结果：x ＝ The number is 1 + ”换行“;
  以此类推：
  i＝4的时候，x ＝ ”The number is“ + i + ”换行“;
  结果：x = The number is 4;
  这个时候循环结束了，x的最终结果是 The number is 4;
  所以页面document.xxxx.innerHTML ＝ The number is 4;

3.再看有x+的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

for开始循环
 i＝0的时候，x ＝ x + "The number is" + i + "换行" ;
 顶部就已经申明了，x为空对不？i 这个时候为0，
 结果： x ＝ "" + The number is 0 + ”换行“;
 i＝1的时候，x ＝ x + "The number is" + i + "换行" ;
 这个时候x ＝ "" + The number is 0 + ”换行“ 对不对？ i 这个时候为1，
 结果：x ＝ ("" + The number is 0 + ”换行“) + The bunber is 1 + ”换行“;
  	
 以此类推
 i = 4的时候，我都不想写了，x里面被加了一堆
 结果：x ＝ ("" + The number is 0 + ”换行“) +  (The number is 1 + ”换行“)
     + ( The number is 2 + ”换行“) + ( The number is 3 + ”换行“)
     + (The number is 4 + ”换行“)；
 这个时候循环结束了，x的最终结果是一堆...
 因为有5个换行符，所以有5行，这个时候document.xxxx.innerHTML ＝ x；你想页面应该是什么结果呢

最简单的方法其实在浏览器打个断点，跑起来就会看的很清楚。
一行行打出来是很累的，但能让他明白，自己也是很舒坦的。