Maîtriser le codage JavaScript : partie 2, conditions

Dans la première partie de cette série, nous avons appris les bases du codage en JavaScript et avons principalement écrit des instructions simples dans le cadre du code. Cette structure limite considérablement ce que nous pouvons faire. Supposons que vous conceviez un programme qui nécessite qu'un utilisateur se connecte. Vous souhaiterez peut-être diriger l'utilisateur vers une page s'il fournit les informations d'identification correctes et une autre page s'il n'est pas enregistré.

Pour ce faire, vous devez utiliser des structures de prise de décision comme les instructions if. Cela n'effectuera des opérations que sous certaines conditions. Si la condition n'existe pas, aucune action n'est effectuée. Dans ce tutoriel, vous apprendrez tout sur les conditions.

• Si déclaration
• Opérateurs relationnels
• Déclaration If-Else
• Plusieurs déclarations If-Else
• Déclaration de changement
• Opérateurs logiques

Si déclaration

Une seule instruction if effectuera une action si la condition est vraie. Si la condition est fausse, le programme exécute l'instruction suivante en dehors du bloc if. Dans l'exemple suivant, si l'expression isRaining 为 true，则我们将 putOnCoat() 和 putOnRainboots() 然后 goOutside().如果 isRaining 为 false，则程序将仅执行 goOutside().

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

goOutside();

Voici la forme générale d'écriture d'une instruction if :

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

Une condition est une expression qui est évaluée à vrai ou faux ou qui est évaluée à vrai ou faux. Une expression vraie ou fausse est appelée expression booléenne. Les expressions booléennes sont composées d'opérateurs relationnels.

Opérateurs relationnels

Les opérateurs relationnels comparent deux valeurs et déterminent si la relation entre elles est vraie ou fausse. Ils peuvent être utilisés pour créer des expressions booléennes pour nos conditions. Voici une liste et des exemples d'opérateurs relationnels :

请务必注意相等运算符 == 和严格相等运算符 === 之间的区别。例如，表达式 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为真且Q为真时，P && Q为真。以下示例测试 x 是否在 60 到 100 之间（含 60 和 100）。

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

|| 真值表：

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

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

! 真值表：

示例：

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

任务

用缺失值填写表格。

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

评论

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!