JavaScript中这段循环代码里的+=运算符具体作用是什么？

嘿，我来给你把这段代码里的+=讲明白～你已经知道a += b等价于a = a + b，这个基础是对的，咱们就从这个点延伸到你的代码里。

先把你的代码贴出来方便分析：

var i; 
for (i = 0; i < 10; i++) { 
  document.getElementById("demo").innerHTML += i + "<br>"; 
} 
<p id="demo"></p>

核心逻辑拆解 #

这段代码的目的是把0到9的数字逐个输出到id="demo"的<p>标签里，每个数字占一行。而+=在这里的关键作用是追加内容，而不是覆盖原有内容：

• 第一次循环时，i=0，此时demo元素的innerHTML是空的（因为一开始<p id="demo"></p>里没有内容）。执行innerHTML += 0 + "<br>"就等价于innerHTML = "" + "0<br>"，所以demo里的内容变成了0<br>。
• 第二次循环i=1，此时innerHTML已经是0<br>了，执行+=就变成innerHTML = "0<br>" + "1<br>"，内容更新为0<br>1<br>。
• 以此类推，每一次循环都会把当前的i值加上换行标签<br>，追加到demo元素已有的HTML内容后面。

如果把这里的+=换成=会怎么样？那每次循环都会直接把i + "<br>"赋值给innerHTML，最后循环结束后，demo里只会剩下9<br>——因为前面的内容都被覆盖掉了。

简单说，这里的+=就是让我们在不丢失已有内容的前提下，不断往目标元素里添加新的HTML片段，完美实现了循环输出内容的需求～

内容的提问来源于stack exchange，提问作者Reza