第19节：逻辑运算符(转换为布尔值)

这个名字真的有十个字q
107 阅读1分钟

19.19.尚硅谷_JS基础_逻辑运算符(转换为布尔值)

一、非运算（符号： ！）

1、普通操作

  • ！可以用来对一个值进行非运算

  • 所谓非运算就是值对一个布尔值进行取反操作

    • eg. true 变 false ，false 变 true

  • 如果对一个值进行两次取反，它不会变化。

<!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 = true;

        //对a进行非运算
        a = !a
        console.log("a = " + a )
    </script>
</head>
<body>
    
</body>
</html>

image-20211106122523579

2、真正操作：

  • 如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反。
    • 所以我们可以利用该特点，来将一个其他的数据类型==转换为布尔值。==
    • 可以为一个任意数据类型取两次反，来将其==转换为布尔值==，原理Boolean（）函数一样
<!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 b = 10 ;//true
        b = !b;//变成false
        console.log("b = " + b);
        console.log(typeof b)
    </script>
</head>
<body>
    
</body>
</html>

image-20211106123615003

二、与运算（符号：&&）

1、普通应用

  • 可以对符号两侧的值进行与运算并返回结果
  • 运算规则：
    • 两个值中只要有一个值为false就返回false；
    • 只有两个值都为true时，才会返回true。
<!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则返回true
        var a = true && true;
        console.log(" a = " + a)
            a = true && false;
        //只要有一个false，就返回false
        console.log(" a = " + a)
            a = true && false;
    </script>
</head>
<body>
    
</body>
</html>

image-20211106125104956

2、特殊应用：

  • 当为true的时候出现：

  • 当为false的时候就不出现：

<!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的时候出现：
        true && alert("看我出不出来");
        //当为false的时候就不出现：
          false && alert("看我出不出来")；
    </script>
</head>
<body>
    
</body>
</html>

（1）true的时候:第一个值为true，会检查第二个值。

image-20211106130950225

（2）false的时候：第一个值为false，不会检查第二个值。

image-20211106131227867

三、或运算：（符号： ||）

1、普通操作：

  • ||可以对符号两侧的值进行或运算并返回结果
  • 运算规则：
    • 两个值中只要有一个true，就会返回true
      • 如果两个值都为false，才返回false。
<!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>
        //有一个为真则都为真
        a = 0 || 1;
        a = Boolean(a)
        console.log(a)
        
        a = 1 || 0;
        a = Boolean(a)
        console.log(a)
        
        a = 0 || 0;
        a = Boolean(a)
        console.log(a)
    </script>
</head>
<body>
    
</body>
</html>

image-20211106132259259

2、特殊操作：

（1）false

  • 第一个值为false，则会检查第二个值
<!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>
        false || alert("123")
    </script>
</head>
<body>
    
</body>
</html>

image-20211106132624035

（2）true

第一个值为true，则不再检查第二个值

<!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 || alert("123")
    </script>
</head>
<body>
    
</body>
</html>

image-20211106132735616

avatar
文章
阅读
粉丝