前端学习笔记-JS-运算符

最新推荐文章于 2022-07-31 10:03:20 发布

Nanami Touko

最新推荐文章于 2022-07-31 10:03:20 发布

阅读量486

点赞数

分类专栏：前端学习-JavaScript

本文链接：https://blog.csdn.net/qq_36434637/article/details/100623544

版权

前端学习-JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

运算符（操作符） operator

JS常用运算符：

算术运算符
一元运算符
比较运算符
逻辑运算符
赋值运算符

表达式和返回值

表达式：由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

简单理解：由数字、运算符、变量等组成的式子

返回值：表达式最终都会有一个结果，返回给我们，我们称为返回值

算术运算符

+ - * / %

一元运算符

一元运算符：只有一个操作数的运算符

++ 自身加1

-- 自身减1

！取反

前置++

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
        var num = 1;
        num = num + 1; // ++num
        num = num + 1;
        console.log(num); // 3
        // 2. 前置递增运算符  ++ 写在变量的前面
        var age = 10;
        ++age; // 类似于 age = age + 1
        console.log(age);
        // 3. 先加1  后返回值
        var p = 10;
        console.log(++p + 10);
    </script>
</head>

<body>

</body>

</html>

后置++

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num = 10;
        num++; // num = num + 1    ++num;
        console.log(num);
        // 1. 前置自增和后置自增如果单独使用 效果是一样的
        // 2. 后置自增 口诀：先返回原值 后自加1 
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
    </script>
</head>

<body>

</body>

</html>

总结 前置++：先加1，后参与运算 后置++：先参与运算，后加1 上面两个理解后，下面两个自通 前置-- ：先减1，后参与运算 后置-- ：先参与运算，后减1

逻辑运算符(布尔运算符)

用来进行布尔值运算的运算符，返回值也是布尔值。

&&  与（and）  两个操作数同时为true，结果为true，否则都是false
||  或（or）   两个操作数有一个为true，结果为true，否则为false
!   非（not）  取反

短路运算（逻辑中断）

原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再进行运算右边的表达式的值

1.逻辑与

语法：表达式1 && 表达式2

如果第一个表达式1的值为真，则返回表达式2

如果第一个表达式1的值为假，则返回表达式1

2.逻辑或

语法：表达式1 || 表达式2

如果第一个表达式1的值为真，则返回表达式1

如果第一个表达式1的值为假，则返回表达式2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1. 用我们的布尔值参与的逻辑运算  true && false  == false 
        // 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ 
        // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
        console.log(123 && 456); // 456
        console.log(0 && 456); //  0
        console.log(0 && 1 + 2 && 456 * 56789); // 0
        console.log('' && 1 + 2 && 456 * 56789); // ''
        // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN
        // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 456 + 123); // 456   0||456返回456 然后456||456+123 即返回456
        // 逻辑中断很重要 它会影响我们程序运行结果
        var num = 0;
        console.log(123 || num++);
        console.log(num); // 0
    </script>
</head>

<body>

</body>

</html>

比较运算符（关系运算符）

是两个数据进行比较时所用的运算符，比较运算后，会返回一个布尔值作为比较运算的结果

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较
              ===类型和值同时相等，则相等

var result = '55' == 55;    // true
var result = '55' === 55;   // false 值相等，类型不相等
var result = 55 === 55;     // true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;   //相当于  num = num + 5;

运算符的优先级

运算符的对数据类型的自动转换

JavaScript有一些语句/运算符对数据类型有要求，但我们提供的与预期不符时，就会发生自动类型转换。

　　对数据类型有期待的语句和表达式：

　　　　1、期待boolean类型的： if 语句、 do while 语句、 while do 语句、 && || ！（与或非逻辑表达式）、 ? : （三目运算符）

　　　　2、期待number类型的： + - * / % （算数运算符）、 ++ -- （增量/减量运算符）、 > 、 >= 、 < 、 <= 数字比较

　　　　3、期待字符串的： + （字符串连接）、 > 、 >= 、 < 、 <= 字母排序比较

　　　　4、特殊的 : == 、 != (不)相等运算符，在检测两个操作数是否相等时，会进行类型转换；（注意： === 、!== 是（不）严格相等运算符，是不会进行类型转换的）

Nanami Touko

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-JS-运算符

运算符（操作符） operatorJS常用运算符：算术运算符一元运算符比较运算符逻辑运算符赋值运算符表达式和返回值表达式：由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解：由数字、运算符、变量等组成的式子返回值：表达式最终都会有一个结果，返回给我们，我们称为返回值算术运算符+ - * /...
复制链接

扫一扫

专栏目录