这次我学会了JavaScript中的条件语句

500 阅读7分钟

大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~

写在前面

这篇文章我们将来学习JavaScript中的条件语句,通过本篇文章你将会掌握如下内容:

条件语句(导读).png

什么是条件语句

所谓的条件语句 ,就是通过指定的表达式的运行结果来判断当前是执行还是跳过某些指定的语句块。简答的说就是如果指定的表达式的运算结果为true,则执行指定的语句块;如果运算结果为false则跳过某个语句块或者执行其他的语句块。如下代码如下:

if (true) {
    console.log('条件语句被执行了')
}

上面代码目前仅做展示,暂时不需要了解。

JavaScript中提供的两种条件语句,如下所示:

  • if...else语句

  • switch语句

if语句

if语句是JavaScript中最常见也是最基本的条件语句。if语句又可以细分为以下几种:

  • if语句

  • if...else语句

  • if...else if...else语句

if语句

if语句是根据一个表达式的运算结果来判断是执行某些语句还是跳过这些语句。其语法结构如下:

if (条件表达式) {
  // 当表达式为true时需要执行的语句块
}

根据上面的语法结构,可以绘制出如下流程图:

if语句执行流程.png

if语句中的条件表达式为true是则会执行指定的代码块,否则就会跳出代码块的执行。

示例代码如下:

var x = 10
var y = 9

// 打印 x y 中最大的值
if (x > y) {
    console.log("最大值为x,x的值为:" + x)
}

if (x < y) {
    console.log("最大值为y,y的值为:" + y)
}
// 执行结果如下:
// 最大值为x,x的值为:10

上面的代码如下执行流程为,判断第一个if中的条件表达式,结果为true执行后面语句块中的代码;继续执行,执行到第二个if中的条件表达式,最终结果为false,跳过后面的代码块,不执行。

if语句中,如果语句块中只有一条语句的话,代码块中的花括号是可以省略的 。示例代码如下:

var x = 10
var y = 9
if (x > y)
    console.log("最大值为x,x的值为:" + x)

// 也可以编写在一行
if (x < y) console.log("最大值为y,y的值为:" + y)

if...else语句

最基本的if语句中,只有当条件表达式为true才有执行的代码块,却没有条件表达式为false的执行的代码块。JavaScript中提供的if...else语句,就是包含两个代码块,一个为true时执行,一个为false时执行。语法结构如下:

if (条件表达式) {
  // 当表达式为true时需要执行的语句块
} else {
  // 当表达式为false时需要执行的语句块
}

根据上面的语法结构,可以绘制出如下流程图:

if...else语句执行流程.png

当条件表达式为true时执行语句块1,为fasle是执行语句块2

我们上面的代码可以改写为如下:

var x = 10
var y = 9
if (x > y) {
    console.log("最大值为x,x的值为:" + x)
} else {
    console.log("最大值为y,y的值为:" + y)
}

这样写于上面的写法是一致的,而且代码量也变少了。

同样的,若干语句块只有一条语句,花括号也是可以省略的,代码如下:

if (x > y)
    console.log("最大值为x,x的值为:" + x)
else
    console.log("最大值为y,y的值为:" + y)

if...else语句也是可以进行嵌套的,示例代码如下:

var score = 88

/**
 * 需求
 * 当成绩为100分时输出 -> 你考了满分
 * 当成绩大于85分时输出 -> 你的成绩为优秀
 * 当成绩小于于85分且大于60分时输出 -> 你的成绩为良好
 * 当成绩小于60分时输出 -> 你的成绩不及格
 * 当成绩为0分时输出 -> 你的成绩居然是0分
 */
if (score >= 60) {
    if (score === 100) {
        console.log('你考了满分')
    } else {
        if (score > 85) {
            console.log('你的成绩为优秀')
        } else {
            console.log('你的成绩为良好')
        }
    }
} else {
    if (score === 0) {
        console.log('你的成绩居然是0分')
    } else {
        console.log('你的成绩不及格')
    }
}

上面那段代码的执行流程如下:

if...else嵌套案例的执行流程.png

根据流程图,可以很清晰的看到代码的执行流程是什么样子的

else if语句

我们上面使用的if...else的嵌套编写的代码,增加的代码结构的复杂度不说,而且非常的不易读。大部分情况下,if...else的嵌套结构的代码都是可以通过else if语句实现改写。

else if语句就是在原来的if...else语句中增加一个else if语句,其语法结构如下:

if (条件表达式1) {
  // 当条件表达式1为true是执行的代码块
} else if (条件表达式2) {
  // 当条件表达式2为true是执行的代码块
} else if (条件表达式3) {
  // 当条件表达式3为true是执行的代码块
} else if (条件表达式N) {
  // 当条件表达式N为true是执行的代码块
} else {
  // 上面都不满足执行的代码块
}

根据上面的语法结构,可以绘制出如下流程图:

else if语句执行流程.png

现在我们就可以通过else if语句来改写上面那个代码:

var score = 88

/**
 * 需求
 * 当成绩为100分时输出 -> 你考了满分
 * 当成绩大于85分时输出 -> 你的成绩为优秀
 * 当成绩小于于85分且大于60分时输出 -> 你的成绩为良好
 * 当成绩小于60分时输出 -> 你的成绩不及格
 * 当成绩为0分时输出 -> 你的成绩居然是0分
 */
if (score === 100) {
    console.log('你考了满分')
} else if (score > 85) {
    console.log('你的成绩为优秀')
} else if (score >= 60) {
    console.log('你的成绩为良好')
} else if (score === 0) {
    console.log('你的成绩居然是0分')
} else {
    console.log('你的成绩不及格')
}

可以明显看出,使用else if语句来写的代码更加的扁平化且易读。

switch语句

switch语句也是JavaScript中的条件语句,准确的说它属于JavaScript中的开关语句,该语句与if语句非常相似。其语法结构如下:

switch (条件表达式) {
  case value1:
    // 符合value1而执行的代码
    break // 结束switch语句的执行
  case value2:
    // 符合value2而执行的代码
    break
  ...
  case valueN:
    // 符合valueN而执行的代码
    break
  default:
  // 与上面的值都不匹配时,所执行的代码块
}

根据上面的语法结构,可以绘制出如下流程图:

switch语句的执行流程.png

switch语句使用条件表达式的执行结果,与case中的值进行比对,如果满足则执行对应的语句块。default表示如果上面都不满足则执行该语句块。

现在我们的需求是每天都有固定的饭,通过程序来实现。示例代码如下:

// 表示今天星期几
var date = 1

/**
 * 根据今天日期来决定吃什么
*/

switch (date) {
    case 1:
        console.log("今天吃烤鸭");
        break;
    case 2:
        console.log("今天吃酱牛肉");
        break;
    case 3:
        console.log("今天吃辣子鸡");
        break;
    case 4:
        console.log("今天吃红烧肉");
        break;
    case 5:
        console.log("今天吃土豆鸡块");
        break;
    case 6:
        console.log("今天火锅");
        break;
    case 7:
        console.log("今天吃外卖");
        break;
    default:
        console.log("您的输入有误");
        break;
}

// 最终结果
// 今天吃烤鸭

break关键字

我们在switch语句中使用了break关键字,但是这并不是必须的,可以省略该关键字。

但是如果省略该关键字就会出现不一样的结果。示例代码如下:

// 表示今天星期几
var date = 1


switch (date) {
    case 1:
        console.log("今天吃烤鸭");
    // 省略 break;
    case 2:
        console.log("今天吃酱牛肉");
        break;
    case 3:
        console.log("今天吃辣子鸡");
        break;
    case 4:
        console.log("今天吃红烧肉");
        break;
    case 5:
        console.log("今天吃土豆鸡块");
        break;
    case 6:
        console.log("今天火锅");
        break;
    case 7:
        console.log("今天吃外卖");
        break;
    default:
        console.log("您的输入有误");
        break;
}
// 执行结果
// 今天吃烤鸭
// 今天吃酱牛肉

我们发现,省略的break关键字后,执行完case 1的语句块后并没有结束执行,有继续执行了case 2的语句块。

实际上,在switch语句中,只要没有遇到break关键字就会一直往下执行,不管下面的是否满足指定条件,直到switch语句执行结束。

default语句

switch语句的标准语法结构中,存在一个default语句,该语句一般放置在switch语句的最后面。其作用是case value中的值没有一个满足条件表达式时,该语句就会被执行。

但实际上,default语句不需要在最后面,可以在任意位置。示例代码如下:

var date = 1

switch (date) {
    case 1:
        console.log("今天吃烤鸭");
        break;
    case 2:
        console.log("今天吃酱牛肉");
        break;
    default:
        console.log("您的输入有误");
        break;
    case 3:
        console.log("今天吃辣子鸡");
        break;
    case 4:
        console.log("今天吃红烧肉");
        break;
    case 5:
        console.log("今天吃土豆鸡块");
        break;
    case 6:
        console.log("今天火锅");
        break;
    case 7:
        console.log("今天吃外卖");
        break;
}

// 最终结果
// 今天吃烤鸭

由代码可以看出,这个default语句的位置并不影响我们的结果,但是为了代码的可读性来说,尽量还是将其放置最后。

总结

条件语句(总结).png

预告:下一篇文章我们将来学习JavaScript中的循环语句

精彩文章

【从头学前端】05-详解JavaScript中的35种运算符

【从头学前端】04-搞懂JavaScript中的基本数据类型

【从头学前端】03-这次我就搞懂了JavaScript中的变量

【从头学前端】02-JavaScript词法结构

【从头学前端】01-什么是JavaScript