垦荒学园
  • 中文

      • JavaScript 条件语句

      条件语句是编程语言中的基本控制结构，用于根据不同条件执行不同的代码块。在 JavaScript 中，条件语句允许程序根据特定条件的真假来决定执行哪部分代码。掌握条件语句是编写动态和交互式程序的关键。在本章节中，我们将深入学习 JavaScript 中的各种条件语句。

      条件语句的基本概念

      条件语句基于布尔逻辑，根据条件表达式的值（true 或 false）来决定程序的执行路径。JavaScript 中的条件语句主要包括：

      1. if 语句
      2. if...else 语句
      3. if...else if...else 语句
      4. switch 语句
      5. 三元运算符

      if 语句

      最基本的条件语句，当条件为 true 时执行代码块。

      基本语法

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

      示例

      let age = 18;

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

// 单行语句可以省略花括号（不推荐）
if (age >= 18) console.log("您已成年");

      if...else 语句

      当条件为 true 时执行一个代码块，为 false 时执行另一个代码块。

      基本语法

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

      示例

      let age = 16;

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

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

      用于检查多个条件，按顺序执行第一个为 true 的条件对应的代码块。

      基本语法

      if (条件1) {
    // 条件1为 true 时执行的代码
} else if (条件2) {
    // 条件2为 true 时执行的代码
} else if (条件3) {
    // 条件3为 true 时执行的代码
} else {
    // 所有条件都为 false 时执行的代码
}

      示例

      let score = 85;

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

      嵌套的 if 语句

      条件语句可以嵌套使用，即在一个条件语句内部包含另一个条件语句。

      示例

      let age = 25;
let hasLicense = true;

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

      switch 语句

      switch 语句用于根据不同的条件值执行不同的代码块，是 if...else if...else 的替代方案，特别适用于多个固定值的比较。

      基本语法

      switch (表达式) {
    case 值1:
        // 表达式等于值1时执行的代码
        break;
    case 值2:
        // 表达式等于值2时执行的代码
        break;
    case 值3:
        // 表达式等于值3时执行的代码
        break;
    default:
        // 所有case都不匹配时执行的代码
}

      示例

      let day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    case "Wednesday":
        console.log("星期三");
        break;
    case "Thursday":
        console.log("星期四");
        break;
    case "Friday":
        console.log("星期五");
        break;
    case "Saturday":
        console.log("星期六");
        break;
    case "Sunday":
        console.log("星期日");
        break;
    default:
        console.log("无效的日期");
}

      switch 的注意事项

      1. break 语句：每个 case 后面通常需要 break 语句，否则会继续执行下面的 case（称为"fall-through"）
      2. default 分支：可选，当所有 case 都不匹配时执行
      let fruit = "apple";

switch (fruit) {
    case "apple":
    case "banana":
    case "orange":
        console.log("这是水果");
        break;
    case "carrot":
    case "potato":
        console.log("这是蔬菜");
        break;
    default:
        console.log("未知食物");
}

      三元运算符（条件运算符）

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

      基本语法

      条件 ? 值1 : 值2

      示例

      let age = 20;
let status = age >= 18 ? "成年人" : "未成年人";
console.log(status); // "成年人"

// 三元运算符可以嵌套
let score = 85;
let grade = score >= 90 ? "优秀" : 
           score >= 80 ? "良好" : 
           score >= 70 ? "中等" : 
           score >= 60 ? "及格" : "不及格";
console.log(grade); // "良好"

      条件表达式中的真值和假值

      在 JavaScript 中，除了布尔值 true 和 false，其他值在条件判断中也会被转换为布尔值：

      假值（Falsy Values）

      以下值在条件判断中被视为 false：

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

      真值（Truthy Values）

      除了假值以外的所有值都被视为 true：

      true
非零数字（包括负数）
非空字符串
对象（包括空对象）
数组（包括空数组）
函数

      示例

      // 这些条件都会被视为 false
if (false) console.log("不会执行");
if (0) console.log("不会执行");
if ("") console.log("不会执行");
if (null) console.log("不会执行");
if (undefined) console.log("不会执行");
if (NaN) console.log("不会执行");

// 这些条件都会被视为 true
if (true) console.log("会执行");
if (1) console.log("会执行");
if ("hello") console.log("会执行");
if ({}) console.log("会执行");
if ([]) console.log("会执行");

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

      逻辑与（&&）

      let age = 25;
let hasLicense = true;

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

      逻辑或（||）

      let userType = "admin";
let isLoggedIn = true;

if (userType === "admin" || isLoggedIn) {
    console.log("可以访问");
}

      逻辑非（!）

      let isOffline = false;

if (!isOffline) {
    console.log("在线状态");
}

      短路求值

      // 逻辑与短路：如果第一个条件为 false，则不会检查第二个条件
let user = null;
if (user && user.name) {
    console.log(user.name);
}

