如何在JavaScript中编写条件语句

介绍

在编程中，会有很多场合会根据用户输入或其他因素来使不同的代码块运行。

例如，如果每个字段都已正确填写，则可能需要提交表单，但如果缺少某些必填字段，则可能希望避免该表单提交。 为了实现这些任务，我们有条件语句 ，它们是所有编程语言的组成部分。

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

您可能会看到的JavaScript条件语句的几个示例包括：

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

条件语句是计算机程序的逻辑，决策或流程控制的一部分。 您可以将条件语句与“ 选择您自己的冒险 ”书或流程图进行比较。

在本教程中，我们将讨论条件语句，包括if ， else和else if关键字。 我们也将覆盖三元运营商。

如果声明

最根本的条件语句是if语句。 if语句将评估语句是真还是假，只有当语句返回true才会运行。 在false结果的情况下，代码块将被忽略，程序将跳到下一部分。

一个if语句用if关键字写成，后跟一个括号中的一个条件，其代码将在大括号之间执行。 简而言之，它可以写成if () {} 。

这是对基本if语句的更长的检查。

if (condition) {
    // code that will execute if condition is true
}

if语句的内容缩进，包含要运行的代码块的大括号不以分号结尾，就像功能块一样。

例如，让我们考虑一个购物应用程序。 说，对于这个应用程序的功能，一个已经将一定数量的资金存入其帐户的用户然后想从商店购买一个商品。

// 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 ，条件将通过，代码块将运行。

在一个新的例子中，我们将创建一个新的商店项目，其成本超过可用余额。

// 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
}

使用与上述相同的示例，如果帐户中的资金太低，我们可以添加一条消息来显示。

// 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比一个solo if语句更常见。

否则声明

if else ，我们可以根据条件是true还是false来运行代码块。 然而，有时我们可能会有多种可能的条件和输出，而不仅仅需要两个选项。 一种方法是使用else if语句，它可以评估两个以上的可能结果。

这是一个包含if语句，多个else if语句和else语句的代码块的基本示例， if没有一个条件被评估为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语句，并根据给定的成绩进行测试。

// 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语句将检查大于70和60直到达到失败等级的默认值。

虽然我们的grade值87在技​​术上也适用于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." 到控制台

// 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等于此将是"You may enter." 在if语句中， "You may not enter." 在else语句中。

结论

条件语句为我们提供了流量控制来确定我们程序的输出。 它们是编程基础的基础之一，几乎可以在所有编程语言中使用。

在本文中，我们了解了如何使用if ， else和else if关键字，并覆盖了语句的嵌套和使用三元运算符。