在本系列的第一部分中,我们学习了使用 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?
= y x 是否大于或等于 y?
<= 小于或等于 x <= y 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,则 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 restockplease 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 部分,条件的详细内容。