非零基础自学前端最后一遍二 JavaScript基础 5 JavaScript分支语句 5.6 三元运算符的使用

落日映苍穹つ 2024-03-25 23:00 64阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  5 JavaScript分支语句
         *   *  5.6 三元运算符的使用
             *   *  5.6.1 三元运算符

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

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

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

##### 5.6 三元运算符的使用 #####

###### 5.6.1 三元运算符 ######

*  有时我们需要根据一个条件去赋值一个变量。
    
     *  比如比较数字大小的时候，获取较大的数字；
     *  这个时候if else语句就会显得过于臃肿，有没有更加简介的方法呢？
 *  条件运算符：’?’
    
     *  这个运算符通过问号 ? 表示；
     *  有时它被称为三元运算符，被称为“三元”是因为该运算符中有三个操作数（运算元）；
     *  实际上它是 JavaScript 中唯一一个有这么多操作数的运算符；
 *  使用格式如下:
    
    ![在这里插入图片描述][5f0636c4d4d8410897fb36ea481719b0.png_pic_center]
    
     *  计算条件结果，如果结果为真，则返回 value1，否则返回 value2。
 *  案例一： m=20，n=30，比较两个数字的大小，获取较大的那个数字
 *  案例二：判断一个人是否是成年人了

<!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>
    
        // 案例一: 比较两个数字
        var num1 = 12 * 6 + 7 * 8 + 7 ** 4
        var num2 = 67 * 5 + 24 ** 2
    
        // 三元运算符
        var result = num1 > num2 ? num1 : num2
        console.log(result)
    
        // 案例二: 给变量赋值一个默认值(了解)
        var info = {
          
          name: "why"
        }
        var obj = info ? info : {
          }
        console.log(obj)
    
        // 案例三: 让用户输入一个年龄, 判断是否成年人
        var age = prompt("请输入您的年龄:")
        age = Number(age)
        // if (age >= 18) {
          
        //   alert("成年人")
        // } else {
          
        //   alert("未成年人")
        // }
        var message = age >= 18 ? "成年人" : "未成年人"
        alert(message)
    
      </script>
    
    </body>
    
    </html>

渲染结果

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

[512552e12d034a8c85ff7fbd99582204.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/842b64184c1a455aaa56addebed4c710.png
[5f0636c4d4d8410897fb36ea481719b0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/df1eabc6efa442ae9f790ff9856fb510.png
[66c229ce0d614f678821709c88d3a57c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/720bed6f01f74ee880d726b1476d7682.png