如何在JavaScript中编写条件语句

来自菜鸟教程
跳转至:导航、​搜索

介绍

在编程中,很多情况下您会希望根据用户输入或其他因素运行不同的代码块。

例如,如果每个字段都正确填写,您可能希望提交表单,但如果缺少某些必填字段,您可能希望阻止该表单提交。 为了完成这样的任务,我们有 条件语句 ,它是所有编程语言不可或缺的一部分。

条件语句根据 true 或 false 的结果执行特定操作。

您可能会看到的一些 JavaScript 条件语句示例包括:

  • 检查用户的位置并根据国家/地区显示正确的语言
  • 在提交时发送表单,或在缺少必填字段旁边显示警告
  • 在点击事件上打开下拉菜单,如果下拉菜单已经打开,则关闭它
  • 如果用户超过法定饮酒年龄,则显示酒精供应商的网站
  • 显示酒店的预订表格,但如果酒店已预订则不显示

条件语句是计算机程序的逻辑、决策或流程控制的一部分。 您可以将条件语句与“Choose Your Own Adventure”一书或流程图进行比较。

在本教程中,我们将介绍条件语句,包括 ifelseelse 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 语句

使用 ifelse,我们可以根据条件是 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

下面我们将创建一组简单的 ifelseelse 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 语句将检查是否大于 807060,直到达到默认的 else不及格。

虽然 87grade 值在技术上也适用于 CDF,但语句将停止在第一个那是成功的。 因此,我们得到 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."

结论

条件语句为我们提供了流控制来确定程序的输出。 它们是编程的基础构建块之一,几乎可以在所有编程语言中找到。

在本文中,我们了解了如何使用 ifelseelse if 关键字,并介绍了语句的嵌套以及三元运算符的使用。