条件语句

Kpsmart2025年3月7日大约 7 分钟

条件语句

条件语句允许根据不同条件执行不同的代码块。本文将介绍if-else和switch语句的语法和使用场景。

if 语句

if 语句是最基本的条件语句，它根据指定条件的布尔值来执行相应的代码块。

基本语法

if (条件) {
    // 当条件为真时执行的代码
}

条件表达式会被转换为布尔值。如果条件为真（truthy），则执行代码块；如果条件为假（falsy），则跳过代码块。

const age = 18;

if (age >= 18) {
    console.log("你已成年");
}

if-else 语句

if-else 语句提供了一个替代方案，当条件为假时执行另一个代码块。

if (条件) {
    // 当条件为真时执行的代码
} else {
    // 当条件为假时执行的代码
}

示例：

const hour = new Date().getHours();

if (hour < 12) {
    console.log("上午好！");
} else {
    console.log("下午好！");
}

if-else if-else 语句

当需要检查多个条件时，可以使用 if-else if-else 语句链。

if (条件1) {
    // 当条件1为真时执行的代码
} else if (条件2) {
    // 当条件1为假且条件2为真时执行的代码
} else if (条件3) {
    // 当条件1和条件2为假且条件3为真时执行的代码
} else {
    // 当所有条件都为假时执行的代码
}

示例：

const score = 85;

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

嵌套的 if 语句

if 语句可以嵌套在另一个 if 或 else 语句中。

if (条件1) {
    // 外层条件为真时执行的代码
    if (条件2) {
        // 内层条件也为真时执行的代码
    }
}

示例：

const age = 25;
const hasLicense = true;

if (age >= 18) {
    console.log("年龄符合驾驶要求");
    
    if (hasLicense) {
        console.log("可以驾驶");
    } else {
        console.log("需要先获取驾照");
    }
} else {
    console.log("年龄不符合驾驶要求");
}

条件表达式的真假值

在 JavaScript 中，以下值在条件语句中被视为假（falsy）：

false
0
"" (空字符串)
null
undefined
NaN

所有其他值，包括所有对象和数组（即使是空的），都被视为真（truthy）。

// 假值示例
if (0) {
    // 这段代码不会执行
}

if ("") {
    // 这段代码不会执行
}

// 真值示例
if (1) {
    console.log("1 是真值");
}

if ("hello") {
    console.log("非空字符串是真值");
}

if ([]) {
    console.log("空数组是真值");
}

if ({}) {
    console.log("空对象是真值");
}

条件（三元）运算符

条件运算符是 if-else 语句的简写形式，常用于简单的条件赋值。

语法

条件 ? 表达式1 : 表达式2

如果条件为真，则返回表达式1的值；否则，返回表达式2的值。

const age = 20;
const status = age >= 18 ? "成年" : "未成年";
console.log(status); // 输出: "成年"

链式三元运算符

三元运算符可以链式使用，类似于 if-else if-else 语句：

const score = 75;
const grade = score >= 90 ? "A" : 
              score >= 80 ? "B" : 
              score >= 70 ? "C" : 
              score >= 60 ? "D" : "F";

console.log(grade); // 输出: "C"

虽然链式三元运算符可以使代码更简洁，但过度使用可能会降低代码的可读性。对于复杂的条件逻辑，建议使用 if-else 语句。

switch 语句

switch 语句用于根据表达式的不同值执行不同的代码块。它是多个 if-else 语句的替代方案，特别适合处理多个可能的条件值。

基本语法

switch (表达式) {
    case 值1:
        // 当表达式等于值1时执行的代码
        break;
    case 值2:
        // 当表达式等于值2时执行的代码
        break;
    case 值3:
        // 当表达式等于值3时执行的代码
        break;
    default:
        // 当表达式不等于任何case值时执行的代码
}

switch 语句使用严格相等（===）比较表达式与 case 值。

示例：

const day = new Date().getDay(); // 0-6，表示周日到周六

switch (day) {
    case 0:
        console.log("星期日");
        break;
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    default:
        console.log("无效的日期");
}

break 语句的重要性

在每个 case 块的末尾使用 break 语句非常重要。如果省略 break，程序将继续执行下一个 case 块，无论其条件是否匹配。这种行为称为"穿透"（fall-through）。

