0Pricing
Frontend Academy · 课时

控制流：if、else、switch、for、while

使用 if/else 和 switch 进行分支，使用 for 和 while 循环，并用 break 和 continue 控制迭代。

控制流：if、else、switch、for、while 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是控制流

控制流决定哪些代码会运行以及运行多少次。JavaScript 提供条件语句（if/else、switch）和循环（for、while、do/while），根据条件和数据引导执行路径。

if / else if / else

最基础的条件语句。括号中的条件会被判断为真值或假值。多个条件可以通过 else if 链接起来。最后的 else 是用于兜底的回退分支。

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

三元运算符

三元运算符是简洁的内联 if/else：condition ? trueValue : falseValue。它适合用于简单赋值和 JSX 表达式。请避免嵌套三元运算符，因为代码很快就会变得难以阅读。

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

switch 语句

switch 使用严格相等来将一个值与多个 case 进行比较。在每个 case 后使用 break，以防止继续执行后续分支。default 用于处理没有匹配的值。

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

for 循环

经典的 C 风格 for 循环：初始化；条件；递增。它非常适合执行已知次数的迭代，或按索引遍历数组。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

for...of 循环

for...of 会遍历任意可迭代对象的值（数组、字符串、映射和集合）。如果不需要索引，它比基于索引的 for 循环更简洁。

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

for...in 循环

for...in 会遍历对象中可枚举的属性键。不要将它用于数组，请改用 for...of 或数组方法。

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

while 循环

while 循环会在其条件为真值时持续执行。当您无法预先知道迭代次数时，可以使用它——例如，持续读取输入，直到用户输入有效值。

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

do...while 循环

do...while 会先至少执行一次循环体，然后再检查条件。当您必须先执行循环体才能判断退出条件时，它非常有用。

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break 和 continue

break 会立即退出当前循环。continue 会跳过当前迭代的剩余部分，直接进入下一次迭代。两者都适用于 for、while 和 do/while 循环。

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

短路求值

&& 返回第一个假值，或者返回最后一个值。|| 返回第一个真值，或者返回最后一个值。??（空值合并运算符）只有在左侧为 null 或 undefined 时，才会返回右侧的值。

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

快速检查

哪种循环可以保证其循环体<​strong>至少执行一次？

回顾：JavaScript 控制流

使用 if/else 进行分支。使用 switch 处理多个离散值。使用 for 循环执行已知次数的迭代。使用 for...of 遍历可迭代对象。使用 while 处理迭代次数未知的情况。使用 do...while 确保至少执行一次。使用短路运算符编写简洁的条件表达式。

常见问题解答

「控制流：if、else、switch、for、while」课时是免费的吗？

是的 — 「控制流：if、else、switch、for、while」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「控制流：if、else、switch、for、while」这节课中我会学到什么？

使用 if/else 和 switch 进行分支，使用 for 和 while 循环，并用 break 和 continue 控制迭代。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「控制流：if、else、switch、for、while」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 变量：let、const、var 与作用域
  2. 数据类型：string、number、boolean、null、undefined
  3. 函数：声明、表达式与箭头函数
  4. 控制流：if、else、switch、for、while
← 返回 Frontend Academy