垦荒学园 - 以垦荒之心，赴成长之约

切换主题

JavaScript 条件语句 ​

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

条件语句的基本概念 ​

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

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

if 语句 ​

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

基本语法 ​

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

示例 ​

javascript
let age = 18;

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

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

if...else 语句 ​

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

基本语法 ​

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

示例 ​

javascript
let age = 16;

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

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

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

基本语法 ​

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

示例 ​

javascript
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 语句 ​

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

示例 ​

javascript
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 的替代方案，特别适用于多个固定值的比较。

基本语法 ​

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

示例 ​

javascript
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 都不匹配时执行
javascript
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 语句的简写形式，用于简单的条件判断。

基本语法 ​

javascript
条件 ? 值1 : 值2

示例 ​

javascript
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：

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

真值（Truthy Values） ​

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

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

示例 ​

javascript
// 这些条件都会被视为 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("会执行");

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

逻辑与（&&） ​

javascript
let age = 25;
let hasLicense = true;

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

逻辑或（||） ​

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

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

逻辑非（!） ​

javascript
let isOffline = false;

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

短路求值 ​

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

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

条件语句的最佳实践 ​

1. 使用适当的条件语句 ​

javascript
// 对于多个固定值的比较，使用 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. 避免深层嵌套 ​

javascript
// 不好的写法
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） ​

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

4. 合理使用三元运算符 ​

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

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

实际应用示例 ​

用户权限检查系统 ​

javascript
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);

成绩等级评定系统 ​

javascript
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 的循环语句。

本站内容仅供学习和研究使用。

Copyright 2025 垦荒教程 kenhuang.com All Rights Reserved. 备案号：粤ICP备17084064号-3 | 免责声明