掌握 JavaScript 編碼：第 2 部分，條件

在本系列的第一部分中，我們學習了使用 JavaScript 進行編碼的基礎知識，並且主要編寫簡單的語句作為程式碼的一部分。這種結構嚴重限制了我們能做的事情。假設您正在設計一個需要使用者登入的程式。如果使用者提供了正確的憑證，您可能希望將其導向到一個頁面；如果使用者未註冊，則將其發送到另一個頁面。

為此，您需要使用 if 語句等決策結構。這只會在某些條件下執行操作。如果條件不存在，則不執行操作。在本教程中，您將了解有關條件的所有資訊。

• If 語句
• #關係運算子
• #If-Else 語句
• 多個 If-Else 語句
• Switch 語句
• #邏輯運算子
#

If 語句

如果條件為真，單一 if 語句將執行一個運算。如果條件為 false，程式將執行 if 區塊之外的下一條語句。在下列範例中，如果表達式isRaining 為true，則我們將putOnCoat() 和putOnRainboots() 然後goOutside() 。如果isRaining 為false，則程式將只執行goOutside()。

if (isRaining) {
    putOnCoat();
    putOnRainboots();
}

goOutside();

這是寫 if 語句的一般形式：

if (condition) {
    statement;
    statement;
    ...
}

條件是一個值為 true 或 false 或計算結果為 true 或 false 的表達式。真或假的表達式稱為布林表達式。布林表達式由關係運算子組成。

關係運算子

關係運算子比較兩個值並確定它們之間的關係是 true 還是 false。它們可用於為我們的條件建立布林表達式。以下是關係運算子的清單和範例：

操作員	意義	範例	意義
==	平等	x == y	x 等於 y 嗎？
===	嚴格平等	x === y	x 的值和型別是否等於 y？
!=	不平等	x!=y	x不等於y嗎？
！ ==	嚴格不平等	x !== y	x 的值和型別不等於 y 嗎？
>	大於	x > y	x 是否大於 y？
	小於	x	x 是否小於 y？
>=	大於或等於	x >= y	x 是否大於或等於 y？
	小於或等於	x	x 是否小於或等於 y？

请务必注意相等运算符 == 和严格相等运算符 === 之间的区别。例如，表达式 2 == "2" 为 true。但表达式 2 === "2" 是错误的。在第二个示例中，两个值是不同的数据类型，这就是表达式为 false 的原因。最佳实践是使用 === 或 !==。

以下示例将显示消息“您获得 A”。

let grade = 93;

if (grade >= 90) {
    console.log("You get an A");
}

If-Else 语句

如果条件为 true，if-else 语句将执行一个语句块；如果条件为 false，则执行另一个语句块。以下示例将显示消息“valid username”，因为条件为 true。

let username = "alberta";

if (username === "alberta") {
    console.log("Valid Username");
} else {
    console.log("Incorrect username. Try again.");
}

这是 if-else 语句的一般形式：

if (condition) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}

测验

 这个程序的输出是什么？

let isLoggedIn = false;

if (isLoggedIn) {
    console.log("Welcome");
} else {
    console.log("You are not logged in");
}

三元运算符

if-else 语句在编程中非常常见，因此有一个专用的三元运算符，它允许您在一行中编写简单的 if-else 语句。三元运算符是 JavaScript 中唯一接受三个操作数的运算符。

运算符接受开头的条件，后跟问号。问号后面跟着一个表达式，如果条件计算结果为真值，则执行该表达式。该表达式后跟一个冒号。冒号后面还有另一个表达式，如果条件计算结果为假值，则执行该表达式。

让我们看一个例子来清楚地说明这一点。我们从 sale_price 开始，它等于 max_price 变量。现在，如果 big_discount 的值计算为 true，我们将 sale_price 更改为 900。否则，sale_price 值设置为 950。由于我们已将 big_discount 设置为 true，所以 sale_price 值最终设置为 900。

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

if(big_discount) {
    sale_price = 900;
} else {
    sale_price = 950;
}

这是最后一行中使用三元运算符编写的等效代码。基本上，如果 big_discount 计算结果为 true，则 sale_price 将设置为 900；如果 big_discount 计算结果为 falsephpcnendc，则 <code>sale_price 将设置为 950 phpcn.phpcn.就像前面的示例一样，big_discount 的值设置为 true，因此 sale_price 设置为 900。

let big_discount = true;
let max_price = 1000;
let sale_price = max_price;

sale_price = big_discount ? 900 : 950;

多个 If-Else 语句

也可以检查多个条件。假设您正在跟踪商店中特定产品的库存，并根据其库存数量采取某些操作。代码看起来像这样：

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} else if (stock_count > 20) {
    console.log("Be Ready to Restock");
} else if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

// Outputs: Be Ready to Restock

