你真的了解JS条件语句吗?适合初学者入门的前端JavaScript详解!

在任何的编程语言中,代码需要依靠不同的输入作出决定并且采取行动。在这篇文章中,我们将探索在JavaScript中所谓的条件语句是怎样工作的。

if ... else 语句

这是我们到目前为止会在JavaScript中用到的最常见的条件语句类型

基本的 if…else 语法

if (条件) {
 //如果条件为真就运行这里的代码 
}else{
 //如果条件为假就运行这里的代码 
}
  1. 关键字 if,并且后面跟随括号。
  2. 要测试的条件,放到括号里(通常是“这个值大于另一个值吗”或者“这个值存在吗”)。这个条件会利用比较运算符进行比较,并且返回true或者false。
  3. 一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且只会在条件语句返回true的时候运行。
  4. 关键字else。
  5. 另一组花括号,在里面我们有一些代码——可以是任何我们喜欢的代码,并且当条件语句返回值不是true的话,它才会运行。

你不一定需要else和第二个花括号——下面的代码也是符合语法规则的:

if (条件) {
 //如果条件为真就运行这里的代码
}
//运行别的代码

不过,这里你需要注意——在这种情况下,第二段代码不被条件语句控制,所以它总会运行,不管条件返回的是true还是false。这不一定是一件坏事,但这可能不是你想要的——你经常只想要运行一段代码或者另一段,而不是两个都运行。

最后,有时候你可能会看到 if…else 语句没有写花括号,像下面的速记风格:

if (条件) //如果条件为真就运行这里的代码
//否则运行别的代码

这是完全有效的代码,但不建议这样使用——因为如果有花括号进行代码切割的话,整体代码被切割为多行代码,更易读和易用。

嵌套if ... else

将另一个if ... else 语句放在另一个中 - 嵌套它是完全可行的。

嵌套if ... else

即使代码全部一起工作,每个if ... else语句完全独立于另一个。

else if

但是如果我们想要两个以上的选择或结果呢?

有一种方法来让你的 if…else 连接你的额外的选择和结果——使用else if 。每一个额外的选择要求放到 if() { ... } 和 else { ... } 里。

else if

最后一个 else {...} 中的选择通常被叫做在所有的条件都不为 true 时其中的代码会被执行。

关于比较运算符

比较运算符是用来判断条件语句中的条件的。我们有如下选择:

  1. === and !== — 判断一个值是否严格等于,或不等于另一个。
  2. < and > — 判断一个值是否小于,或大于另一个。
  3. <= and >= — 判断一个值是否小于或等于,或者大于或等于另一个。

对于布尔值的判断,我们需要明确:任何不是 false, undefined, null, 0, NaN 的值,或一个空字符串('')在作为条件语句进行测试时实际返回true,因此我们可以简单地使用变量名称来测试它是否为真,例:

逻辑运算符:AND,OR和NOT

如果要测试多个条件,而不需要编写嵌套if ... else语句,逻辑运算符可以帮助我们。主要有:

  1. && —— 逻辑与:使得并列两个或者更多的表达式成为可能,只有当这些表达式每一个都返回true时,整个表达式才会返回true.
  2. || —— 逻辑或:当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
  3. ! —— 逻辑非:可以用于对一个表达式取否

&& —— 逻辑与

|| —— 逻辑或

! —— 逻辑非

它们主要适用于您只有几个选择的情况,每个都需要相当数量的代码来运行,和/或 的条件很复杂的情况(例如多个逻辑运算符)。 对于只想将变量设置一系列为特定值的选项或根据条件打印特定语句的情况,语法可能会很麻烦,特别是如果您有大量选择。

switch ... case ...语句

switch语句以单个表达式/值作为输入,然后查看多个选项,直到找到与该值相匹配的选项,执行与之相关的代码。

switch ... case ...语句

分析:

  1. 关键字 switch, 后跟一组括号,括号中包含表达式或值.
  2. 关键字 case, 后跟一个选项的表达式/值,后面跟一个冒号.
  3. 如果选择与表达式匹配,则运行一些代码.
  4. 一个 break 语句, 分号结尾. 如果先前的选择与表达式/值匹配,则浏览器在此停止执行代码块,并执行switch语句之后的代码.
  5. 你可以添加任意的 case 选项(选项3-5).
  6. 关键字 default, 后面跟随和 case 完全相同的代码模式 (选项 3–5), 之后不需要再有选项, 并且您不需要 break 语句, 因为之后没有任何运行代码. 如果之前没有选项匹配,则运行default选项.

注意:

default 部分不是必须的 - 如果表达式不可能存在未知值,则可以安全地省略它。 如果有机会,您需要包括它来处理未知的情况。

三元运算:

用于测试一个条件,并返回一个值/表达,如果它是true,另一个是false-这种情况下是有用的,并且可以占用比if...else块较少的代码块。

格式: ( 条件 ) ? 条件满足就执行这里 : 条件不满足则执行这里

三元运算给变量赋值

你不仅仅可以用三元运算符设置变量值,你也可以运行任何你喜欢的函数或代码行。

三元运算执行函数

关于JavaScript中的条件语句就到这里了。

编程是一种修行,我愿与志同道合的朋友携手前行,一起探索有关编程的奥妙!

如果您在前端学习的过程中遇到难题,欢迎【关注】并【私信】我,大家一起交流解决!

推荐阅读:

JS三种变量定义方式——全干货,拿走不谢!

助你深入理解JS变量提升+为何let变量无法提升

带你一分钟理解JS闭包——通俗易懂

举报
评论 0