dowhile循环常见错误与代码解析

本文深入剖析了 JavaScript 中 do...while 循环一个极易被忽视却后果严重的语法误区：将 while 条件后独立的花括号代码块误认为是循环体，实则该代码块与循环完全无关、仅执行一次；文章通过清晰的语法拆解、执行流程演示和正误对比，揭示了 do...while 严格遵循 “do Statement while (Expression)” 结构的本质——循环体只能是紧跟 do 后的单个语句（可为复合语句），而 while 后的大括号只是孤立的块级作用域；掌握这一语句与块的语义边界，不仅能避免逻辑bug，更是夯实 JavaScript 控制流理解的关键一步。

本文揭示了初学者常犯的一个典型错误：将独立代码块误认为是 do...while 循环体，导致逻辑执行与预期不符。关键在于理解 JavaScript 中花括号 `{}` 的作用域含义及 do...while 的循环保证语法结构。

你提供的代码看似是一个“空 do 块 + 条件后跟大括号代码”，但实际在 JavaScript 中，do...while 语句只接受一个单一语句（statement）作为循环体——它可以是单条语句（如 i++），也可以是一个复合语句（即用花括号包裹的语句块）。而你代码中的写法：

do {

}
while (i < 5) 
{
  myArray.push(i);
  i++;
}

语法上等价于：

do { } while (i < 5);  // ✅ 一个完整、合法的 do...while 循环（空循环体）
{                      // ❌ 这是一个独立的、与循环无关的块级作用域（block statement）
  myArray.push(i);
  i++;
}

也就是说，while (i < 5) 后面的 { ... } 根本不是循环的一部分，而是紧随其后的独立代码块（block），它会在 do...while 执行完毕后无条件执行一次。

由于初始 i = 10，i < 5 为 false，因此 do { } while (i < 5) 仅执行 do 部分（空操作）一次，随即退出循环；紧接着，独立代码块被执行：myArray.push(10) 和 i++，所以最终输出 [10]。

✅ 正确写法（将逻辑放入 do 块中）：

const myArray = [];
let i = 10;

do {
  myArray.push(i);
  i++;
} while (i < 5); // 注意：此处条件为 false，循环仍会执行一次

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

⚠️ 注意事项：

• do...while 至少执行一次循环体，无论条件真假；
• while 关键字后不能直接跟花括号作为循环体——花括号必须属于 do 子句；
• JavaScript 中的 { ... } 单独出现时是块语句（Block Statement），有自身作用域（ES6+），但它不构成任何控制流结构，只是顺序执行；
• 使用 ESLint 或现代编辑器可高亮此类语法歧义，建议开启 no-lone-blocks 规则预防。

? 总结：do...while 的语法结构是 do Statement while (Expression);，其中 Statement 是唯一循环主体。切勿将 while(...) 后的大括号误当作循环体——那是独立代码块，与循环逻辑完全解耦。理解语句（statement）与块（block）的语义边界，是掌握 JavaScript 控制流的关键基础。

到这里，我们也就讲完了《dowhile循环常见错误与代码解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！