JavaScript常用的运算符以及自增自减

最新推荐文章于 2024-07-30 17:19:26 发布

F Angel、青春

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量390

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_68925120/article/details/133792377

版权

一.算术运算符

JavaScript中的运算符有：加（+）、减（-）、乘（*）、除（/）

console.log(2 * 4 + 5 / 1);
        console.log(4 % 3);
        console.log((5 + 2) % 5);

二.赋值运算符

1.赋值运算符：= ；（将等号右边的值赋给等号左边的变量）

2.自增：num++ ；（此语法为自增的语法，表示该变量先进行运算，然后再进行+1的操作）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // = 将 右边的值赋给左边的变量
        var num = 10;
        // num = num + 10;
        // console.log(num);

        // 简写
        num += 10;
        // 等价于
        // num = num + 10;
        console.log(num);

        // num = num * 10;
        num *= 10;
        console.log(num);

        // -=num
        // /=num
        // %=num
    </script>
</body>

</html>

3.自减：num-- ；（此为该变量的自减，表示该变量先进行运算，然后再进行-1操作）

注：自增和自减如果 ++（--）在变量的前面，则表示该变量先进行 +1（-1），然后再进行运算。

三.逻辑与 &&

1.概念：逻辑与操作符左右两边的操作数只要有一个操作数结果为假，那么整体结果就为假,并且返回false的操作数；如果两个操作数都是true的话则返回第二个操作数；如果第一个操作数结果是false 那么久返回第一个操作数

2.相关的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // && 逻辑与
        console.log(false && true);
        console.log(true && false);
        // 概念：
        // 逻辑与操作符 左右两边的操作数 只要有一个操作数结果为假
        // 那么整体结果就为假,并且 返回false的操作数

        console.log('' && '123');
        console.log(0 && 1);

        // 如果两个操作数都是true的话 则返回第二个操作数
        console.log("123" && 100);

        // 如果第一个操作数结果是false 那么久返回第一个操作数
        console.log(null && undefined);
    </script>
</body>

</html>

四.逻辑或 ||

1.概念：逻辑或|| 左右两边的操作数只要有一个结果为true 整体结果就为true，并且返回结果为true的操作数；如果第一个操作数为true 就直接返回第一个操作数；如果第一个操作数为false 则去寻找第二个操作数如果也是false 则返回第二个操作数。

2.相关的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 逻辑或 ||

        console.log(true || false);
        console.log(false || true);
        // 概念
        // 逻辑或|| 左右两边的操作数 只要有一个结果为true 整体结果就为true
        // 并且返回 结果为true的操作数

        console.log('' || "123");

        // 如果第一个操作数为true 就直接返回第一个操作数
        console.log(100 || undefined);
        console.log(100 || 200);

        // 如果第一个操作数为false 则去寻找第二个操作数 如果也是false 则
        // 返回第二个操作数
        console.log(null || undefined);
    </script>
</body>

</html>

五.逻辑非！

1.概念：取反把你的操作数隐式转换成布尔并且取反

2.相关的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 逻辑非 ! 取反 把你的操作数隐式转换成布尔 并且取反

        console.log(!true);

        console.log(!'');


        console.log(!123);

        console.log(undefined && !undefined); //undefined

        console.log(undefined || !undefined); //true
    </script>
</body>

</html>

六.关系运算符

1.关系运算有：< > <= >= == === != !== ；

2.相关的代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        //  < > <= >= == === != !==;

        console.log(3 < 2); //false
        console.log(3 > 2); //true

        console.log(10 <= 11); //true
        console.log(11 <= 11); //true

        console.log(11 >= 11); //true
        console.log(12 >= 11); //true


        // == ===
        // 比较两个操作数是否相等
        console.log(10 == 10);
        console.log(10 == '10'); //true
        console.log(undefined == undefined); //true
        console.log(null == null); //true
        // == 具有隐式类型转换
        // 会先将 左右两边的操作数 转换成同一种数据类型然后在进行比较

        // ===
        console.log(123 === 123);
        console.log(123 === '123');
        console.log(undefined === undefined);
        console.log(null === null);
        // === 不具备隐式类型转换 先比较数据类型 如果不相等结果就是false


        
        // != 不等
        console.log(11 != 11);//false
        console.log(11 != '11');//false

        // !== 不全等
        console.log(11 !== '11');//trues
    </script>
</body>

</html>

注：“==”和“===”的区别是，“==”具有隐式类型转换，它会先进行隐式转换再进行比较；“===”不具备隐式类型转换，它会先比较数据类型，如果不等的话，结果就会为false，否则为true。

七、三元运算符

1.语法

表达式 ? 表达式结果为true执行的代码 : 表达式结果为false执行的代码

2.作用

用于作简单的业务逻辑判断

好处：简单，易读，易写

不足：不能作复杂的业务逻辑判断

3.常用的运算符优先级从高到低

1. ( )优先级最高

2. 一元运算符 ++ -- !

3. 算数运算符先* / % 后 + -

4. 关系运算符 > >= < <=

5. 相等运算符 == != === !==

6. 逻辑运算符先&& 后||

7. 赋值运算符

4.代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var weather = prompt("请输入现在的天气");
        weather == "晴天" ? alert("出去玩耍") : alert('在家敲代码');
    </script>
</body>

</html>