JavaScript 2—运算符

最新推荐文章于 2024-09-25 14:00:00 发布

悟大师

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量125

点赞数

文章标签： javascript 前端 vue.js 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_46371399/article/details/126152067

版权

算术运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            运算符也叫操作符
                通过运算符可以对一个或多个值进行运算 
                比如：typeof就是运算符，可以来获得一个值的类型
                    它会将该值的类型以字符串的形式返回
                    number string boolean undefined object
                算术运算符
                    当对非Number类型的值进行运算时，会将这些值转换为Number在进行计算
                +
                    +可以对两个值进行加法运算，并将结果返回
                    如果对两个字符串进行加法运算，则会做拼串
                        会将两个字符串拼接为一个字符串，并返回
                    任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
                -
                    -可以对两个值进行减法运算，并将结果返回
                *
                    *可以对两个值进行乘法运算
                /
                    /可以对两个值进行除法运算
                %
                    %取模运算(取余数)
        */
        var a = 123;
        var result = typeof a;
        console.log(typeof result);
        a + 1;
        console.log(a);
        a = a + 1;
        console.log(a);
        a = true + 1;
        console.log(a);
        a = true + false;
        console.log(a);
        a = 2 + null;
        console.log(a);
        a = true + false;
        console.log(a);
        a = "123" + "456";
        console.log(a);
        console.log(typeof a);
        var str = "锄禾日当午" +
            "汗滴禾下土" +
            "谁知盘中餐" +
            "粒粒皆辛苦";
        console.log(str);
        a = 123 + "1";
        console.log(str);
        a = true + "hello";
        console.log(str);
        //任何值和字符串相加都会转换为字符串，并做拼串操作
        a = 123 + "";
        // a = String(a);
        console.log(typeof a);
        console.log(a);
        a = null;
        a = a + "";
        // a = String(a);
        console.log(typeof a);
        console.log(a);

        a = 123;
        console.log("a = " + a);

        a = 1 + 2 + "3";//33
        console.log("a = " + a);
        a = "1" + 2 + 3;
        console.log("a = " + a);

        // 减法运算
        a = 100 - 5;
        console.log("a = " + a);
        a = 100 - true;
        console.log("a = " + a);
        a = 100 - "1";
        console.log("a = " + a);

        //乘法运算
        a = 2 * 2;
        console.log("a = " + a);
        a = 2 * "8";
        console.log("a = " + a);
        a = 2 * undefined;
        console.log("a = " + a);
        a = 2 * null;
        console.log("a = " + a);

        // 除法运算
        a = 3 / 2;
        console.log("a = " + a);

        // 任何值做 - * /运算都会自动转换成Number
        a = "123";
        console.log(typeof a);
        console.log("a = " + a);
        // a = Number(a);
        a = a - 0;
        a = a * 1;
        a = a / 1;
        console.log(typeof a);
        console.log("a = " + a);

        // 取余运算
        a = 9 % 3;
        console.log("a = " + a);
    </script>
</head>

<body>
</body>

</html>

一元运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            一元运算符，只需要一个操作数
            + 正号
                正号不会对数字产生任何影响
            - 负号
                负号可以对数字进行负号的取反
            对于非Number类型的值
                它会将其先转换为Number，然后再运算
                可以对一个其他的数据类型使用+，将转换为Number
                它的原理和Number()一样
        */
        var a = 123;
        a = +a;
        console.log("a = " + a);

        a = true;
        console.log(typeof a);
        console.log(a);
        a = -a;
        console.log(typeof a);
        console.log(a);

        a = 18;
        console.log(typeof a);
        console.log(a);
        a = +a;
        console.log(typeof a);
        console.log(a);

        a = 1 + +"2" + 3;
        console.log(typeof a);
        console.log(a);
    </script>
</head>

<body>
</body>

</html>

自增自减运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            自增++
                通过自增可以使变量在自身的基础.上增加1
                对于一个变量自增以后，原变量的值会立即自增1
                自增分成两种:后++(a++) 和前++(++a)
                    无论是a++还是++a,都会立即使原变量的值自增1
                    不同的是a++和++a的值不同
                    a++的值等于原变量的值(自增前的值)
                    ++a的值等于原变量新值(自增后的值)
            
            自减--
                通过自减可以使变量在自身的基础上减1
                自减分成两种: 后--(a--)和前--(--a)
                无论是a--还是--a都会立即使原变量的值自减1   
                    不同的是a--和--a的值不同
                    a--是变量的原值(自减前的值)
                    --a是变量的新值(自减以后的值)

        */
        var a = 1;
        //使a自增1
        a++;
        console.log(a);
        a = a++;
        console.log(a);

    </script>
</head>

<body>
</body>

</html>

逻辑运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            !非
                !可以用来对一个值进行非运算
                    所谓非运算就是值对一个布尔值进行取反操作，
                    true变false, false变true
                    如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反
                    所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值
                    可以为一个任意数据类型取两次反，来将其转换为布尔值，
                    原理和Boolean()函数一样

            &&与
                &&可以对符号两侧的值进行与运算并返回结果
                运算规则
                    两个值中只要有一个值为false就返回false,
                        只有两个值都为true时，才会返回true

            ||或
                ||可以对符号两侧的值进行或运算并返回结果
                运算规则:
                    两个值中只要有一个true,就返回true
                        如果两个值都为false,才返回false
                    JS中的“或”属于短路的或
                        如果第一个值为true,则不会检查第二个

        */
        var a = 10;
        a = !!a;
        console.log(typeof a);
        console.log(a);
        //第一个值为true,会检查第二个值
        //true && alert("看我出不出来! ! ");
        //第一个值为false,不会检查第二个值
        false && alert("看我出不出来！！");


    </script>
