非零基础自学前端最后一遍二 JavaScript基础 5 JavaScript分支语句 5.1 代码执行方式和代码块的理解

àì夳堔傛蜴生んèń 2024-03-25 22:58 68阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  5 JavaScript分支语句
         *   *  5.1 代码执行方式和代码块的理解
             *   *  5.1.1 程序的执行顺序
                 *  5.1.2 代码块的理解

![在这里插入图片描述][adb1d5cc9bc04ee695c91b14f5b08dcf.png_pic_center]

#### 二 JavaScript基础 ####

#### 5 JavaScript分支语句 ####

##### 5.1 代码执行方式和代码块的理解 #####

###### 5.1.1 程序的执行顺序 ######

*  在程序开发中，程序有三种不同的执行方式：
    
     *  顺序 —— 从上向下，顺序执行代码
     *  分支 —— 根据条件判断，决定执行代码的 分支
     *  循环 —— 让 特定代码 重复 执行

![在这里插入图片描述][90371b574bc144dcbd0bb0fc7adb6011.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <script>
    
        // 1.顺序执行
        var num1 = 10
        var num2 = 20
    
        var result = num1 + num2
        var result2 = num1 * num2
    
        // 2.分支语句
        var isLogin = true
        if (isLogin) {
          
          console.log("访问购物车")
          console.log("访问个人中心")
        } else {
          
          console.log("跳转到登录页面")
        }
    
        // 3.循环语句
        var i = 0;
        while (i < 10) {
          
          console.log("执行循环语句")
          i++
        }
    
      </script>
    
    </body>
    
    </html>

###### 5.1.2 代码块的理解 ######

*  代码块是多行执行代码的集合，通过一个花括号\{\}放到了一起。
    
     *  在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中
    
    ![在这里插入图片描述][0ab62c354b794da19616ab9cbd4c58c6.png_pic_center]
 *  在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：
    
     *  通常会通过一些关键字来告知js引擎代码要如何被执行；
     *  比如分支语句、循环语句对应的关键字等；

[adb1d5cc9bc04ee695c91b14f5b08dcf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0a864078c0284ee59c10f43d3c773c0d.png
[90371b574bc144dcbd0bb0fc7adb6011.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3b8f97cfd48c4738b00a92eb9754d3f9.png
[0ab62c354b794da19616ab9cbd4c58c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d4738984b6a244338d35ae8453851b03.png