本文详解 for 循环中变量累积赋值的常见错误与正确写法，重点解决因重复赋值导致仅显示最后一项的问题，并提供可直接运行的 html+javascript 示例。
本文详解 for 循环中变量累积赋值的常见错误与正确写法，重点解决因重复赋值导致仅显示最后一项的问题，并提供可直接运行的 html+javascript 示例。
在 JavaScript 中，使用 for 循环生成多行内容（如乘法口诀表）时，一个典型误区是：在循环体内用 = 赋值而非 += 累加字符串。这会导致每次迭代都覆盖前一次的值，最终 x 只保留最后一次计算结果（即 "2 × 10 = 20<br>"），从而无法显示完整的 1–10 行。
✅ 正确做法是：
- 在循环外部初始化
x为空字符串（var x = '';）； - 在循环内部使用
+=运算符将新行内容追加到x末尾； - 循环结束后一次性写入 DOM。
以下是完整、可直接运行的示例代码：
<title>2 Times Table</title><p id="table"></p>
<script>
var x = '';
for (var i = 1; i <= 10; i++) {
x += '2 × ' + i + ' = ' + (2 * i) + '<br>';
}
document.getElementById('table').innerHTML = x;
</script>
? 注意事项：
-
x = ...是赋值（会丢弃旧值），而x += ...等价于x = x + ...，实现字符串拼接； - 推荐将
2 * i用括号包裹（(2 * i)），提升可读性与运算优先级安全性； - 若需兼容更老环境或增强可维护性，可用
let x = ''替代var，避免变量提升问题； - 实际项目中，也可考虑使用数组
push()+join('<br>')或模板字符串（ES6+）替代字符串拼接，提高性能与可读性。
掌握这一基础逻辑，能有效避免循环中“只显示最后一项”的高频 Bug，是构建动态列表、表格、日志等场景的关键前提。
