3.6 条件分支：if-else

第 3.4 和 3.5 节已经学习了如何写出会得到值的表达式，其中也包括 score >= 60 这样的布尔值。条件分支会使用这些布尔值来决定程序接下来走哪条路。

有用的程序几乎都需要分支：登录页面判断密码是否正确，购物车为空时显示错误，游戏判断玩家是否获胜。

下面的实验拖动分数，看程序如何进入不同分支。

正在加载交互实验...

最基本的 if

if (condition) {
  // condition 为 true 时才执行
}

例子：

const age = 20;

if (age >= 18) {
  console.log("可以创建账号");
}

{ ... } 里面的代码叫做代码块。只有当条件为 true 时，JavaScript 才会执行这个代码块。

if-else

当你需要“成功走一条路，失败走另一条路”时，使用 else：

const password = "leaflet2026";

if (password.length >= 8) {
  console.log("密码长度符合要求");
} else {
  console.log("密码太短");
}

正在加载概念检查...

else-if 链

情况超过两种时，使用 else if：

const score = 75;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

JavaScript 会从上到下检查条件。只要遇到第一个成立的分支，就执行它，然后跳过后面的所有分支。

所以顺序很重要。如果把 score >= 60 放在 score >= 90 前面，那么 95 分会先匹配到 60 分那一支，永远到不了“优秀”。

网页里的分支

浏览器代码里，条件经常用来守住用户操作：

const email = document.querySelector("#email").value;
const message = document.querySelector("#message");

if (email === "") {
  message.textContent = "请输入邮箱。";
} else if (!email.includes("@")) {
  message.textContent = "邮箱必须包含 @。";
} else {
  message.textContent = "提交成功！";
}

注意：===、!、.includes("@") 这些只是构造条件的工具。if 语句负责根据条件结果决定执行哪段代码。

正在加载概念检查...

嵌套条件

有时一个判断会放在另一个判断里面：

const loggedIn = true;
const isAdmin = false;

if (loggedIn) {
  if (isAdmin) {
    console.log("显示管理员面板");
  } else {
    console.log("显示个人主页");
  }
} else {
  console.log("显示登录页");
}

嵌套条件很有用，但层数太多会难读。逻辑变复杂时，可以把关键条件先起名：

const canSeeAdminDashboard = loggedIn && isAdmin;

正在加载本节练习...

3.6 条件分支：if-else

有用的程序几乎都需要分支：登录页面判断密码是否正确，购物车为空时显示错误，游戏判断玩家是否获胜。

下面的实验拖动分数，看程序如何进入不同分支。

正在加载交互实验...

最基本的 if

if (condition) {
  // condition 为 true 时才执行
}

例子：

const age = 20;

if (age >= 18) {
  console.log("可以创建账号");
}

{ ... } 里面的代码叫做代码块。只有当条件为 true 时，JavaScript 才会执行这个代码块。

if-else

当你需要“成功走一条路，失败走另一条路”时，使用 else：

const password = "leaflet2026";

if (password.length >= 8) {
  console.log("密码长度符合要求");
} else {
  console.log("密码太短");
}

正在加载概念检查...

else-if 链

情况超过两种时，使用 else if：

const score = 75;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

JavaScript 会从上到下检查条件。只要遇到第一个成立的分支，就执行它，然后跳过后面的所有分支。

所以顺序很重要。如果把 score >= 60 放在 score >= 90 前面，那么 95 分会先匹配到 60 分那一支，永远到不了“优秀”。

网页里的分支

浏览器代码里，条件经常用来守住用户操作：

const email = document.querySelector("#email").value;
const message = document.querySelector("#message");

if (email === "") {
  message.textContent = "请输入邮箱。";
} else if (!email.includes("@")) {
  message.textContent = "邮箱必须包含 @。";
} else {
  message.textContent = "提交成功！";
}

注意：===、!、.includes("@") 这些只是构造条件的工具。if 语句负责根据条件结果决定执行哪段代码。

正在加载概念检查...

嵌套条件

有时一个判断会放在另一个判断里面：

const loggedIn = true;
const isAdmin = false;

if (loggedIn) {
  if (isAdmin) {
    console.log("显示管理员面板");
  } else {
    console.log("显示个人主页");
  }
} else {
  console.log("显示登录页");
}

嵌套条件很有用，但层数太多会难读。逻辑变复杂时，可以把关键条件先起名：

const canSeeAdminDashboard = loggedIn && isAdmin;

正在加载本节练习...