介绍
在编程中,很多情况下您会希望根据用户输入或其他因素运行不同的代码块。
例如,如果每个字段都正确填写,您可能希望提交表单,但如果缺少某些必填字段,您可能希望阻止该表单提交。 为了完成这样的任务,我们有 条件语句 ,它是所有编程语言不可或缺的一部分。
条件语句根据 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
关键字,并介绍了语句的嵌套以及三元运算符的使用。