第25节:条件运算符

214 阅读1分钟

条件运算符(也称:三元运算符)

一、概念:

1、语法

条件表达式: ?语句1 : 语句2

2、执行的流程:

  • 条件运算符在执行时,==首先对条件表达式进行求值,==
  • 如果该值为==true==,则执行==语句1==,并返回执行结果。
  • 如果该值为==false==,则执行==语句2==,并返回执行结果。
<!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>
    <script>
        true?console.log("语句1"):console.log("语句2")

        false?console.log("语句3"):console.log("语句4")

        var a = 30;
        var b = 20;

        a > b ? console.log("a大"):console.log("b大")
    </script>
</head>
<body>
    
</body>
</html>

image-20211108185312239

3、获取a和b的大小(挺重要的)

(1)基础操作:2个比较

<!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>
    <script>
        var a = 20 ;
        var b = 30 ;

        var max = a > b ? a : b

        console.log("max= " + max)
    </script>
</head>
<body>
    
</body>
</html>

image-20211108185729735

(2)进阶操作:3个比较

获取a,b,c

<!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>
    <script>
        var a = 20 ;
        var b = 30 ;
        var c = 40 ;
        var max = a > b ? a : b
       		max= c > max ? c : max

        console.log("max = " + max)
    </script>
</head>
<body>
    
</body>
</html>

image-20211108190228779

4、转换为布尔值:

  • 如果条件的表达式的求值结果是一个非布尔值
    • 会将其转换为布尔值,然后再进行比较
<!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>
    <script>
    "hello"? console.log("max"):console.log("min")
    </script>
</head>
<body>
    
</body>
</html>

image-20211108191842835