关于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哥工作之余给我的帮助。