이 시리즈의 첫 번째 부분에서는 JavaScript로 코딩의 기본을 배우고 코드의 일부로 간단한 문장을 주로 작성했습니다. 이 구조는 우리가 할 수 있는 일을 심각하게 제한합니다. 사용자가 로그인해야 하는 프로그램을 설계한다고 가정해 보겠습니다. 사용자가 올바른 자격 증명을 제공한 경우 한 페이지로 이동하고, 등록되지 않은 경우 다른 페이지로 이동하도록 할 수 있습니다.
이를 위해서는 if 문과 같은 의사결정 구조를 사용해야 합니다. 이는 특정 조건에서만 작업을 수행합니다. 조건이 존재하지 않으면 아무 작업도 수행되지 않습니다. 이 튜토리얼에서는 조건에 대한 모든 것을 배웁니다.
단일 if 문은 조건이 true인 경우 작업을 수행합니다. 조건이 거짓이면 프로그램은 if 블록 외부에서 다음 명령문을 실행합니다. 다음 예에서 isRaining
为 true,则我们将 putOnCoat()
和 putOnRainboots()
然后 goOutside()
.如果 isRaining
为 false,则程序将仅执行 goOutside()
.
if 문을 작성하는 일반적인 형식은 다음과 같습니다.
으아악조건은 참 또는 거짓으로 평가되거나 참 또는 거짓으로 평가되는 표현식입니다. 참 또는 거짓인 표현식을 부울 표현식이라고 합니다. 부울 표현식은 관계 연산자로 구성됩니다.
관계 연산자는 두 값을 비교하여 두 값 사이의 관계가 참인지 거짓인지 판단합니다. 조건에 대한 부울 표현식을 만드는 데 사용할 수 있습니다. 다음은 관계 연산자의 목록과 예입니다.
운영자 | 의미 | 예 | 의미 |
---|---|---|---|
== | 평등 | x == y | x는 y와 같나요? |
=== | 엄격한 평등 | x === y | x의 값과 유형이 y와 같나요? |
!= | 불평등 | x!=y | x는 y와 같지 않나요? |
! == | 엄격히 불평등 | x !== y | x의 값과 유형이 y와 같지 않나요? |
> | 는 | 보다 큼x > y | x가 y보다 큽니까? |
미만 | xx가 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"); }
如果条件为 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;
也可以检查多个条件。假设您正在跟踪商店中特定产品的库存,并根据其库存数量采取某些操作。代码看起来像这样:
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 语句:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!