JS 流程控制：条件与循环核心用法

else-if 可以接更多分支。

const x = 4;
if (x === 10) {
  console.log("x is 10");
} else if (x > 10) {
  console.log("x is greater than 10");
} else {
  console.log("x is less than 10");
}

输出：x is less than 10。

逻辑运算符：|| (或) 和 && (且) 。当条件复合时，需要注意整个表达式的真值。

const x = 4;
const y = 10;
if (x > 5 || y > 10) {
  console.log("x is greater than 5 or y is greater than 10");
}

此时 y=10 不大于10，所以条件为假，无输出。把 y 改成 11 再试：

const x = 4;
const y = 11;
if (x > 5 || y > 10) {
  console.log("x is greater than 5 or y is greater than 10");
}

输出：x is greater than 5 or y is greater than 10。

使用 && 要求两边都真。

const x = 6;
const y = 11;
if (x > 5 && y > 10) {
  console.log("x is greater than 5 and y is greater than 10");
}

输出：x is greater than 5 and y is greater than 10。

二、三目运算符

一种简写 if-else 的方式：条件 ? 真值 : 假值。比如根据 x 是否大于 10 决定 color：

const x = 10;
const color = x > 10 ? "red" : "blue";
console.log(color); // "blue"

把 x 改成 11，color 变为 "red"。三目运算符适合简单的赋值，但嵌套过深会影响可读性。

const x = 11;
const color = x > 10 ? "red" : "blue";
console.log(color); // "red"

三、switch 语句

当需要判断多个固定值时，switch 比一连串 if-else 更清晰。

const x = 11;
const color = x > 10 ? "red" : "blue";
switch (color) {
  case "red":
    console.log("color is red");
    break;
  case "blue":
    console.log("color is blue");
    break;
  default:
    console.log("color is not red or blue");
}

注意每个 case 末尾必须写 break，否则会穿透执行下一个 case 的代码，直到遇到 break 或 switch 结束。

四、for 和 while 循环

for 循环三要素：初始化变量；条件；每次循环后更新。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

输出 0 到 9（i=10 时条件不满足退出）。改成 <= 会让 10 也输出。

循环体内可以做任何事，比如拼接字符串：

for (let i = 0; i < 10; i++) {
  console.log(`For Loop Number: ${i}`);
}

while 循环需要自己在循环外部初始化变量，内部更新变量，否则死循环。

let i = 0;
while (i < 10) {
  console.log(`While Loop Number: ${i}`);
  i++;
}

遍历数组时，传统 for 配合长度使用，或者更简洁的 for...of。

const todos = [
  { id: 1, text: "Take out trash", isCompleted: true },
  { id: 2, text: "Meeting with boss", isCompleted: true },
  { id: 3, text: "Dentist appt", isCompleted: false },
];
for (let i = 0; i < todos.length; i++) {
  console.log(`${todos[i].text}`);
}
// Take out trash
// Meeting with boss
// Dentist appt

for (let todo of todos) {
  console.log(todo.text);
}
// 同上

for...of 直接拿到数组内每个元素，不用管索引，写起来更干净。如果还需要索引，可以结合 entries() 使用，不过那是后话了。

参考资料

参考视频：JavaScript 快速入门 (BV15L4y1a7or)