const status = 2;

switch (status) {
    case 1:
        console.log("处理中");
        // 没有break，会继续执行下一个case
    case 2:
        console.log("已完成");
        // 没有break，会继续执行下一个case
    case 3:
        console.log("已发送");
        break;
    default:
        console.log("未知状态");
}
// 输出:
// "已完成"
// "已发送"

利用穿透特性

有时，穿透特性可以有意利用，使多个 case 共享相同的代码：

const day = new Date().getDay();
let typeOfDay;

switch (day) {
    case 0:
    case 6:
        typeOfDay = "周末";
        break;
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        typeOfDay = "工作日";
        break;
    default:
        typeOfDay = "无效日期";
}

console.log(typeOfDay);

多个条件的 case 语句

在 ES6 之前，switch 语句不能直接处理范围条件。但可以通过一些技巧实现：

const score = 85;
let grade;

switch (true) {
    case score >= 90:
        grade = "A";
        break;
    case score >= 80:
        grade = "B";
        break;
    case score >= 70:
        grade = "C";
        break;
    case score >= 60:
        grade = "D";
        break;
    default:
        grade = "F";
}

console.log(grade); // 输出: "B"

这种方法通过将 switch 表达式设为 true，然后在每个 case 中使用返回布尔值的表达式来实现范围条件判断。

if-else 与 switch 的比较

何时使用 if-else

当条件是范围比较（如 >, <, >=, <=）时
当条件是不同类型的表达式时
当只有少数几个条件需要检查时
当条件是复杂的逻辑表达式时

何时使用 switch

当比较的是同一个变量或表达式的多个可能值时
当有大量的条件分支时
当所有条件都是简单的相等比较时
当多个条件需要执行相同的代码时（利用穿透特性）

条件语句的最佳实践

使用花括号：即使代码块只有一行，也建议使用花括号，以提高可读性和避免错误。

// 不推荐
if (age >= 18) console.log("成年");

// 推荐
if (age >= 18) {
    console.log("成年");
}

避免嵌套过深：过多的嵌套会使代码难以阅读和维护。考虑使用提前返回、逻辑运算符或拆分为多个函数。

// 不推荐
function checkAccess(user) {
    if (user) {
        if (user.isActive) {
            if (user.hasPermission) {
                // 处理逻辑
                return true;
            }
        }
    }
    return false;
}

// 推荐
function checkAccess(user) {
    if (!user || !user.isActive || !user.hasPermission) {
        return false;
    }
    // 处理逻辑
    return true;
}

使用有意义的条件：条件应该清晰表达其意图，必要时使用变量或函数提取复杂条件。

// 不推荐
if (user.age >= 18 && user.country === "China" && !user.restricted) {
    // 允许访问
}

// 推荐
const isAdult = user.age >= 18;
const isFromChina = user.country === "China";
const hasNoRestrictions = !user.restricted;
const canAccess = isAdult && isFromChina && hasNoRestrictions;

if (canAccess) {
    // 允许访问
}

注意短路求值：逻辑运算符（&&, ||）可以用于简化条件语句。

// 使用 && 进行条件执行
user.isAdmin && console.log("管理员已登录");

// 使用 || 设置默认值
const name = user.name || "游客";

switch 语句中不要忘记 break 和 default：除非有意使用穿透特性，否则每个 case 后都应该有 break。同时，提供 default 分支处理意外情况。

总结

条件语句是JavaScript中控制程序流程的基本工具：

if 语句用于基于条件执行代码，可以与 else 和 else if 结合使用
条件（三元）运算符提供了简洁的条件赋值语法
switch 语句适用于基于单个表达式的多条件分支

选择合适的条件语句结构可以使代码更清晰、更易于维护。在实际开发中，应根据具体场景选择最合适的条件语句形式，并遵循最佳实践以提高代码质量。

练习

编写一个函数，根据分数（0-100）返回对应的等级（A、B、C、D、F），分别使用 if-else 和 switch 语句实现。
使用条件运算符编写一个函数，判断一个年份是否为闰年。
实现一个简单的计算器函数，根据操作符（+、-、*、/）对两个数进行相应的运算，使用 switch 语句。