这是我参加 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