【零基础学JS - 11 】javaScript中的if..else表达式

👨‍💻 作者简介：程序员半夏 , 一名全栈程序员，擅长使用各种编程语言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.专注于大前端与后端的硬核干货分享,同时是一个随缘更新的UP主. 你可以在各个平台找到我!
🏆 本文收录于专栏: 零基础学JavaScript,包含JavaScript 基础知识,DOM相关知识,高级知识点,最新ES特性
————————————————————————
🔥 热门专栏:

🥇 学透CSS: 全网阅读超百万,CSDN最强CSS专栏,精通CSS全属性，不做切图仔，从订阅本专栏开始!

🥇 SprinbBoot + Vue3 项目实战: 新鲜出炉的2023实战系列博客,配套视频,用心打磨,篇篇精品.持续更新,值得订阅!

JavaScript中的条件语句

在计算机编程中，可能会出现需要在多个选择中运行一段代码块的情况。例如，根据学生获得的分数分配A、B或C等级。

在这种情况下，你可以使用JavaScript的if…else语句创建一个可以做出决策的程序。

在JavaScript中，if…else语句有三种形式。

• if语句
• if…else语句
• if…else if…else语句

JavaScript if语句

if语句的语法如下：

if (condition) {
    // if的代码块
}

if语句评估括号()内的条件。

如果条件评估为true，则执行if的代码块。

如果条件评估为false，则跳过if的代码块。

注意：{ }内的代码是if语句的代码块。

JavaScript if语句的工作原理

以下是if语句的工作原理：

// 检查数字是否为正数

const number = prompt("输入一个数字：");

// 检查数字是否大于0
if (number > 0) {
 // if语句的代码块
  console.log("数字是正数");
}

console.log("if语句很简单");

假设用户输入2。在这种情况下，条件number > 0评估为true。if语句的代码块被执行。

假设用户输入-1。在这种情况下，条件number > 0评估为false。因此，if语句的代码块被跳过。

由于console.log(“if语句很简单”);在if语句的代码块之外，因此它始终被执行。

在条件中使用比较和逻辑运算符。因此，要了解有关比较和逻辑运算符的更多信息，请访问JavaScript比较和逻辑运算符。

JavaScript if…else语句

if语句可以有一个可选的else子句。if…else语句的语法如下：

if (condition) {
    // 如果条件为true的代码块
} else {
   // 如果条件为false的代码块
}

if…else语句评估括号内的条件。

如果条件评估为true，

• 执行if的代码块
• 跳过else的代码块

如果条件评估为false，

• 执行else的代码块
• 跳过if的代码块

JavaScript if…else语句的工作原理

以下是if…else语句的工作原理：

// 检查数字是正数、负数还是零

const number = prompt("输入一个数字：");

// 检查数字是否大于0
if (number > 0) {
  console.log("数字是正数");
}
// 如果数字不大于0
else {
  console.log("数字是负数或0");
}

console.log("if...else语句很简单");

假设用户输入2。在这种情况下，条件number > 0评估为true。因此，执行if语句的代码块并跳过else语句的代码块。

假设用户输入-1。在这种情况下，条件number > 0评估为false。因此，执行else语句的代码块并跳过if语句的代码块。

JavaScript if…else if语句

if…else语句用于在两个选择中执行一段代码块。但是，如果需要在多个选择之间进行选择，则可以使用if…else if…else。

if…else if…else语句的语法如下：

if (condition1) {
    // 代码块1
} else if (condition2){
    // 代码块2
} else {
    // 代码块3
}

如果条件1评估为true，则执行代码块1。

如果条件1评估为false，则评估条件2。

如果条件2为true，则执行代码块2。

如果条件2为false，则执行代码块3。

JavaScript if…else if语句的工作原理

以下是if…else if…else语句的工作原理：

// 检查数字是否为正数、负数或零
const number = prompt("输入一个数字：");

// 检查数字是否大于0
if (number > 0) {
    console.log("数字是正数");
}
// 检查数字是否为0
else if (number == 0) {
  console.log("数字是0");
}
// 如果数字既不大于0，也不是0
else {
    console.log("数字是负数");
}

console.log("if...else if...else语句很简单");

假设用户输入0，则第一个测试条件number > 0评估为false。然后，评估第二个测试条件number == 0并执行其相应的代码块。

嵌套的if…else语句

你还可以在if…else语句内部使用if…else语句。这称为嵌套if…else语句。

以下是嵌套if…else语句的示例：

// 检查数字是否为正数、负数或零
const number = prompt("输入一个数字：");

if (number >= 0) {
    if (number == 0) {
        console.log("你输入了数字0");
    } else {
        console.log("你输入了正数");
    }
} else {
    console.log("你输入了负数");
}

假设用户输入5。在这种情况下，条件number >= 0评估为true，并且程序的控制进入外部if语句。

然后，评估内部if语句的测试条件number == 0。由于它是false，因此执行内部if语句的else子句。

注意：如你所见，嵌套if…else会使我们的逻辑复杂化，我们应该尽可能避免使用嵌套if…else。

只有一个语句的if…else语句的代码块

如果if…else语句的代码块只有一个语句，我们可以在程序中省略{ }。例如，你可以将

const number = 2;
if (number > 0) {
    console.log("数字是正数。");
} else {
   console.log("数字是负数或0。");
}

替换为

const number = 2;
if (number > 0)
    console.log("数字是正数。");
 else 
   console.log("数字是负数或0。");