</head>

<body>
</body>

</html>

赋值运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            =   可以将符号右侧的值赋值给符号左侧的变量
            +=  a += 5 等价于 a = a + 5
            -=  a -= 5 等价于 a = a - 5
            *=  a *= 5 等价于 a = a * 5
            /=  a /= 5 等价于 a = a / 5
            %=  a %= 5 等价于 a = a % 5
        */

    </script>
</head>

<body>
</body>

</html>

关系运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            通过关系运算符可以比较两个值之间的大小关系，
                如果关系成立它会返回true,如果关系不成立则返回false
            > 大于号
                判断符号左侧的值是否大于右侧的
                如果关系成立，返回true,如果关系不成立则返回false
            >= 大于等于
                判断符号左侧的值是否大于或等于右侧的
            < 小于号
            <= 小于等于

            非数值的情况
                将其转换为数值然后在比较
                如果符号两侧的值都是字符串时，下会将其转换为数字进行比较
                    而会分别比较字符串中字符的Unicode编码

        */
        var result = 5 > 10;
        console.log("result = " + result);
        console.log(1 > true);
        console.log(1 >= true);
        console.log(1 > "0");//true
        console.log(10 > null);//true
        // 任何值和NaN做任何比较都是false
        console.log(10 < "hello");//false
        console.log(true > false);//true

        console.log("1" < "5");//true
        // 如果比较的两个字符串型的数字，可能会得到不可预期的结果
        console.log("11" < "5");//true
        // 注意：在比较两个字符串型的数字时，一定要转型
        console.log("11" < +"5");//false


        console.log("a" < "b");//true a 61   b 62
        console.log("a" > "b");//false
        //比较字符编码时是一位一位进行比较
        //如果两位一样，则比较下一位，所以借用它对英文进行排序
        console.log("bbc" < "b");//false
        // 比较中文没有意义
        console.log("戒" < "我");//true

        /*
            ==  相等运算符用来比较两个值是否相等，
                如果相等会返回true，否则返回false
                使用==来做相等运算
                    当使用==来比较两个值时，如果值的类型不同，
                        则会自动进行类型转换，将其转换为相同的类型
                        然后在比较
            !=  不相等用来判断两个值是否不相等，如果不相等返回true,否则返回false
                    使用!=来做不相等运算
                不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

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

            !== 用来判断两个值是否不全等，它和不等类似，不同的是它不会做类型转换
                如果两个值的类型不同，直接返回true
        */
        console.log(1 == 1);//true
        console.log("1" == 1);//true
        console.log(true == "1");//true
        console.log(null == 0);//false

        /*
            undefined 衍生自null
            所以这两个值做相等判断时，会返回true
        */
        console.log(undefined == null);//true
        /*
            NaN不和任何值相等，包括他本身
        */
        console.log(undefined == null);//false

        // 判断b的值是否是NaN
        var b = NaN;
        // console.log(b==NaN);
        // 可以通过isNaN()函数来判断一个值是否是NaN
        console.log(isNaN(b));

        console.log("1" != 1);

        console.log("1" === 1);
        console.log(null === undefined);


    </script>
</head>

<body>
</body>

</html>

Unicode编码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
            在字符串中使用转义字符输入Unicode
            \u四位编码
        */
        console.log("\u2620");

    </script>
</head>

<body>
    <!--
        在网页中使用Unicode编码
        &#编码;这里的编码需要的是10进制
    -->
    <h1 style="font-size: 200px;">&#9760;</h1>

</body>

</html>

条件运算符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
           条件运算符也叫三元运算符
            语法:
                条件表达式?语句1:语句2
            执行的流程:
                条件运算符在执行时，首先对条件表达式进行求值，
                    如果该值为true,则执行语句1，并返回执行结果
                    如果该值为false,则执行语句2，并返回执行结果

        */
        true ? alert("语句一") : alert("语句二");
        var a = 10;
        var b = 20;
        var c = 30;
        // a > b ? alert("a大") : alert("b大");

        // 这种写法不推荐使用，不方便阅读
        var max = a > b ? a > c ? a : c : b > c ? b : c;

        "hello" ? alert("语句一") : alert("语句二");
    </script>
</head>

<body>
</body>

</html>

优先级

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /*
           ,运算符
           使用,可以分割多个语句，一般可以在声明多个变量时使用
        */
        //使用，运算符同时声明多个变量
        var a = 1, b, c;
        alert(b);

        /*
            就和数学中一样，在JS中运算符也有优先级，
                比如:先乘除后加减
            在JS中有一一个运算符优先级的表，
                在表中越靠上尤先级越高，优先级越高越优先计算
                如果优先级一样，则从左往右计算

        */

        // 如果||的优先级高，或者两个一样高，则应该返回3
        // 如果与的优先级高，则应该返回1
        varresult = 1 || 2 && 3;//1
        console.log("result = " + result);

        varresult = (1 || 2) && 3;//3
        console.log("result = " + result);
    </script>
</head>

<body>
</body>

</html>