跳到主要内容

JavaScript 条件语句

在编程中,我们经常需要根据不同的条件执行不同的代码。JavaScript提供了多种条件语句,让我们能够实现这种逻辑控制。本文将全面介绍JavaScript中的条件语句,帮助你理解如何在代码中做出决策。

什么是条件语句?

条件语句允许我们基于特定条件的真假(布尔值)来执行不同的代码块。简单来说,它们是帮助程序"做决定"的工具。

if 语句

if 语句是最基本的条件语句,它的结构如下:

javascript
if (条件) {
// 如果条件为真,执行这里的代码
}

基本示例

javascript
let hour = 10;

if (hour < 12) {
console.log("早上好!");
}

// 输出: 早上好!

在这个例子中,因为 hour < 12 的条件为真(10小于12),所以执行了大括号中的代码,输出了"早上好!"。

if...else 语句

当我们需要在条件为假时执行另一段代码,可以使用 if...else 语句:

javascript
if (条件) {
// 如果条件为真,执行这里的代码
} else {
// 如果条件为假,执行这里的代码
}

示例

javascript
let hour = 14;

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

// 输出: 下午好!

在这个例子中,因为 hour < 12 的条件为假(14不小于12),所以执行了 else 代码块中的代码,输出"下午好!"。

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

当我们需要检查多个条件时,可以使用 if...else if...else 语句链:

javascript
if (条件1) {
// 如果条件1为真,执行这里的代码
} else if (条件2) {
// 如果条件2为真,执行这里的代码
} else {
// 如果以上条件都为假,执行这里的代码
}

示例

javascript
let hour = 19;

if (hour < 12) {
console.log("早上好!");
} else if (hour < 18) {
console.log("下午好!");
} else {
console.log("晚上好!");
}

// 输出: 晚上好!

在这个例子中,系统先检查 hour < 12,这是假的;然后检查 hour < 18,这也是假的;最后执行 else 代码块,输出"晚上好!"。

提示

你可以根据需要添加任意数量的 else if 代码块,但请记住,过多的条件判断会影响代码的可读性和性能。

逻辑运算符与条件语句

在条件语句中,我们经常使用逻辑运算符来组合或修改条件:

  • && (与): 两个条件都为真时,结果为真
  • || (或): 至少有一个条件为真时,结果为真
  • ! (非): 反转条件的真假值

示例

javascript
let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
console.log("你可以开车");
}

// 输出: 你可以开车

let isHoliday = false;
let isWeekend = true;

if (isHoliday || isWeekend) {
console.log("你不用上班");
}

// 输出: 你不用上班

let isRaining = false;

if (!isRaining) {
console.log("你不需要雨伞");
}

// 输出: 你不需要雨伞

三元运算符

三元运算符是 if...else 语句的简写形式,常用于简单的条件赋值:

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

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

示例

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

这里,因为 age >= 18 为真,所以 status 被赋值为 '成年人'。

警告

虽然三元运算符可以使代码更简洁,但嵌套使用多个三元运算符可能导致代码难以理解,应谨慎使用。

switch 语句

当有多个可能的条件值时,使用 switch 语句通常比使用多个 if...else if 语句更清晰:

javascript
switch (表达式) {
case1:
// 当表达式的值等于值1时执行的代码
break;
case2:
// 当表达式的值等于值2时执行的代码
break;
default:
// 当表达式的值与以上值都不匹配时执行的代码
}

示例

javascript
let day = 3;
let dayName;

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

console.log(dayName); // 输出: 星期三
备注

break 语句非常重要!如果省略,代码将继续执行下一个 case 中的代码,这通常不是我们想要的结果。这种特性称为"fall-through"。

多个 case 共用一个代码块

在某些情况下,你可能希望多个值执行相同的代码,这时可以将它们合并:

javascript
let day = 6;
let type;

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

console.log(type); // 输出: 周末

实际应用场景

场景一:用户验证

以下是一个简单的用户登录验证系统:

javascript
function validateLogin(username, password) {
const correctUsername = "admin";
const correctPassword = "12345";

if (username === "" || password === "") {
return "用户名和密码不能为空";
} else if (username !== correctUsername) {
return "用户名不正确";
} else if (password !== correctPassword) {
return "密码不正确";
} else {
return "登录成功";
}
}

console.log(validateLogin("admin", "12345")); // 输出: 登录成功
console.log(validateLogin("", "12345")); // 输出: 用户名和密码不能为空
console.log(validateLogin("admin", "wrong")); // 输出: 密码不正确

场景二:电商折扣计算

使用条件语句计算购物折扣:

javascript
function calculateDiscount(totalAmount, customerType, isHoliday) {
let discount = 0;

switch(customerType) {
case "vip":
discount = 0.2; // VIP客户享受20%折扣
break;
case "regular":
discount = 0.1; // 常规客户享受10%折扣
break;
default:
discount = 0.05; // 新客户享受5%折扣
}

// 如果是假日,所有折扣减半
if (isHoliday) {
discount = discount / 2;
}

// 如果购物金额超过1000,额外增加5%折扣
if (totalAmount > 1000) {
discount += 0.05;
}

return totalAmount * (1 - discount);
}

let finalPrice = calculateDiscount(1200, "vip", false);
console.log(`最终价格: $${finalPrice}`); // 输出: 最终价格: $900

场景三:简单计算器

使用 switch 语句实现简单计算器:

javascript
function calculate(num1, operator, num2) {
let result;

switch(operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 === 0) {
return "错误:除数不能为零";
}
result = num1 / num2;
break;
default:
return "错误:无效的运算符";
}

return `${num1} ${operator} ${num2} = ${result}`;
}

console.log(calculate(10, '+', 5)); // 输出: 10 + 5 = 15
console.log(calculate(10, '-', 5)); // 输出: 10 - 5 = 5
console.log(calculate(10, '*', 5)); // 输出: 10 * 5 = 50
console.log(calculate(10, '/', 0)); // 输出: 错误:除数不能为零

总结

条件语句是JavaScript编程的基础,它们允许我们根据不同的条件执行不同的代码,实现程序的逻辑控制。在本文中,我们学习了:

  1. if, if...elseif...else if...else 语句的基本用法
  2. 逻辑运算符在条件语句中的应用
  3. 三元运算符作为简写形式的条件语句
  4. switch 语句及其在多条件判断中的优势
  5. 条件语句在实际应用场景中的使用方法

掌握这些条件语句,你就能编写更复杂、更智能的JavaScript程序了!

练习

为了巩固所学知识,尝试完成以下练习:

  1. 编写一个函数,根据学生的分数(0-100)返回对应的等级(A:90-100,B:80-89,C:70-79,D:60-69,F:0-59)。
  2. 创建一个简单的天气建议程序,根据温度和天气情况(晴天、下雨、下雪等)给出穿衣建议。
  3. 实现一个函数,判断给定年份是否为闰年(闰年规则:能被4整除但不能被100整除,或者能被400整除)。
提示

当你解决这些练习时,尝试使用不同类型的条件语句,并思考哪种方式最适合特定的问题。

进一步学习资源

掌握条件语句后,你可以继续学习循环语句,它们是JavaScript控制流的另一个重要部分。