非零基础自学前端最后一遍二 JavaScript基础 5 JavaScript分支语句 5.3 if分支语句和补充内容

Love The Way You Lie 2024-03-25 22:59 71阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  5 JavaScript分支语句
         *   *  5.3 if分支语句和补充内容
             *   *  5.3.1 单分支结构
                 *  5.3.2 if语句的细节补充

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

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

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

##### 5.3 if分支语句和补充内容 #####

###### 5.3.1 单分支结构 ######

*  单分支语句：if
    
     *  if(…) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。
    
    ![在这里插入图片描述][61d8f518497444d787d9b6d8e72ce895.png_pic_center]
 *  案例一: 如果小明考试超过90分, 就去游乐场
    
     *  “如果”相当于JavaScript中的关键字if
     *  分数超过90分是一个条件(可以使用 > 符号)
 *  案例二：单位5元/斤的苹果，如果购买超过5斤，那么立减8元
    
     *  注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果

<!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>
    
        // 案例一: 如果小明考试超过90分, 就可以去游乐场
        // 1.定义一个变量来保存小明的分数
        var score = 99
    
        // 2.如果分数超过90分, 去游乐场
        if (score > 90) {
          
          console.log("去游乐场玩~")
        }
    
    
        // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
        // 1.定义一些变量保存数据
        var price = 5
        var weight = 7
        var totalPrice = price * weight
    
        // 2.根据购买的重量, 决定是否 -8
        if (weight > 5) {
          
          totalPrice -= 8
        }
    
        console.log("总价格:", totalPrice)
    
    
        // 案例三: 播放列表中 currentIndex
        // ["鼓楼", "理想", "阿刁"]
        var currentIndex = 2
    
        // 对currentIndex++完操作之后
        currentIndex++
        if (currentIndex === 3) {
          
          currentIndex = 0
        }
    
    
      </script>
    
    </body>
    
    </html>

渲染结果

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

###### 5.3.2 if语句的细节补充 ######

*  补充一：如果代码块中只有一行代码，那么\{\}可以省略：
 *  补充二：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）。
    
     *  转换规则和Boolean函数的规则一致；
     *  数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。
        
         *  因为它们被称为“假值（falsy）”；
     *  其他值被转换为 true，所以它们被称为“真值（truthy）”；

<!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>
    
        // 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
        // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
        // 定义一些变量保存数据
        var price = 5
        var weight = 7
        var totalPrice = price * weight
    
        // 2.根据购买的重量, 决定是否 -8
        if (weight > 5) totalPrice -= 8
    
        console.log("总价格:", totalPrice)
    
        // 补充二: if (条件判断)
        var num = 123 // true
        if (num) {
          
          console.log("num判断的代码执行")
        }
    
      </script>
    
    </body>
    
    </html>

渲染效果

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

[ec7c4298fea44281b0d6a7f30a65a256.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/530203dd249841388cc5051f11769ad6.png
[61d8f518497444d787d9b6d8e72ce895.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1fbb3d08433043cdbe0379a85730edcc.png
[53fd4e109dab423c9027e1e4c687227d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/37021d41b95c42e1a6d5495d803f3543.png
[0d253926516c42c196599423ccba027e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/10f8086ddf6c483091efe83856ef1af6.png