您应该注意到我如何使用 else if 而不仅仅是 if 来编写多个条件。如果您只想执行一个块，则可以采用这种方法。仅使用 if 编写条件可能会导致执行多个块，如下所示：

let stock_count = 50;

if(stock_count > 80) {
    console.log("Large stock");
} if (stock_count > 20) {
    console.log("Be Ready to Restock");
} if (stock_count > 0) {
    console.log("Please Restock");
} else {
    console.log("Stop Selling");
}

/* Outputs:
Be Ready to Restock
Please Restock */

这是编写多个 if-else-if 语句的一般形式：

if (condition1) {
    statement;
    statement;
    etc.
} else if (condition2) {
    statement;
    statement;
    etc.
} else {
    statement;
    statement;
    etc.
}

链式三元运算符

我们已经讨论了三元运算符如何通过替换简单的 if-else 语句来帮助我们编写更紧凑的代码。您可以以类似的方式使用链式三元运算符来复制多个 if-else 语句。这是一个例子：

let stock_count = 50;

console.log((stock_count > 80) ? "Large stock" : (stock_count > 20) ? "Be Ready to Restock" : (stock_count > 0) ? "Please Restock" : "Stop Selling");

// Outputs: Be Ready to Restock

就像常规的 if-else 语句一样，我们首先检查 stock_count 是否超过 80。既然不是，我们进入下一个条件，检查 stock_count 是否超过 20。其计算结果为 true，因此我们得到字符串“Be Ready to Restock”。

Switch 语句

switch 语句还用于有条件地执行程序的某些部分。以下示例将我们的罗马数字转换器实现为 switch 语句：

let num = 3;

switch (num) {
    case 1:
        console.log("I");
        break;
    case 2:
        console.log("II");
        break;
    case 3:
        console.log("III");
        break;
    case 4:
       console.log("IV");
        break;
    case 5:
       console.log("V");
       break;
    default:
        console.log("Invalid input");
}

这是 switch 语句的一般形式：

switch (expression) {
    case value1:
        statement;
        statement;
        etc.
        break;
    case value2:
        statement;
        statement;
        etc.
        break;
    default:
        statement;
        statement;
        etc.
}

每种情况代表我们的表达式可以采用的值。只有情况正确的代码块才会执行。我们在代码块末尾包含一个break语句，以便程序退出switch语句并且不执行任何其他情况。当其他情况都不成立时，将执行默认情况。

任务

编写一个 switch 语句，根据给定的数字显示星期几。例如，1 = 星期日，2 = 星期一等。

逻辑运算符

and 运算符 && 和 or 运算符 || 允许我们连接两个布尔表达式。 not 运算符 ! 对表达式求反。为了说明逻辑运算符的工作原理，我们将查看真值表。真值表包含与运算符一起使用的所有值组合。我使用 P 表示左侧表达式，使用 Q 表示右侧表达式。

&& 真值表：

P	问	P && Q
正确	正确	正确
正确	假	假
假	正确	假
假	假	假

我们阅读了表格中的每一行。第一行告诉我们，当P为真且Q为真时，P && Q为真。以下示例测试 x 是否在 60 到 100 之间（含 60 和 100）。

if (x >= 60 && x <= 100)
    console.log("Between 60 and 100.");

|| 真值表：

P	问	P ||问
正确	正确	正确
正确	假	正确
假	正确	正确
假	假	假

此示例测试 82 是否超出 60–100 范围：

if (x < 60 || x > 100) 
    console.log("Less than 60 or more than 100.");

! 真值表：

P	！P
正确	假
假	正确

示例：

if (! x)
    console.log("x iS false.");

任务

用缺失值填写表格。

P	问	！P	！Q	!P && !Q	！P || !Q
正确	正确
正确	假
假	正确
假	假

关于逻辑运算符，需要了解的一点是，如果 && 运算符左侧的表达式为 false，则不会检查右侧的表达式，因为整个语句都是 false。如果 || 运算符左侧的表达式为 true，则不会检查右侧的表达式，因为整个语句都为 true。

评论

程序可以使用布尔表达式有条件地执行代码块。布尔表达式是使用关系运算符编写的。逻辑运算符允许我们组合布尔表达式。

单个 if 语句为程序提供了满足条件时要采取的替代路径。如果条件为假，则 if-else 语句提供第二个操作方案。 if-else-if 语句允许我们测试多个条件。当您有多个条件需要测试时，Switch 语句可以用作 if-else-if 语句的替代方法。

在本系列的下一部分中，您将了解循环。

本文已根据 Monty Shokeen 的贡献进行了更新。 Monty 是一位全栈开发人员，他也喜欢编写教程并了解新的 JavaScript 库。

以上是掌握 JavaScript 編碼：第 2 部分，條件的詳細內容。更多資訊請關注PHP中文網其他相關文章！