一个基本的Javascript For循环

Question

@ http://jsfiddle.net/defencedog/rrKYW/

最近的一次观察深深地扼杀了我对js的了解。请看下面的代码：

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";
        document.getElementById("posti").innerHTML = x;
    }

}​

以上代码的输出类似于以下代码的输出。这对我来说是模糊的

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";

    }
  document.getElementById("posti").innerHTML = x;
}​

后一个代码必须给我一个单独的（简洁的x的最后一个值）输出＆amp;不是整个迭代输出？

Answer 1

两个片段都完成了同样的事情;第一个片段的性能较差，因为它会在构建字符串时将值覆盖5次，而不是一次写入最终字符串。

无关：i是一个隐含的全局。使用var。

Answer 2

两者都会导致相同的结果。

x = x + ...

Answer 3

确实如此。您在每次迭代中向x添加新代码，然后在元素中设置它。设置innerHTML会覆盖元素的整个内容。

在第一个循环中，每次迭代都会用更大的html覆盖元素的html，但最后的迭代是用x的'complete'值覆盖它的那个。

所以最终结果是一样的，但第一个结果要慢得多。

Answer 4

这两个示例是相同的，因为在第一次innerHTML被重写时，变量x的值与其他字符串连接。在最后一次迭代中，元素的innerHTML将具有x的总值。