什么是逻辑运算符

名称? 格式? 返回值? 特点?

逻辑与 &&

格式：条件表达式A && 条件表达式B

返回值: true false

特点: 一假则假

逻辑或 ||

格式: 条件表达式A || 条件表达式B

返回值: true false

特点: 一真则真

逻辑非 !

格式: !条件表达式

返回值: true false

特点: 真变假, 假变真

如上的示例分别如下

逻辑与(&&)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // true && true
        let resOne = (10 > 5) && (20 > 10);

        // true
        let resTwo = true && true;

        // false
        let resThree = false && true;

        // false
        let resFour = true && false;

        // false
        let resFive = false && false;
        
        console.log(resOne);
        console.log(resTwo);
        console.log(resThree);
        console.log(resFour);
        console.log(resFive);
    </script>
</head>
<body>
</body>
</html>

JavaScript-逻辑运算符_与运算

逻辑或(||)

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

        // true
        let resTwo = false || true;

        // true
        let resThree = true || false;

        // false
        let resFour = false || false;

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

JavaScript-逻辑运算符_html_02

逻辑非(!)

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

        // true
        let resTwo = !false;

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

JavaScript-逻辑运算符_与运算_03

逻辑运算符的优先级和结合性

逻辑运算符的结合性是 ​​左结合性​​(从左至右的运算)

在逻辑运算中 ​​&&​​​ 的优先级高于 ​​||​​

逻辑运算符的注意点

  1. 在逻辑运算中如果不是布尔类型, 那么会先转换成布尔类型, 再参与其它的运算
  2. 在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点

格式: 条件A && 条件B

如果条件A不成立, 那么就返回条件A

如果条件A成立, 无论条件B是否成立, 都会返回条件B

  1. 在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点

格式: 条件A || 条件B

如果条件A成立, 那么就返回条件A

如果条件A不成立, 无论条件B是否成立, 都会返回条件B

  1. 在逻辑与运算中, 有一个逻辑短路现象

格式: 条件A && 条件B

由于逻辑与运算的规则是一假则假, 所以只要条件A是假, 那么条件B就不会运算

  1. 在逻辑或运算中, 有一个逻辑短路现象

格式: 条件A || 条件B

由于逻辑或运算的规则是一真则真, 所以只要条件A是真, 那么条件B就不会运算

示例分别如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let resOne = true && false;
        let resTwo = false;
        let resThree = true || false;
        let resFour = true;
        let resFive = true || false && false;

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

JavaScript-逻辑运算符_html_04

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

        // let resTwo = !true;
        let resTwo = !1;

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

JavaScript-逻辑运算符_与运算_05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        // 如果条件A不成立, 那么就返回条件A
        let resOne = 0 && 123;
        let resTwo = null && 123;

        // 如果条件A成立, 无论条件B是否成立, 都会返回条件B
        let resThree = 1 && 123;
        let resFour = 1 && null;

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

JavaScript-逻辑运算符_与运算_06

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

        //             false           true
        let resOne = (10 > 20) && (++num > 0);

        //             true            true
        let resTwo = (10 < 20) || (++num > 0);

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

JavaScript-逻辑运算符_与运算_07

上图中的 num 打印的结果为 ​​1​​​ 因为在 ​​resOne​​​ 这个表达式中第一个表达式A中的结果是 ​​false​​ 所以表达式B就不会再执行