介绍
在编程中,会有很多场合,您希望根据用户输入或其他因素运行不同的代码块。
例如,如果每个字段都正确填写,您可能想要提交表单,但如果缺少一些必要的字段,您可能想要阻止该表单提交。
条件陈述执行基于 ‘true’ 或 ‘false’的结果的特定操作。
您可能看到的 JavaScript 条件声明的几个例子包括:
- 检查用户的位置并根据国家显示正确的语言
- 提交表单或显示错过的必要字段 旁边的警告
- 打开下载点击事件,或关闭下载,如果已经打开
- 显示酒精供应商的网站,如果用户超过合法饮酒年龄
- 显示酒店的预订表单,但不是如果酒店已预订
条件陈述是计算机程序的逻辑、决策或流量控制的一部分,您可以将条件陈述与一本[Choose Your Own Adventure](https://en.wikipedia.org/wiki/Choose_Your_Own_Adventure)`书或流程图进行比较。
在本教程中,我们将讨论有条件的陈述,包括如果,else和else如果关键字,我们还将涵盖三重运算器。
如果声明
最基本的条件声明是如果声明. 一个如果声明将评估一个声明是否是真的或假的,并且只有在声明返回真时才能运行。
一个如果声明是用如果关键字编写的,然后是注释中的条件,代码要在弯曲的轴之间执行。
以下是对基本如果陈述的更长的审查。
1if (condition) {
2 // code that will execute if condition is true
3}
一个如果语句的内容被注入,而包含要运行代码块的弯曲的支架不会以半色结尾,就像函数块一样。
举个例子,让我们考虑一个购物应用程序,比如说,对于这个应用程序的功能,将某些资金存入其帐户的用户则希望从商店购买一个项目。
1[label shop.js]
2// Set balance and price of item
3const balance = 500;
4const jeans = 40;
5
6// Check if there are enough funds to purchase item
7if (jeans <= balance) {
8 console.log("You have enough money to purchase the item!");
9}
1[secondary_label Output]
2You have enough money to purchase the item!
我们有500的账户余额,并希望以40购买一对牛仔裤。使用较少或等于操作员,我们可以检查牛仔裤的价格是否小于或等于我们所拥有的资金量。
在一个新的示例中,我们将创建一个新的商店项目,其成本超过可用的余额。
1[label shop.js]
2// Set balance and price of item
3const balance = 500;
4const phone = 600;
5
6// Check if there is enough funds to purchase item
7if (phone <= balance) {
8 console.log("You have enough money to purchase the item!");
9}
此示例不会有输出,因为手机 <=平衡评估为假。
其他声明
使用如果语句,我们只执行代码,当一个语句被评为真,但如果条件失败,我们通常会想要其他事情发生。
例如,我们可能想要显示一个消息,告诉用户如果表单没有正确提交,哪些字段被正确填写,在这种情况下,我们会使用else语句,即如果原始条件失败,将执行的代码。
else 语句在 if 语句之后写成,并且它没有关节中的条件. 这里是基本的 if...else 语句的语法。
1if (condition) {
2 // code that will execute if condition is true
3} else {
4 // code that will execute if condition is false
5}
使用上面的相同示例,我们可以添加一个消息来显示帐户中的资金太低。
1[label shop.js]
2// Set balance and price of item
3const balance = 500;
4const phone = 600;
5
6// Check if there is enough funds to purchase item
7if (phone <= balance) {
8 console.log("You have enough money to purchase the item!");
9} else {
10 console.log("You do not have enough money in your account to purchase this item.");
11}
1[secondary_label Output]
2You do not have enough money in your account to purchase this item.
由于如果条件失败,代码将继续到else声明中。
这可能对显示警告非常有用,或者让用户知道要采取哪些行动才能继续前进. 通常对成功和失败都需要采取行动,所以如果...else比单独的如果声明更常见。
如果声明
使用如果和else,我们可以运行代码块,取决于一个条件是否是真或假。然而,有时我们可能有多个可能的条件和输出,需要不仅仅是两个选项。
以下是包含一个如果声明、多个else if声明和一个else声明的代码块的基本示例,如果任何条件都没有被评估为真。
1if (condition a) {
2 // code that will execute if condition a is true
3} else if (condition b) {
4 // code that will execute if condition b is true
5} else if (condition c) {
6 // code that will execute if condition c is true
7} else {
8 // code that will execute if all above conditions are false
9}
JavaScript 将尝试按顺序运行所有陈述,如果没有任何陈述成功,它将默认到else块。
您可以有尽可能多的else if陈述,如有需要,在许多else if陈述的情况下,可以选择switch陈述(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch)以便可读性。
作为多个else if陈述的例子,我们可以创建一个评级应用程序,该应用程序将基于100分的分数输出一个字母评级。
此 app 的要求如下:
- 90 级以上为 A
- 80 级至 89 级为 B
- 70 级至 79 级为 C
- 60 级至 69 级为 D
- 59 级或以下为 F
下面我们将创建一组简单的如果,else和else如果陈述,并对某个特定的等级进行测试。
1[label grades.js]
2// Set the current grade of the student
3let grade = 87;
4
5// Check if grade is an A, B, C, D, or F
6if (grade >= 90) {
7 console.log("A");
8} else if (grade >= 80) {
9 console.log("B");
10} else if (grade >= 70) {
11 console.log("C");
12} else if (grade >= 60) {
13 console.log("D");
14} else {
15 console.log("F");
16}
1[secondary_label Output]
2B
在我们的示例中,我们首先检查最高分数,这将大于或等于90,然后,else if陈述将检查大于80,70和60,直到达到失败分数的默认else。
虽然我们的等级值为87在技术上也适用于C,D和F,但声明将停止在第一个成功的声明。
终极操作员
外部运算符,也被称为条件运算符,被用作如果...else语句的缩写。
一个三位数运算符是用一个问题标记(?)的语法写的,然后是一个结肠(:),如下所示。
1(condition) ? expression on true : expression on false
在上述陈述中,条件是先写的,然后是 ?. 第一种表达式将执行在 true,第二种表达式将执行在 false. 它非常类似于一个 if...else 陈述,具有更紧凑的语法。
在本示例中,我们将创建一个程序,以检查用户是否21或更高。如果有,它将打印你可以进入到控制台;如果没有,它将打印你不能进入到控制台。
1[label age.js]
2// Set age of user
3let age = 20;
4
5// Place result of ternary operation in a variable
6const oldEnough = (age >= 21) ? "You may enter." : "You may not enter.";
7
8// Print output
9oldEnough;
1[secondary_label Output]
2'You may not enter.'
由于用户的年龄小于21,故障消息是输出到控制台. 与此相等的if...else在if声明中是You may enter和You may not enter在else声明中。
结论
条件声明为我们提供流量控制,以确定我们的程序的输出,它们是编程的基本构建要素之一,几乎可以找到所有编程语言。
在本文中,我们了解了如何使用如果,else和else如果关键字,并涵盖了陈述的嵌套,并使用三重运算符。