关系运算符

  • >
  • <
  • >=
  • <=
  • ==
  • !=
  • ===
  • !==

关系运算符的返回值

只有两个, 要么是 ​​true​​​, 要么是 ​​false​​​，如果关系成立, 就返回 ​​true​​​，如果关系不成立, 就返回 ​​false​​

关系运算符的注意点

  • 对于非数值类型的数据, 会先转换成数值类型, 再进行判断
  • 对于关系运算符来说, 任何数据和 NaN 进行比较, 返回值都是​​false​​
  • 如果参与比较的都是字符串类型, 那么不会转换成数值类型再比较, 而是直接比较字符对应的​​Unicode​​ 编码

示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let res = 10 != 5;
        console.log(res);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // let resOne = 1 > 1;
        let resOne = 1 > true;

        // let resTwo = 1 > 0;
        let resTwo = 1 > false;

        // let resThree = 1 > 0;
        let resThree = 1 > null;

        // let resFour = 1 > 10;
        let resFour = 1 > "10";

        console.log(resOne);
        console.log(resTwo);
        console.log(resThree);
        console.log(resFour);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_取值_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let resOne = 666 > NaN;

        // let res = 666 > NaN;
        let resTwo = 666 > undefined;

        console.log(resOne);
        console.log(resTwo);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_html_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // let resOne = 0061 > 0062;
        let resOne = "a" > "b";

        // let resTwo = 0062 > 0061;
        let resTwo = "b" > "a";

        // 如果字符串中有多个字符, 那么会从左至右的依次比较, 直到条件不满足为止
        let resThree = "ab" > "ac";

        console.log(resOne);
        console.log(resTwo);
        console.log(resThree);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_关系运算符_04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // false
        let resOne = null == 0;

        // false
        let resTwo = undefined == 0;

        // true
        let resThree = null == undefined;

        // 在企业开发中千万不要通过 == 来判断某一个数据是否是 NaN
        // 如果想判断某一个数据是否是 NaN 那么可以通过 isNaN 来进行判断
        // false
        let resFour = NaN == NaN;

        let resFive = NaN;

        console.log(resOne);
        console.log(resTwo);
        console.log(resThree);
        console.log(resFour);
        console.log(isNaN(resFive));
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_取值_05

=== 与 !==

会同时判断取值和数据类型，而 ​​==​​​ 与 ​​!=​​ 只会判断取值

关系运算符的结合性和优先级

  • 关系运算符都是左结合性(从左至右的运算)
  • 关系运算符中 > < >= <= 的优先级高于 == != === !==

示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // == 只会判断取值是否相等, 不会判断数据类型是否相等
        // let resOne = 123 == 123;true
        let resOne = 123 == "123";

        // === 不仅会判断取值是否相等, 并且还会判断数据类型是否相等
        // 只有取值和数据类型都相等, 才会返回true
        // let res = 123 == 123;false
        let resTwo = 123 === "123";

        console.log(resOne);
        console.log(resTwo);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_html_06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // let resOne = 123 != 123;false
        let resOne = 123 != "123";

        // let resTwo = 123 !== "123";true
        let resTwo = 123 !== "123";

        console.log(resOne);
        console.log(resTwo);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_关系运算符_07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // 注意点: 正是因为关系运算符是 `左结合性`, 所以不能利用关系运算符来判断区间
        // let resOne = true > 3;let resOne = 1 > 3;
        let resOne = 10 > 5 > 3;

        // let resTwo = true <= 20;let resTwo = 1 <= 20;
        let resTwo = 10 <= 25 <= 20;

        console.log(resOne);
        console.log(resTwo);

        // let resThree = 10 == true;let resThree = 10 == 1;
        let resThree = 10 == 10 > 0;
        console.log(resThree);
    </script>
</head>
<body>
</body>
</html>

JavaScript-关系运算符_html_08