Web全栈工程师之路(三)——JavaScript篇(五)——运算符(二)

以下是html代码，个人建议放在IDE里运行，边看效果，边学习~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS初步(五)——运算符(二)</title>
    <script>
        /* 
            自增 ++
                - 通过自增可以使变量在自身的基础上增加1
                - 对于一个变量自增以后，原变量的值会立即自增1
                - 自增分成两种：a++ 和 ++a
                  两者都会立即使原变量的值自增1
                  a++ 和 ++a的值不同 
                  a++的值等于自增前的值，++a的值等于自增后的值
        
            自减 --
                - 通过自减可以使变量在自身的基础上减1
                - 自减分成两种：a-- 和 --a
                  两者都会立即使原变量的值自减1
                  a-- 和 --a的值不同
                  a--的值等于自减前的值，--a的值等于自减后的值

            逻辑运算符
                - js中提供了三种逻辑运算符
                ! 非
                    - !可以用来对一个值进行非运算
                    - 所谓非运算就是对一个布尔值进行取反操作
                      true变false，false变true
                    - 如果对一个值进行两次取反，值不变
                    - 如果对非布尔值进行运算，会先转成布尔值，再进行运算
                      可利用此特性来进行类型转换，即取两次反
                      其原理和Boolean()函数一样

                && 与
                    - &&可以用来对符号两侧的值进行与运算
                    - 运算规则
                        - 两个值中只要有一个false就返回false，否则返回true
                        - js中的"与"属于短路的与，如果第一个为false则不会看第二个

                || 或
                    - ||可以用来对符号两侧的值进行或运算
                    - &&可以用来对符号两侧的值进行与运算
                    - 运算规则
                        - 两个值中只要有一个为就返回true，否则返回false
                        - js中的"或"属于短路的或，如果第一个为true则不会看第二个
                
                && || 非布尔值的情况
                - 对于非布尔值进行与或运算时，先转成布尔值，然后再运算，并且返回原值
                    &&运算
                        - 如果第一个值为true，则直接返回第二个值
                        - 如果第一个值为false，则直接返回第一个值
                    ||运算
                        - 如果第一个值为true，则直接返回第一个值
                        - 如果第一个值为false，则直接返回第二个值
        */
        
        //自增
        var a = 1;
        a++; //a自增1
        console.log(a++);
        console.log(++a);
        console.log("a = "+a);

        var a = 20;
        var b = a++ + ++a + a;
        console.log(b); //输出64

        var a = 20;
        var a = a++;
        console.log(a); //输出20
        
        //非运算
        var a = true;
        a = !a;
        console.log(a); //输出false
        a = !!a;
        console.log(a); //输出false

        //非布尔值运算
        var b =10;
        b = !b;
        console.log(b); //输出false

        //与运算
        var a = true && true;
        console.log(a); //输出true
        var a = false && true;
        console.log(a); //输出false
        var a = false && false;
        console.log(a); //输出false

        false && alert("没出来")
        true && alert("出来了")

        //或运算
        var a = true || false;
        console.log(a); //输出true
        var a = true || true;
        console.log(a); //输出true
        var a = false || false;
        console.log(a); //输出false

        //非布尔值的与或运算
        //&&运算：如果两个值都为true，则返回后边的
        var a = 1 && 2;
        console.log(a); //输出2

        //&&运算：如果两个值中有false、true，则返回false的
        var a = 0 && 2;
        console.log(a); //输出0

        //&&运算：如果两个值都为false，则返回前面的
        var a = NaN && 0;
        console.log(a); //输出NaN

        //||运算：如果两个值都为true，则返回前边的
        var a = 3 || 2;
        console.log(a); //输出3

        //||运算：如果两个值中有false、true，则返回true的
        var a = 0 || 1;
        console.log(a); //输出3
        
        //||运算：如果两个值都为false，则返回后边的
        var a = NaN || 0;
        console.log(a); //输出3

    </script>
</head>
<body>
    
</body>
</html>
代码效果：
Web全栈工程师之路(三)——JavaScript篇(五)——运算符(二)

猜你喜欢