// 逻辑或短路：如果第一个条件为 true，则不会检查第二个条件
let defaultName = "匿名用户";
let userName = user && user.name || defaultName;

      条件语句的最佳实践

      1. 使用适当的条件语句

      // 对于多个固定值的比较，使用 switch
let status = "pending";

switch (status) {
    case "pending":
        handlePending();
        break;
    case "approved":
        handleApproved();
        break;
    case "rejected":
        handleRejected();
        break;
    default:
        handleUnknown();
}

// 对于范围比较，使用 if...else if
let score = 85;

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

      2. 避免深层嵌套

      // 不好的写法
if (user) {
    if (user.isActive) {
        if (user.hasPermission) {
            // 执行操作
        }
    }
}

// 好的写法
if (user && user.isActive && user.hasPermission) {
    // 执行操作
}

// 或者提前返回
if (!user) return;
if (!user.isActive) return;
if (!user.hasPermission) return;
// 执行操作

      3. 使用卫语句（Guard Clauses）

      function processUser(user) {
    // 卫语句：提前处理异常情况
    if (!user) {
        console.log("用户不存在");
        return;
    }
    
    if (!user.isActive) {
        console.log("用户未激活");
        return;
    }
    
    // 正常处理逻辑
    console.log("处理用户：" + user.name);
}

      4. 合理使用三元运算符

      // 简单情况使用三元运算符
const message = isLoggedIn ? "欢迎回来" : "请登录";

// 复杂情况使用 if 语句
if (userType === "admin") {
    showAdminPanel();
    enableAllFeatures();
} else if (userType === "user") {
    showUserPanel();
    enableBasicFeatures();
} else {
    showGuestPanel();
    enableLimitedFeatures();
}

      实际应用示例

      用户权限检查系统

      function checkUserAccess(user, resource) {
    // 检查用户是否存在
    if (!user) {
        return { allowed: false, message: "用户未登录" };
    }
    
    // 检查用户是否激活
    if (!user.isActive) {
        return { allowed: false, message: "用户账户未激活" };
    }
    
    // 根据用户角色检查权限
    switch (user.role) {
        case "admin":
            return { allowed: true, message: "管理员权限" };
        
        case "editor":
            if (resource.type === "article" || resource.type === "image") {
                return { allowed: true, message: "编辑权限" };
            } else {
                return { allowed: false, message: "权限不足" };
            }
        
        case "viewer":
            if (resource.type === "article" && resource.isPublic) {
                return { allowed: true, message: "查看权限" };
            } else {
                return { allowed: false, message: "权限不足" };
            }
        
        default:
            return { allowed: false, message: "未知用户角色" };
    }
}

// 使用示例
const user = {
    name: "张三",
    role: "editor",
    isActive: true
};

const resource = {
    type: "article",
    isPublic: true
};

const access = checkUserAccess(user, resource);
console.log(access.message);

      成绩等级评定系统

      function getGrade(score, subject) {
    // 输入验证
    if (typeof score !== 'number' || score < 0 || score > 100) {
        return "无效分数";
    }
    
    // 根据科目调整评分标准
    let grade;
    
    if (subject === "数学" || subject === "物理") {
        // 理科评分标准
        if (score >= 95) {
            grade = "A+";
        } else if (score >= 90) {
            grade = "A";
        } else if (score >= 85) {
            grade = "B+";
        } else if (score >= 80) {
            grade = "B";
        } else if (score >= 75) {
            grade = "C+";
        } else if (score >= 70) {
            grade = "C";
        } else if (score >= 60) {
            grade = "D";
        } else {
            grade = "F";
        }
    } else {
        // 文科评分标准
        if (score >= 90) {
            grade = "A";
        } else if (score >= 85) {
            grade = "B+";
        } else if (score >= 80) {
            grade = "B";
        } else if (score >= 75) {
            grade = "C+";
        } else if (score >= 70) {
            grade = "C";
        } else if (score >= 60) {
            grade = "D";
        } else {
            grade = "F";
        }
    }
    
    // 添加评语
    const comment = score >= 80 ? "优秀" : 
                   score >= 70 ? "良好" : 
                   score >= 60 ? "及格" : "需要努力";
    
    return {
        grade: grade,
        comment: comment,
        score: score
    };
}

// 使用示例
console.log(getGrade(95, "数学")); // { grade: "A+", comment: "优秀", score: 95 }
console.log(getGrade(85, "语文")); // { grade: "B+", comment: "良好", score: 85 }

      总结

      JavaScript 条件语句的核心要点：

      1. if 语句：最基本的条件判断
      2. if...else 语句：二选一的条件判断
      3. if...else if...else 语句：多条件判断
      4. switch 语句：多值选择的条件判断
      5. 三元运算符：简洁的条件表达式
      6. 真值和假值：JavaScript 中的布尔转换规则
      7. 逻辑运算符：组合多个条件
      8. 最佳实践：避免深层嵌套、使用卫语句等

      掌握条件语句是编写动态 JavaScript 程序的基础。在下一章节中，我们将学习 JavaScript 的循环语句。