Skip to content

条件判断

if/else、switch、三元运算符、真值/假值与短路求值。

你将学到

  • if、else if 和 else 语句
  • 多分支的 switch 语句
  • 简洁的三元运算符
  • JavaScript 中的真值与假值
  • && 和 || 的短路求值

概念讲解

if / else if / else

最基本的分支结构:

const score = 85;

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

switch

当需要将一个值与多个常量比较时使用 switch。务必加 break,否则会穿透到下一个 case:

const day = "Monday";
switch (day) {
  case "Monday":
  case "Tuesday":
    console.log("Start of week");
    break;
  case "Friday":
    console.log("Almost weekend");
    break;
  default:
    console.log("Midweek");
}

三元运算符

一种简洁的 if/else,会返回值:

const age = 20;
const status = age >= 18 ? "adult" : "minor";

嵌套三元可行但损害可读性——复杂逻辑请用 if/else。

真值与假值

在布尔上下文中,以下值是假值:false、0、""、null、undefined、NaN、0n。其余都是真值——包括 "0"、[] 和 {}。

if ("0") console.log("runs");     // 字符串是真值(即使是 "0")
if ([]) console.log("runs");      // 数组是真值(即使为空)
if (0) console.log("skipped");    // 0 是假值

短路求值

&& 返回第一个假值(或全真时的最后一个值)。|| 返回第一个真值。这对默认值和守卫很有用:

const config = { timeout: 0 };
const timeout = config.timeout || 3000; // 3000——但 0 是有效超时!

// 这种情况用 ??(空值合并)
const safeTimeout = config.timeout ?? 3000; // 0——只有 null/undefined 才用默认值

当 0 或 "" 是有效值时优先用 ??(ES2020),因为 || 会把它们当假值。

示例代码

              // if / else if / else
function grade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "F";
}
console.log("Grade for 85:", grade(85));

// 三元运算符
const hour = 14;
const period = hour < 12 ? "morning" : hour < 18 ? "afternoon" : "evening";
console.log("It is", period);

// 短路求值做默认值
const user = { name: "", age: 0 };
const displayName = user.name || "Anonymous"; // "Anonymous"——空字符串是假值
const displayAge = user.age ?? 18;             // 0——空值合并保留 0
console.log(displayName, displayAge);

// switch 带有意穿透分组
function getDayType(day) {
  switch (day) {
    case "Saturday":
    case "Sunday":
      return "weekend";
    default:
      return "weekday";
  }
}
console.log("Saturday is a", getDayType("Saturday"));

展示了 if/else 链、嵌套三元、短路 || 做默认值、空值合并 ?? 保留 0 和空字符串,以及带故意穿透的 switch。

动手试一试

常见错误

错误写法

当 0 或空字符串是有效值时用 || 做默认值

正确做法

|| 会把 0、'' 和 false 当假值。使用空值合并运算符 ??(ES2020),它只在 null 或 undefined 时才回退默认值。

错误写法

在 switch 中忘记 break

正确做法

没有 break 会穿透到下一个 case。除非有意穿透,否则始终加 break(或 return)。如示例所示,可以有意识地分组 case。

相关资源

相关速查表

练习 条件判断

2 个练习

练习 条件判断

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误