一個基本的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）輸出&不是整個迭代的輸出？

Answer 1

這兩個片段完成相同的事情;第一個代碼片段性能不高，因爲它會在字符串構建時覆蓋該值5次，而不是寫入最後一個字符串。

無關聯：i是一個隱式的全局。使用var。

Answer 2

兩者都會導致相同的結果。

x = x + ... 

Answer 3

當然可以。您在每次迭代中向x添加新代碼，然後將其設置在元素中。設置innerHTML將覆蓋元素的全部內容。

在第一個循環中，每次迭代都會用一個較大的html覆蓋元素的html，但最終的迭代是用x的'complete'值覆蓋它的那個。

所以最終的結果是一樣的，但第一個是比較慢。

Answer 4

這兩個示例是相同的，因爲第一個innerHTML在每次迭代時被覆蓋，而變量x的值與其他字符串串聯在一起。在最後一次迭代中，元素的innerHTML將具有x的總值。