【JavaScript】相等运算符、条件运算符

本文链接：https://blog.csdn.net/hefaxiang/article/details/147592637

1、相等运算符

（1）==（相等）

相等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln(1 == 1);
        document.writeln("<br>");
        document.writeln(1 == 5);
    </script>
</head>

<body>

</body>

</html>

结果：

注意：当使用来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型（不一定转换为数字，大部分情况下转换为数字），然后再比较

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln("1" == 1);
    </script>
</head>

<body>

</body>

</html>

结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln(true == '1');
        document.writeln("<br>");
        document.writeln(null == 0);//没有将null转换为数值类型
    </script>
</head>

<body>

</body>

</html>

结果：

注意：undefined衍生自null,所以这两个值做相等判断时，会返回true。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln(undefined == null);
    </script>
</head>

<body>

</body>

</html>

结果：

注意：NaN不和任何值相等，包括它本身

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln(NaN == NaN);
        document.writeln("<br>");
        document.writeln(NaN == "12");
    </script>
</head>

<body>

</body>

</html>

结果：

判断一个值是不是NaN的函数：isNaN(),如果该值是NaN，则返回true，否则返回false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var ch = NaN;
        document.writeln(isNaN(ch));

    </script>
</head>

<body>

</body>

</html>

结果：

（2）！=（不等于）

不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln(122 != 12);
        document.writeln("<br>");
        document.writeln("abc" != "abc");

    </script>
</head>

<body>

</body>

</html>

结果：

注意：不相等也会对变量进行自动的类型转换，如果转换后相等它会返回false

（3）===（全等）

全等用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回false。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln("123" == 123);
        document.writeln("<br>");
        document.writeln("123" === 123);


    </script>
</head>

<body>

</body>

</html>

结果：

（4）！==（不全等）

不全等用来判断两个值是否不全等，它和不相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回true。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.writeln("123" != 123);
        document.writeln("<br>");
        document.writeln("123" !== 123);


    </script>
</head>

<body>

</body>

</html>

结果：

2、条件运算符（即：三元运算符）

语法：条件表达式？语句1：语句2；

执行的流程：

条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果，如果该值为false，则执行语句2，并返回执行结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        true ? alert("语句1") : alert("语句2");

    </script>
</head>

<body>

</body>

</html>

结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        false ? alert("语句1") : alert("语句2");

    </script>
</head>

<body>

</body>

</html>

结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 20;
        var b = 45;
        //获取a、b中的最大值
        var max = a > b ? a : b;
        document.writeln("max=" + max);

    </script>
</head>

<body>

</body>

</html>

结果；

注意：如果条件表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        "heello" ? alert("语句1") : alert("语句2");//"heello"转化为布尔值后为：true
        

    </script>
</head>

<body>

</body>

</html>

结果：