JavaScript If...Else 语句详解

条件语句是编程中的基本构建块，用于基于不同条件执行不同的代码路径。在 JavaScript 中，If...Else 语句是最常用的条件控制结构，它允许程序根据条件的真假值做出决策。

学习要点： 本章将详细介绍 if 语句、if...else 语句、if...else if...else 语句的语法和使用方法，并通过大量实例演示它们在实际开发中的应用。

JavaScript 条件语句概述

在编写代码时，经常需要根据不同的条件执行不同的操作。JavaScript 提供了以下几种条件语句来实现这种逻辑：

  • if 语句 - 只有当指定条件为 true 时执行代码
  • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if...else if....else 语句 - 用于在多个条件中选择一个代码块执行
  • switch 语句 - 用于在多个选项中选择一个代码块执行（将在下一章介绍）
  • 三元运算符 - 简化的条件表达式

if 语句

if 语句是最基本的条件语句，只有当指定条件为 true 时才会执行相应的代码块。

语法

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

实例演示

// 简单的 if 语句示例
let age = 18;

if (age >= 18) {
    console.log("您已成年，可以进入网站。");
}

// 检查变量是否存在
let username = "张三";

if (username) {
    console.log("欢迎，" + username);
}

// 使用比较运算符
let score = 85;

if (score >= 60) {
    console.log("恭喜！您通过了考试。");
}

// 使用逻辑运算符
let isLoggedIn = true;
let hasPermission = true;

if (isLoggedIn && hasPermission) {
    console.log("您有权限访问此页面。");
}

提示： 如果代码块只有一行语句，可以省略花括号，但为了代码清晰和避免错误，建议始终使用花括号。

if...else 语句

if...else 语句在条件为 true 时执行一个代码块，在条件为 false 时执行另一个代码块。

语法

if (condition) {
    // 当条件为 true 时执行的代码
} else {
    // 当条件为 false 时执行的代码
}

实例演示

// 基本的 if...else 语句
let time = 15;

if (time < 18) {
    console.log("Good day");
} else {
    console.log("Good evening");
}

// 用户权限检查
let userRole = "guest";

if (userRole === "admin") {
    console.log("欢迎管理员！");
} else {
    console.log("欢迎访客！");
}

// 数字奇偶性判断
let number = 7;

if (number % 2 === 0) {
    console.log(number + " 是偶数");
} else {
    console.log(number + " 是奇数");
}

// 表单验证示例
let email = "user@example.com";

if (email.includes("@")) {
    console.log("邮箱格式正确");
} else {
    console.log("请输入有效的邮箱地址");
}

if...else if...else 语句

当需要检查多个条件时，可以使用 if...else if...else 语句。它会按顺序检查每个条件，执行第一个为 true 的条件对应的代码块。

语法

if (condition1) {
    // 当条件1为 true 时执行的代码
} else if (condition2) {
    // 当条件2为 true 时执行的代码
} else if (condition3) {
    // 当条件3为 true 时执行的代码
} else {
    // 当所有条件都不为 true 时执行的代码
}

实例演示

// 根据时间问候
let hour = new Date().getHours();
let greeting;

if (hour < 10) {
    greeting = "Good morning";
} else if (hour >= 10 && hour < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

console.log(greeting);

// 成绩等级评定
let score = 85;
let grade;

if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else if (score >= 70) {
    grade = "C";
} else if (score >= 60) {
    grade = "D";
} else {
    grade = "F";
}

console.log("您的成绩等级是: " + grade);

// 用户角色权限管理
let role = "moderator";
let permissions;

if (role === "admin") {
    permissions = ["read", "write", "delete", "manage_users"];
} else if (role === "moderator") {
    permissions = ["read", "write", "delete"];
} else if (role === "user") {
    permissions = ["read", "write"];
} else {
    permissions = ["read"];
}

console.log("您的权限: " + permissions.join(", "));

注意： else if 语句会按顺序检查条件，一旦找到第一个为 true 的条件，就会执行对应的代码块并跳过其余条件检查。

嵌套 if 语句

可以在 if 或 else 代码块内部再使用 if 语句，这称为嵌套 if 语句。嵌套 if 语句用于处理更复杂的条件逻辑。

实例演示

// 嵌套 if 语句示例
let age = 25;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("您可以驾驶汽车");
    } else {
        console.log("您已成年但没有驾照，不能驾驶");
    }
} else {
    console.log("您未成年，不能驾驶");
}

// 更复杂的嵌套示例
let isMember = true;
let orderAmount = 150;
let discount = 0;

if (isMember) {
    if (orderAmount > 200) {
        discount = 20;
    } else if (orderAmount > 100) {
        discount = 10;
    } else {
        discount = 5;
    }
} else {
    if (orderAmount > 200) {
        discount = 10;
    } else {
        discount = 0;
    }
}

console.log("您的折扣是: " + discount + "%");

// 登录验证示例
let username = "admin";
let password = "123456";
let isVerified = true;

if (username === "admin") {
    if (password === "123456") {
        if (isVerified) {
            console.log("登录成功！");
        } else {
            console.log("请先验证您的账户");
        }
    } else {
        console.log("密码错误");
    }
} else {
    console.log("用户名不存在");
}

最佳实践： 虽然嵌套 if 语句很有用，但过度嵌套会使代码难以理解和维护。如果嵌套层级超过3层，建议考虑重构代码。

三元运算符

三元运算符是 if...else 语句的简洁形式，适用于简单的条件判断。

语法

condition ? expression1 : expression2

实例演示

// 基本用法
let age = 20;
let canVote = age >= 18 ? "可以投票" : "不能投票";
console.log(canVote);

