（day 5）JavaScript学习笔记（流程控制之条件判断if...else, if...else if..else,switch...case）

概述

        这是我的学习笔记，记录了JavaScript的学习过程，我是有一些Python基础的，因此在学习的过程中不自觉的把JavaScript的代码跟Python代码做对比，以便加深印象。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript，那么这一系列的学习笔记可能会对你有所帮助。

        今天主要学习流程控制中的条件判断，主要是代码语句块的含义、作用域，if...else, if...else if..else,switch...case。

1.代码语句块

        代码语句块（Code Block）在编程中指的是一系列按顺序执行的语句的集合。这些语句通常被包含在一对大括号{}内，用于定义代码的作用域或执行顺序。代码块可以出现在函数体、循环体、条件语句（如if语句或switch语句）等地方。

        如下代码示例：

//下面用一对大括号括起来的代码就是一个语句块，它形成了一个作用域
{
  var myname = "小红"; //var 关键字作用域是全局
  console.log(myname);

  let age = 18; //let 关键字作用域仅在这个语句块里
  console.log(age);
}

console.log(myname); //在代码语句块作用域外还可以访问变量myname
//console.log(age); //无法访问变量age，提示报错：Uncaught ReferenceError: age is not defined

2.if...else

        if...else语句的原理可以简单地描述为：

        （1）条件判断：程序首先会评估if语句后面的条件（通常是一个布尔表达式）。

        （2）执行路径：

                如果条件为真（true）：程序会执行if语句块内的代码，然后跳过else语句块（如果有的话）。

                如果条件为假（false）：程序会跳过if语句块内的代码，然后执行else语句块内的代码（如果提供了else语句块）。

        如下代码演示模拟用户登录的过程：

var passecode = prompt("请输入暗号");//prompt浏览器内置的函数，可以弹出输入框，接收用户输入数据
if (passecode == "爱你孤身走暗巷") {
  alert("登录成功");
} else {
  alert("登录失败");
}

        注意在JavaScript中的 if...else语法结构，条件判断语句放在if后面的小括号里，执行语句放在紧跟着的大括号里。

        在浏览里会弹出如下的窗口

        输入爱你孤身走暗巷后弹出如下截图

        if...else在Python中是这样来实现的：

# 以下是Python代码
passecode = input("请输入暗号")
if passecode == "爱你孤身走暗巷":
  print("登录成功")
else:
  print("登录失败")

3.if...else if..else

  if...else if..else相比if...else可以进行多次判断，它允许程序根据一系列条件执行不同的代码块。这个结构可以帮助程序根据多个可能的情况做出不同的响应。

        以下是 if...else if..else结构的基本工作原理：

        （1）条件判断：

        · 程序首先评估 if 语句后面的条件。

        · 如果 if 语句的条件为真（true），则执行 if 语句块内的代码，并跳过后续的所有 else if 和 else 语句块。

        · 如果 if 语句的条件为假（false），则程序会继续检查下一个 else if 语句（如果有的话）。

        （2）继续判断：

        · 对于每个 else if 语句，程序会评估其条件。

        · 如果某个 else if 语句的条件为真，则执行该 else if 语句块内的代码，并跳过后续的 else if 和 else 语句块。

        · 如果所有 else if 语句的条件都为假，则程序会执行 else 语句块内的代码（如果提供了 else 语句块）。

        （3）结束：

        · 一旦执行了某个语句块（无论是 if、else if 还是 else），程序就会跳出整个 if...else if...else 结构，并继续执行后面的代码。

        注意：在 if...else if...else 结构中，一旦某个条件为真并执行了相应的代码块，后续的条件将不再被评估。此外，else 语句块是可选的，但如果提供了 else 语句块，它将在所有前面的条件都不满足时执行。

        如下代码示例是模拟登录判断登录用户权限，根据不同的权限登录不同的页面：

var role = prompt("请输入用户权限");
if (role === "超级管理员") {
  alert("跳转到超级管理员页面");
} else if (role === "管理员") {
  alert("跳转到管理员页面");
} else {
  alert("跳转到其他用户页面");
}

        在Python中用if...elif...else来实现，如下代码：

# 以下是Python代码
role = input("请输入用户权限")
if role == "超级管理员":
  print("跳转到超级管理员页面")
elif role == "管理员":
  print("跳转到管理员页面")
else :
  print("跳转到其他用户页面")

4.switch...case

        switch...case是一种多分支选择结构，它允许程序根据一个表达式的值来执行不同的代码块。它的代码结构如下：

switch (expression) {  
    case constant1:  
        // 代码块1  
        break;  
    case constant2:  
        // 代码块2  
        break;  
    // ... 可以有更多的 case  
    default:  
        // 默认代码块  
}

         工作原理如下：

        表达式求值：首先计算 switch 语句中的 expression。这个表达式的结果必须是一个整型或字符型值。

        匹配检查：然后，程序会检查每个 case 标签后的常量值，看是否与 expression 的结果相匹配。如果找到匹配项，程序会执行该 case 下的代码块，直到遇到 break 语句或 switch 结构的末尾。

        执行代码：当找到匹配的 case 时，会执行该 case 下的代码，直到遇到 break 语句。如果没有 break 语句，代码会继续执行到下一个 case，这被称为“case 下落”。

        default 语句：如果 expression 的值不匹配任何 case 标签，程序会执行 default 标签下的代码块（如果存在的话）。default 语句是可选的，用于处理所有未明确指定的情况。

        注意事项如下：

        · case 后的常量值必须是唯一的，并且其类型必须与 expression 的结果类型相兼容。

        · break 语句用于终止 switch 语句的执行，并跳出整个结构。如果不使用 break，代码会继续执行到下一个 case，这可能导致逻辑错误。

        · default 语句是可选的，但通常建议包含它，以处理那些未明确列出的 case。

        如下是代码示例：

var role = prompt("请输入用户权限");
switch (role) {
  case "超级管理员":
    alert("跳转到管理员页面");
    break;//一定要有这个break，否则不会终止判断，会继续执行下面的代码
  case "管理员":
    alert("跳转到管理员页面");
    break;
  case "特殊用户":
    alert("跳转到特殊用户页面");
    break;
  case "一般用户":
    alert("跳转到一般用户页面");
    break;
  default:
    alert("未找到用户权限");
}

        PS：在Python中，并没有 switch...case结构。但是，Python提供了其他几种方式来实现类似的功能，其中最常见的是使用字典映射和if...elif...else语句。此处不展开叙述。

        以上便是今天学习的内容，如果对你有所帮助点个赞再走吧。