Javascript中+=运算符作用及代码输出结果疑问

改赋值后仅输出Mango的原因 #

当你把循环内的+=改为=时，每次循环都会直接覆盖text变量之前存储的所有内容，而非在原有内容基础上追加。
你提供的fruits数组包含4个元素，循环会执行4次：

• i=0时，text被赋值为<li>Banana</li>
• i=1时，text被直接覆盖为<li>Orange</li>，之前存储的Banana相关内容完全丢失
• i=2时，text再次被覆盖为<li>Apple</li>
• i=3时，text最后一次被覆盖为<li>Mango</li>
  循环结束后你再给text拼接</ul>，最终输出自然只保留了最后一次赋值的Mango列表项。

+=运算符的作用 #

JavaScript中+=是追加赋值运算符，核心作用是把运算符右侧的内容，追加到左侧变量原有内容的末尾，再将拼接后的结果重新赋值给左侧变量。
对于字符串类型的变量，text += 内容完全等价于text = text + 内容，属于简化代码的写法。
回到你的示例代码，使用+=时的执行逻辑如下：

• 初始text值为<ul>
• i=0：text变为<ul><li>Banana</li>，保留了ul标签和第一个列表项
• i=1：在现有内容后追加<li>Orange</li>，此时已经包含两个列表项
• i=2：继续追加Apple对应的列表项
• i=3：追加Mango对应的列表项
• 循环结束后再拼接</ul>，最终得到完整的无序列表结构，包含所有水果的列表项。

对比验证示例 #

你可以运行下面的代码直观感受两者的差异：

// 示例1：使用=赋值，每次覆盖原有内容
let str1 = "计数：";
for (let i = 1; i <= 3; i++) {
  str1 = i + "、";
}
console.log(str1); // 输出结果：3、

// 示例2：使用+=赋值，每次在原有内容后追加
let str2 = "计数：";
for (let i = 1; i <= 3; i++) {
  str2 += i + "、";
}
console.log(str2); // 输出结果：计数：1、2、3、

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