关于for循环迭代一个小问题

这是原始的一段js代码

function myFunction() { var x="",i; for (i=0;i<5;i++) { x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }

输出：

若：

function myFunction() { var x,i; for (i=0;i<5;i++) { x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }

或：

function myFunction() { var x,i; for (i=0;i<5;i++) { x+= "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }

输出：

若：

function myFunction() { var x,i; for (i=0;i<5;i++) { x= "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x; }

输出：

---

---

第二块代码片解释： 首先是undefined的问题，当var关键字声明了x和i，却并没有像第一块代码块中给其定义（赋值）了一个”“（空字符串），此时若是用js输出结果就是undefined。

其次是”x+=“和”=x+“这两个，当循环中进行这个statement语句块的时候，（+后面的”the number is “…这一大块字符串我用value来表示） ”x +=value“ 和”x=x+value“是等同的，都是一个附加的效果，将每一次循环结果赋值给x， x=x+value1++value2…….. 用一下代码块展示循环过程，会更可观：

function myFunction() { var x="",i; for (i=0;i<5;i++){ x=x+"The number is " + i + "<br>"; if (i==0){ document.getElementById("demo0").innerHTML=x; } else if(i==1){ document.getElementById("demo1").innerHTML=x; } else if(i==2){ document.getElementById("demo2").innerHTML=x; } else if(i==3){ document.getElementById("demo3").innerHTML=x; } else if(i==4){ document.getElementById("demo4").innerHTML=x; } } }

输出：

.innerHTML属性改写和替换id为demo系列的原文本，从头改写，所以原本的文本是被覆盖，而不是一味地附加。 这个附加的过程是循环的过程，而替换文本是输出最后一次显示的x值。

---

第三块代码片解释： 如果知道了第二块代码片的运行机制，第三块理解起来就不难了。 因为innerHTML改写和替换了原文本，而x并没有通过”+=“和”x+“来进行value（value1+value2…）的叠加，故而运行到最后一次循环，x被赋值最后一次运算结果，即当i=4的情况，所以只显示一条结果为4的字符串。

---

---

感谢be哥工作之余给我的帮助。