这是原始的一段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哥工作之余给我的帮助。