// 与 if...else 对比
let time = 11;
let greeting = time < 12 ? "Good morning" : "Good day";
console.log(greeting);

// 嵌套三元运算符
let score = 85;
let result = score >= 90 ? "优秀" :
             score >= 80 ? "良好" :
             score >= 70 ? "中等" :
             score >= 60 ? "及格" : "不及格";
console.log("成绩评定: " + result);

// 函数返回值的条件赋值
function getFee(isMember) {
    return isMember ? "$2.00" : "$10.00";
}

console.log(getFee(true));  // $2.00
console.log(getFee(false)); // $10.00
console.log(getFee(null));  // $10.00

注意： 虽然三元运算符很简洁，但过度使用或嵌套会使代码难以阅读。对于复杂的条件逻辑，建议使用 if...else 语句。

逻辑运算符在条件语句中的应用

逻辑运算符（&&, ||, !）经常与条件语句结合使用，创建更复杂的条件表达式。

实例演示

// 使用 && (AND) 运算符
let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("您可以驾驶");
}

// 使用 || (OR) 运算符
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
    console.log("今天是休息日");
}

// 使用 ! (NOT) 运算符
let isLoggedIn = false;

if (!isLoggedIn) {
    console.log("请先登录");
}

// 组合使用逻辑运算符
let temperature = 25;
let isSunny = true;
let isWeekendDay = true;

if ((temperature > 20 && isSunny) || isWeekendDay) {
    console.log("适合户外活动");
}

// 使用短路求值
let user = {
    name: "张三",
    preferences: {
        theme: "dark"
    }
};

// 安全地访问嵌套属性
if (user && user.preferences && user.preferences.theme) {
    console.log("用户主题: " + user.preferences.theme);
}

// 使用可选链操作符 (ES2020)
if (user?.preferences?.theme) {
    console.log("用户主题: " + user.preferences.theme);
}

实际应用案例

案例 1：表单验证

// 表单验证函数
function validateForm(username, email, password) {
    let errors = [];

    // 用户名验证
    if (!username) {
        errors.push("用户名不能为空");
    } else if (username.length < 3) {
        errors.push("用户名至少需要3个字符");
    }

    // 邮箱验证
    if (!email) {
        errors.push("邮箱不能为空");
    } else if (!email.includes("@")) {
        errors.push("请输入有效的邮箱地址");
    }

    // 密码验证
    if (!password) {
        errors.push("密码不能为空");
    } else if (password.length < 6) {
        errors.push("密码至少需要6个字符");
    }

    // 返回验证结果
    if (errors.length === 0) {
        return { success: true, message: "验证通过" };
    } else {
        return { success: false, message: "验证失败", errors: errors };
    }
}

// 测试表单验证
let result = validateForm("john", "john@example.com", "123456");
console.log(result);

案例 2：价格计算器

// 价格计算函数
function calculatePrice(quantity, isMember, couponCode) {
    let basePrice = 10; // 商品基础价格
    let total = basePrice * quantity;
    let discount = 0;

    // 会员折扣
    if (isMember) {
        if (quantity > 10) {
            discount = 20; // 会员购买10件以上享受20%折扣
        } else {
            discount = 10; // 会员享受10%折扣
        }
    }

    // 优惠券折扣
    if (couponCode === "SAVE10") {
        discount = Math.max(discount, 10); // 取最大折扣
    } else if (couponCode === "SAVE20") {
        discount = Math.max(discount, 20);
    }

    // 应用折扣
    if (discount > 0) {
        total = total * (1 - discount / 100);
    }

    // 运费计算
    if (total < 50) {
        total += 5; // 添加运费
    }

    return total.toFixed(2);
}

// 测试价格计算
console.log("总价格: $" + calculatePrice(5, true, "SAVE10"));

常见错误和最佳实践

常见错误

  • 使用赋值运算符(=)而不是比较运算符(===)： if (x = 5) 总是为 true
  • 忘记花括号： 虽然单行语句可以省略花括号，但这容易导致错误
  • 深度嵌套： 过度嵌套会使代码难以阅读和维护
  • 忽略边界条件： 没有正确处理边界情况

最佳实践

  • 始终使用花括号，即使只有一行代码
  • 使用严格相等运算符(===)而不是宽松相等运算符(==)
  • 保持条件简单明了，复杂的条件可以提取为变量或函数
  • 优先使用早期返回模式减少嵌套
  • 为复杂的条件逻辑添加注释

重构示例：减少嵌套

// 重构前：深度嵌套
function processOrder(order) {
    if (order) {
        if (order.items && order.items.length > 0) {
            if (order.customer && order.customer.isActive) {
                // 处理订单
                return "订单处理成功";
            } else {
                return "客户账户未激活";
            }
        } else {
            return "订单中没有商品";
        }
    } else {
        return "无效的订单";
    }
}

// 重构后：使用早期返回
function processOrderRefactored(order) {
    if (!order) return "无效的订单";
    if (!order.items || order.items.length === 0) return "订单中没有商品";
    if (!order.customer || !order.customer.isActive) return "客户账户未激活";

    // 处理订单
    return "订单处理成功";
}

本章总结

  • if 语句用于在条件为 true 时执行代码块
  • if...else 语句提供了条件为 false 时的替代执行路径
  • if...else if...else 语句允许检查多个条件
  • 嵌套 if 语句可以处理复杂的条件逻辑
  • 三元运算符提供了 if...else 的简洁替代方案
  • 逻辑运算符(&&, ||, !)用于创建复杂的条件表达式
  • 遵循最佳实践可以编写出更清晰、更易维护的条件语句
上一章: JavaScript 比较和逻辑运算符 下一章: JavaScript switch 语句