Question

我的HTML代码，我想知道当我使用text代替text+时会发生什么：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Loops</h2>

<div id="demo"></div>

<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text+=cars[i]+"<br>";
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Answer 1

text+=cars[i]

此代码的含义是您将cars数组的第i个索引添加到字符串'text'的末尾。它可以改写如下，

text = text + cars[i]

因此document.getElementById("demo").innerHTML = text;告诉浏览器使用text

在HTML中写入id = "demo"变量的内容

对于for变量的text循环值的每次迭代都会被传入。因为text+=cars[i]+"<br>";在document.getElementById("demo").innerHTML = text;之前，此值会根据驻留的元素而变化在i数组的cars索引中。

在第一次迭代i = 0，因此数组BMW的第一个元素成为text的值并传入document.getElementById("demo").innerHTML = text;

在第二次迭代中i = 1并且text的值变为Volvo，依此类推，直到你到达数组的末尾并且i < cars.length不再为真， control退出for循环。

Answer 2

=运算符是assignment operator。它为变量赋值，覆盖旧值：

var a = 'Hello, ';
a = 'World!';
console.log(a); // logs 'World!'

+=运算符是添加赋值运算符。它为变量的值添加了一个值：

var a = 'Hello, ';
a += 'World!';
console.log(a); // logs 'Hello, World!'

它相当于：

var a = 'Hello, ';
a = a + 'World!';
console.log(a); // logs 'Hello, World!'

Answer 3

如果您将text +替换为文本，那么您将获得 Audi 作为输出。

如果您的问题是在循环中给出了文字+和 innerHTML ，但仍然没有附加两次？然后答案是 - innerHTML以一种覆盖现有值的方式工作。

Answer 4

for (i = 0; i < cars.length; i++) {
    text+=cars[i]+"<br>";
    document.getElementById("demo").innerHTML = text;
}
// This produces :

BMW
Volvo
Saab
Ford
Fiat
Audi

// While this
for (i = 0; i < cars.length; i++) {
    text=cars[i]+"<br>";
    document.getElementById("demo").innerHTML = text;
}
// Produces :
Audi

因为当你说：

text+=cars[i]+"<br>";

这意味着:(将汽车[i] +＆＃34;
＆＃34;添加到文本中，但保留原值）

text= text + cars[i]+"<br>";

但是当你说：

text=cars[i]+"<br>";

您的意思是每次都用cars[i]+"<br>"替换旧的文本值，这样您最终会得到最后一个值。
++改进：

for (i = 0; i < cars.length; i++) {
    text+=cars[i]+"<br>";
}
document.getElementById("demo").innerHTML = text; // use this outside of the loop

关于jscript中for循环中innerHTML的工作

4 个答案: