这是我参加8月更文挑战的第8天，流动详情查看：8月更文挑战

Hello 大家好，我是此岸繁華🌸，一个深信致力能够改变命运的前端👨🏻‍💻，如果有幸写的文章能够失去你的青眼，万分有幸~

本系列文章在掘金首发，编写不易转载请取得容许

条件语句

写在后面

这篇文章咱们未来学习JavaScript中的条件语句，通过本篇文章你将会把握如下内容：

什么是条件语句

所谓的条件语句 ，就是通过指定的表达式的运行后果来判断以后是执行还是跳过某些指定的语句块。简答的说就是如果指定的表达式的运算后果为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语句中的条件表达式为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时须要执行的语句块
}

依据下面的语法结构，能够绘制出如下流程图：

当条件表达式为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('你的问题不及格')
    }
}

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

依据流程图，能够很清晰的看到代码的执行流程是什么样子的

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语句来改写下面那个代码：

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语句应用条件表达式的执行后果，与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语句的地位并不影响咱们的后果，然而为了代码的可读性来说，尽量还是将其搁置最初。

总结

预报：下一篇文章咱们未来学习JavaScript中的循环语句

精彩文章

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

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

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

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

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