跳到主要内容

JavaScript If Else

在编程中,我们经常需要根据不同的条件执行不同的代码。JavaScript 提供了条件语句来实现这种逻辑控制,其中最基本也是最常用的就是 if-else 语句。本文将详细介绍 JavaScript 中的条件语句,帮助你掌握如何在代码中做出决策。

什么是条件语句?

条件语句允许我们根据特定条件的真假来执行或跳过特定的代码块。JavaScript 中最基本的条件语句是 if 语句。

基本语法

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

当条件评估为 true 时,大括号 {} 内的代码将被执行;如果条件为 false,则跳过这些代码。

if 语句

让我们看一个简单的 if 语句示例:

js
let temperature = 25;

if (temperature > 20) {
console.log("天气很暖和!");
}

输出:

天气很暖和!

在这个例子中,因为 temperature 的值是 25,大于 20,所以条件 temperature > 20 评估为 true,因此打印出 "天气很暖和!"。

if-else 语句

如果你希望在条件不满足时执行另一段代码,可以使用 if-else 语句:

js
let temperature = 15;

if (temperature > 20) {
console.log("天气很暖和!");
} else {
console.log("天气有点冷!");
}

输出:

天气有点冷!

因为 temperature 的值是 15,不大于 20,所以条件 temperature > 20 评估为 false,执行 else 代码块,打印出 "天气有点冷!"。

if-else if-else 语句

对于多条件判断,可以使用 else if 子句:

js
let temperature = 30;

if (temperature < 0) {
console.log("寒冷的冬天!");
} else if (temperature < 20) {
console.log("凉爽的天气!");
} else if (temperature < 30) {
console.log("温暖的天气!");
} else {
console.log("炎热的夏天!");
}

输出:

炎热的夏天!

在这个例子中,JavaScript 从上到下检查每个条件。当找到一个为 true 的条件时,执行相应的代码块,然后跳出整个 if-else 结构。

备注

JavaScript 会按照条件的顺序依次检查。一旦找到第一个为 true 的条件,它就会执行对应的代码块,并忽略后续的条件检查。

比较运算符

在条件语句中,我们经常使用比较运算符来评估条件:

运算符描述示例
==相等(值相同)5 == "5" 返回 true
===严格相等(值和类型都相同)5 === "5" 返回 false
!=不相等(值不同)5 != "6" 返回 true
!==严格不相等(值或类型不同)5 !== "5" 返回 true
>大于5 > 3 返回 true
<小于5 < 3 返回 false
>=大于或等于5 >= 5 返回 true
<=小于或等于5 <= 4 返回 false
提示

推荐使用严格相等运算符 === 和严格不相等运算符 !==,以避免类型转换带来的意外结果。

逻辑运算符

你可以使用逻辑运算符组合多个条件:

运算符描述示例
&&逻辑与(所有条件都为 true)(x > 5 && y < 10)
||逻辑或(至少有一个条件为 true)(x > 5 || y < 10)
!逻辑非(条件的反面)!(x > 5)
js
let age = 25;
let hasLicense = true;

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

输出:

你可以开车!

三元运算符

JavaScript 提供了一种简洁的条件表达式形式——三元运算符,语法为:条件 ? 表达式1 : 表达式2

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

输出:

成年人

三元运算符是 if-else 语句的简化形式,特别适合简单的条件赋值。

嵌套 if 语句

你可以在一个 ifelse 语句内部放置另一个 if 语句:

js
let temperature = 25;
let isRaining = false;

if (temperature > 20) {
if (!isRaining) {
console.log("是个出去玩的好天气!");
} else {
console.log("天气暖和,但是在下雨。");
}
} else {
console.log("天气有点冷。");
}

输出:

是个出去玩的好天气!
警告

嵌套的 if 语句会使代码变得复杂和难以理解。如果可能,尝试使用逻辑运算符组合条件,或将逻辑拆分为更小的函数。

实际案例:用户登录验证

让我们看一个更实际的例子,使用条件语句验证用户登录:

js
let username = "user123";
let password = "pass456";
let inputUsername = "user123";
let inputPassword = "wrongpass";
let isRememberMeChecked = true;

// 验证登录
if (username === inputUsername && password === inputPassword) {
console.log("登录成功!");

if (isRememberMeChecked) {
console.log("已记住你的登录信息");
}
} else if (username === inputUsername) {
console.log("密码错误!");
} else {
console.log("用户名不存在!");
}

输出:

密码错误!

实际案例:购物车折扣计算

这个例子展示了如何使用条件语句为购物车实现不同的折扣规则:

js
let totalAmount = 2500;
let userType = "premium";
let discountAmount = 0;
let finalAmount;

// 计算折扣
if (userType === "premium") {
// 优质客户固定享有 10% 折扣
discountAmount = totalAmount * 0.1;

// 额外的消费折扣
if (totalAmount >= 2000) {
discountAmount += totalAmount * 0.05; // 额外 5% 折扣
} else if (totalAmount >= 1000) {
discountAmount += totalAmount * 0.02; // 额外 2% 折扣
}
} else {
// 普通客户只享有消费折扣
if (totalAmount >= 2000) {
discountAmount = totalAmount * 0.07; // 7% 折扣
} else if (totalAmount >= 1000) {
discountAmount = totalAmount * 0.05; // 5% 折扣
} else if (totalAmount >= 500) {
discountAmount = totalAmount * 0.02; // 2% 折扣
}
}

finalAmount = totalAmount - discountAmount;
console.log(`原价: ${totalAmount}`);
console.log(`折扣: ${discountAmount}`);
console.log(`最终价格: ${finalAmount}`);

输出:

原价: 2500 元
折扣: 375 元
最终价格: 2125 元

条件语句的流程图示

条件语句的执行流程可以通过流程图清晰地表示:

总结

JavaScript 条件语句是编程中做出决策的基础:

  • if 语句:当条件为 true 时执行代码块
  • if-else 语句:在条件为 true/false 时执行不同的代码块
  • if-else if-else 语句:处理多个条件
  • 三元运算符:简洁地表达条件逻辑
  • 嵌套 if 语句:处理复杂的条件组合

掌握条件语句对于编写响应用户输入、处理不同场景和创建动态应用至关重要。通过练习和实践,你将能够灵活运用这些条件控制结构,编写出更加智能和交互性强的程序。

练习

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

  1. 编写一个程序,根据分数(0-100)判断等级:90-100 为 A,80-89 为 B,70-79 为 C,60-69 为 D,低于 60 为 F。

  2. 创建一个简单的计算器程序,根据用户输入的两个数字和运算符(+、-、*、/)执行相应的计算。

  3. 实现一个根据年龄、身高和体重计算 BMI 并给出健康建议的程序。

更多资源

祝你学习愉快!随着你对 JavaScript 的深入学习,你会发现条件语句是构建交互式网页和应用程序的重要基石。