介绍
在编程中,很多情况下您会希望根据用户输入或其他因素运行不同的代码块。
例如,如果每个字段都正确填写,您可能希望提交表单,但如果缺少某些必填字段,您可能希望阻止该表单提交。 为了完成这样的任务,我们有 条件语句 ,它是所有编程语言不可或缺的一部分。
条件语句根据 true 或 false 的结果执行特定操作。
您可能会看到的一些 JavaScript 条件语句示例包括:
- 检查用户的位置并根据国家/地区显示正确的语言
- 在提交时发送表单,或在缺少必填字段旁边显示警告
- 在点击事件上打开下拉菜单,如果下拉菜单已经打开,则关闭它
- 如果用户超过法定饮酒年龄,则显示酒精供应商的网站
- 显示酒店的预订表格,但如果酒店已预订则不显示
条件语句是计算机程序的逻辑、决策或流程控制的一部分。 您可以将条件语句与“Choose Your Own Adventure”一书或流程图进行比较。
在本教程中,我们将介绍条件语句,包括 if、else 和 else if 关键字。 我们还将介绍三元运算符。
如果语句
最基本的条件语句是 if 语句。 if 语句将评估语句是真还是假,并且仅在语句返回 true 时运行。 在 false 结果的情况下,代码块将被忽略,程序将跳到下一节。
if 语句使用 if 关键字编写,后跟括号中的条件,要执行的代码在大括号之间。 简而言之,可以写成if () {}。
这是对基本 if 语句的更长检查。
if (condition) {
// code that will execute if condition is true
}
if 语句的内容是缩进的,包含要运行的代码块的大括号不以分号结尾,就像功能块一样。
例如,让我们考虑一个购物应用程序。 比如说,对于这个应用程序的功能,一个用户在他们的账户中存入了一定数量的资金,然后想从商店购买一件物品。
shop.js
// Set balance and price of item
const balance = 500;
const jeans = 40;
// Check if there are enough funds to purchase item
if (jeans <= balance) {
console.log("You have enough money to purchase the item!");
}
OutputYou have enough money to purchase the item!
我们的账户余额为 500,想为 40 买一条牛仔裤。 使用小于或等于运算符,我们可以检查牛仔裤的价格是否小于或等于我们拥有的资金量。 由于 jeans <= balance 的计算结果为 true,因此条件将通过并且代码块将运行。
在一个新示例中,我们将创建一个成本高于可用余额的新商店商品。
shop.js
// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
}
此示例将没有输出,因为 phone <= balance 的计算结果为 false。 代码块将被忽略,程序将继续执行下一行。
其他声明
使用 if 语句,我们只在语句评估为 true 时执行代码,但如果条件失败,我们通常会希望发生其他事情。
例如,如果表单未正确提交,我们可能希望显示一条消息,告诉用户哪些字段填写正确。 在这种情况下,我们将使用 else 语句,这是在原始条件不成功时将执行的代码。
else 语句写在 if 语句之后,括号中没有条件。 这是基本 if...else 语句的语法。
if (condition) {
// code that will execute if condition is true
} else {
// code that will execute if condition is false
}
使用与上面相同的示例,如果帐户中的资金太少,我们可以添加一条消息来显示。
shop.js
// Set balance and price of item
const balance = 500;
const phone = 600;
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log("You have enough money to purchase the item!");
} else {
console.log("You do not have enough money in your account to purchase this item.");
}
OutputYou do not have enough money in your account to purchase this item.
由于 if 条件不成功,代码继续执行 else 语句中的内容。
这对于显示警告或让用户知道要采取什么行动继续前进非常有用。 通常成功和失败都需要一个动作,所以 if...else 比单独的 if 语句更常见。
否则 if 语句
使用 if 和 else,我们可以根据条件是 true 还是 false 运行代码块。 但是,有时我们可能有多个可能的条件和输出,并且需要的不仅仅是两个选项。 一种方法是使用 else if 语句,它可以评估两个以上的可能结果。
这是包含 if 语句、多个 else if 语句和 else 语句的代码块的基本示例,以防没有条件评估为 true。
if (condition a) {
// code that will execute if condition a is true
} else if (condition b) {
// code that will execute if condition b is true
} else if (condition c) {
// code that will execute if condition c is true
} else {
// code that will execute if all above conditions are false
}
JavaScript 将尝试按顺序运行所有语句,如果没有一个成功,则默认为 else 块。
您可以根据需要拥有尽可能多的 else if 语句。 在许多 else if 语句的情况下,switch 语句 可能更易于阅读。
作为多个 else if 语句的示例,我们可以创建一个评分应用程序,该应用程序将基于 100 分输出字母评分。
这个应用程序的要求如下:
- 90及以上成绩为A
- 80 到 89 的等级是 B
- 70到79的等级是C
- 60到69的等级是D
- 59或以下的等级是F
下面我们将创建一组简单的 if、else 和 else if 语句,并根据给定的成绩对它们进行测试。
成绩.js
// Set the current grade of the student
let grade = 87;
// Check if grade is an A, B, C, D, or F
if (grade >= 90) {
console.log("A");
} else if (grade >= 80) {
console.log("B");
} else if (grade >= 70) {
console.log("C");
} else if (grade >= 60) {
console.log("D");
} else {
console.log("F");
}
OutputB
在我们的示例中,我们首先检查最高分数,该分数将大于或等于 90。 之后,else if 语句将检查是否大于 80、70 和 60,直到达到默认的 else不及格。
虽然 87 的 grade 值在技术上也适用于 C、D 和 F,但语句将停止在第一个那是成功的。 因此,我们得到 B 的输出,这是第一个匹配项。
三元运算符
三元运算符,也称为条件运算符,用作 if...else 语句的简写。
三元运算符使用问号 (?) 后跟冒号 (:) 的语法编写,如下所示。
(condition) ? expression on true : expression on false
在上面的语句中,首先写入条件,然后是 ?。 第一个表达式将在 true 上执行,第二个表达式将在 false 上执行。 它与 if...else 语句非常相似,语法更紧凑。
在此示例中,我们将创建一个程序来检查用户是否为 21 或更老。 如果是,它会将 "You may enter" 打印到控制台。 如果不是,它会将 "You may not enter." 打印到控制台。
年龄.js
// Set age of user let age = 20; // Place result of ternary operation in a variable const oldEnough = (age >= 21) ? "You may enter." : "You may not enter."; // Print output oldEnough;
Output'You may not enter.'
由于用户的 age 小于 21,因此将失败消息输出到控制台。 与此等效的 if...else 将是 if 语句中的 "You may enter." 和 else 语句中的 "You may not enter."。
结论
条件语句为我们提供了流控制来确定程序的输出。 它们是编程的基础构建块之一,几乎可以在所有编程语言中找到。
在本文中,我们了解了如何使用 if、else 和 else if 关键字,并介绍了语句的嵌套以及三元运算符的使用。