17370845950

本文揭示了初学者常犯的语法错误：将花括号 `{}` 误认为是 `do...while` 循环体，实则构成独立代码块，导致循环体为空而后续语句无条件执行。

在 JavaScript 中，do...while 是一种后测试循环（po

do {
  // 循环体（必须是一个语句或语句块）
} while (condition);

关键点在于：while (condition) 必须紧接在循环体之后，且以分号结尾；中间不能插入其他语句或代码块。

而你提供的代码实际被 JavaScript 引擎解析为：

const myArray = [];
let i = 10;

// ✅ 这是一个完整的 do...while 循环（空循环体）
do {
  // 什么也不做
} while (i < 5); // 注意：这里必须有分号！

// ❌ 这是一个独立的、与循环无关的代码块（block statement）
{
  myArray.push(i); // 立即执行：push(10)
  i++;             // 立即执行：i 变为 11
}

由于 i 初始值为 10，10 仅执行一次空体后立即终止；但紧接着的大括号 { ... } 并非循环的一部分，而是顶层作用域中的一个独立代码块（block statement）——它总会被执行，等价于直接写：

myArray.push(10);
i++;

这就是为什么 console.log(myArray) 输出 [10] 的根本原因。

✅ 正确写法（将逻辑放入循环体内）：

const myArray = [];
let i = 10;

do {
  myArray.push(i);
  i++;
} while (i < 5); // 条件为 false → 循环只执行一次（i=10 被 push）

console.log(myArray); // [10]

⚠️ 注意事项：

• do...while 的循环体必须用花括号 {} 包裹多条语句，单条语句虽可省略花括号，但强烈建议始终使用，避免歧义；
• while (condition) 后必须加分号（;），否则可能引发语法错误或意外行为；
• 不要把 while (...) { ... } 的写法错误迁移到 do...while 中——do...while 的花括号属于 do 部分，而非 while；
• 使用现代编辑器（如 VS Code）配合 ESLint 可帮助识别此类结构误用。

? 小结：do...while 的执行流程是确定的，但“看似属于循环”的代码，若未正确置于 do { ... } 内部，就只是普通语句。理解 JavaScript 的语句分隔规则与块级作用域，是避免此类陷阱的关键。