02-JS运算符md

codealiang

已于 2022-04-05 15:02:20 修改

阅读量1.1k

点赞数 1

分类专栏： JS基础文章标签：前端

于 2022-03-31 14:58:32 首次发布

本文链接：https://blog.csdn.net/weixin_44941576/article/details/123872429

版权

JS基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

运算符

在程序的运行和开发当中呢，都涉及到运算，我们来了解一下JS中的运算符。以下为运算符篇的学习目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUpCWfpt-1648709903832)(02-JS运算符md.assets/1648262568215.png)]

算术运算符

目标：握算术运算符，能写出一些具备运算能力的小程序

1.什么是算数运算符？

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）
- 取模在开发中经常作为某个数字是否被整除

2.算数运算符的优先级

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的

3.练习

计算出下方图片中的表达式结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQIj3i0M-1648709903833)(02-JS运算符md.assets/1648262987624.png)]

结果显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PDcTdcNs-1648709903833)(02-JS运算符md.assets/1648263066973.png)]

赋值运算符

1.什么是赋值运算符？

赋值运算符：对变量进行赋值的运算符。（就是在之前变量的学习中，给变量进行赋值）

已经学过的赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个变量

2.赋值运算符的执行过程

将等号右边的值赋予给左边, 要求左边必须是一个变量

3.其他的赋值运算符

使用这些运算符可以在对变量赋值时进行快速操作

+=
-=
*=
/=
%=

（+= *= 等出现是为了简化代码）

3.赋值运算符的使用

以前我们让一个变量加 1 如何做的？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fKaSkO6C-1648709903833)(02-JS运算符md.assets/1648263325048.png)]

写的方式比较繁琐，要来回写变量名称，那是否有一种比较简洁的方式来实现更加高效的写法呢？

可以使用赋值运算符来提高效率，使代码更加简洁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hbxhwVY0-1648709903834)(02-JS运算符md.assets/1648263526650.png)]

代码：

    <script>
        let num = 1 //想要让num加1
        num = num + 1 //这是之前的做法
        console.log(num);
        //使用赋值运算符进行计算
        num += 1 //num +=1 等于 num = num+1 这是经过简化得来的
        console.log(num);
        // 让变量乘以5
        let a = 10
        a *= 5
        console.log(a); //输出结果为50  表达式等同于 a = a * 5
    </script>

一元运算符

1什么是一元运算符？

只需要一个表达式就可以运算的运算符叫一元运算符

众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符（二元就是变量由两个表达式参与运算得出，同理三元也是）

2.作用

使用前置或者后置运算符进行计算，简化代码

3.前置后置自增自减运算符

什么是自增自减符号
- 自增符号：++；作用：让变量的值 +1
- 自减符号：–；作用：让变量的值 -1
使用场景

经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了
何为前置跟后置呢（自增自减写法相同，此地只放自增的指示图）
- 前置自增：每执行1次，当前变量数值加1，其作用相当于 num += 1
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ph7TS6tv-1648709903834)(02-JS运算符md.assets/1648264503221.png)]
- 后置自增：每执行1次，当前变量数值加1，其作用相当于 num += 1
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukmQplws-1648709903834)(02-JS运算符md.assets/1648264550045.png)]

前置跟后置单独使用时没有区别

代码：

    <script>
        // 递增运算符需要和变量一起使用
        let unm = 12, unm1 = 10
        //前置递增运算符 ++ 写在变量前面  
        ++unm   //等同于 age = age +1
        console.log(unm); //输出为13 相当于num = num+1
        --unm1
        console.log(unm1);// 输出为9 相当与num1 = num1-1
    </script>

自增/减运算符前置或后置的差异

虽然说前置跟后置独自使用时没有区别，但是当它们参与运算时就有区别了

前置自增：先自加再使用（记忆口诀：++在前先自加1，再运算）→利己主义，先管好自己

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XBhYe3s3-1648709903834)(02-JS运算符md.assets/1648265005178.png)]

代码展示：

    <script>
        // 递增运算符需要和变量一起使用
        let unm = 12, unm1 = 10
        //前置递增运算符 ++ 写在变量前面  
        ++unm   //等同于 age = age +1
        console.log(unm); //输出为13 相当于num = num+1
    </script>

后置自增：先使用再自加（记忆口诀：++在后先使用原值，后自加1） →先大家后小家

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQLNkPIT-1648709903834)(02-JS运算符md.assets/1648265023404.png)]

代码展示：

    <script>
        // 后置递增运算符   ++写在变量后面
        let num = 10
        num++
        console.log(num); //输出为11  后置运算符单独使用是跟前置运算符没有区别
        // 那为什么还要分为前置跟后置呢？ 原因是后置自增的口诀为：“先返回原值，后自加1”
        let age = 18
        console.log(age++ + 10);  //大局为重，自己先不变。先国家后小家
        //输出为28，age++ 是先返回原值也就是说age++等于age，18+10=28;
        //运算完式子之后，才会自行加1
        console.log(age); //19 
    </script>

自增运算符的用法
- 前置自增和后置自增独立使用时二者并没有差别！
- 一般开发中我们都是独立使用
- 后面 i++ 后置自增会使用相对较多
小练习

计算该面试题，是否能够得出正确的结果
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkDItRoP-1648709903835)(02-JS运算符md.assets/1648265543899.png)]
- 代码块：最终结果是7
```
    <script>
       let i = 1
        console.log(i++ + ++i + i);
    </script>
```

比较运算符

：左边是否大于右边
<：左边是否小于右边
=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边是否相等,将两边的数据进行转换为数值
===：左右两边是否类型和值都相等
!==：左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

作用

1.比较两个数据大小、是否相等

代码块：

    <script>
        console.log(3 >= 5);//  false  js中，大于等于号是>=
        console.log(3 <= 5);//  true js中，小于等于号是<=
        console.log(3 == '2'); //false  判断两边的值是否相等，此处有隐式转换，将字符串类型的数据自动转换成数字型
        console.log(3 == '3'); //true 

        console.log(5 === '5');//false 全等 判断两边的值跟数据类型是否完全相同
        console.log(5 === 5)//true 
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94DodanL-1648709903835)(02-JS运算符md.assets/1648351211487.png)]

2.字符串作大小比较的标准

本质：把字符串转换成数字再比较

如果拿字符串去做大小运算，判断的标准是ASCII表格，根据其中的计算方法来将字符串转换成数字，在进行大小比较。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q77vwqXf-1648709903835)(02-JS运算符md.assets/1648351376575.png)]

细节

字符串比较，是比较的字符对应的ASCII码
1. 从左往右依次比较
2. 如果第一位一样再比较第二位，以此类推
3. 比较的少，了解即可
NaN不等于任何值，包括它本身（可能是字符串a，或者是b字符串，无法保证两个值的内容等同，不能光看表面）
尽量不要比较小数，因为小数有精度问题
不同类型之间比较会发生隐式转换
1. 最终把数据隐式转换转成number类型再比较
2. 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HtF38gm-1648709903835)(02-JS运算符md.assets/1648429900826.png)]

总结代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZ6irmX6-1648709903835)(02-JS运算符md.assets/1648351892486.png)]

逻辑运算符

逻辑运算符是给程序判断运算是否正确的，正确输出true 错误的输出false

作用

逻辑运算符用来解决多重条件判断

使用方法

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
\|\|	逻辑或	或者	符号两边有一个true就为true	一真则真
!	逻辑非	取反	true变falsefalse变true	真变假，假变真

代码块：

    <script>
        //1. 逻辑与&&  全为true 才为true 否则都是false
        console.log(5 > 3 && 3 > 2); // true
        console.log(5 < 3 && 3 > 2); // false

        //2.逻辑或||  全为false 才为false 其余都为true
        console.log(5 < 3 || 3 > 2); //true
        console.log(5 < 3 || 3 < 2);//false

        //3.逻辑非!
        console.log(!true);//false
        console.log(!false);//true
    </script>

短路运算

原理：

逻辑与：一假全假，遇到假的之后就不运行了
逻辑或：一真全真，遇到真的之后就不继续运行右边的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlqaHwG1-1648709903836)(02-JS运算符md.assets/1648354655093.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJJccWsF-1648709903836)(02-JS运算符md.assets/1648428956836.png)]

1.表现

只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

2.原因

原因：通过左边能得到整个式子的结果，因此没必要再判断右边

3.运算结果

无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

符号	短路条件
&&（找假）	左边为false就短路
\|\|（找真）	左边为true就短路

代码块：（逻辑与：找假，出现假的代码就错了，停止右边的运算），（逻辑或：找真，找到真的代码就成立，停止右边的运算）

    <script>
        // 逻辑与&&  （找假：1.第一个是真的，那我就输出第二个；2.第一个是假的，就直接输出）
        //逻辑与 第一个表达式为真，就输出第二个表达式；
        // 第一个表达式为假，就输出第一个表达式
        console.log(123 && 456); //456
        console.log(0 && 456); //456


        //逻辑或|| （找真：1.第一个是真的 ，直接输出第一个；第一个是假的，直接输出第二个）
        //逻辑或  第一个表达式输出为真，则输出第一个表达式
        // 第一个表达式为假，就输出第二个表达式
        console.log(123 || 0); //123  第一个是真的，直接输出第一个
        console.log(0 || 345); //345 第一个是假的，直接输出第二个

    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U58i8FJy-1648709903836)(02-JS运算符md.assets/1648363869515.png)]

运算符优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UIQvlbx1-1648709903836)(02-JS运算符md.assets/1648266683145.png)]

注意：

一元运算符里面的逻辑非优先级最高
逻辑与比逻辑或优先级高

练习

根据优先级判断下方的结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJoSjgFH-1648709903836)(02-JS运算符md.assets/1648266891026.png)]

代码块：

    <script>
        let a = 3 > 5 && 2 < 7 && 3 == 4
        console.log(a);

        let b = 3 <= 4 || 3 > 1 || 3 != 2
        console.log(b);

        let c = 2 === "2"
        console.log(c);

        let d = !c || b && a
        console.log(d);
    </script>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5T9ZN53i-1648709903836)(02-JS运算符md.assets/1648266944898.png)]

练习

根据优先级判断下方的结果

[外链图片转存中…(img-VJoSjgFH-1648709903836)]

代码块：

    <script>
        let a = 3 > 5 && 2 < 7 && 3 == 4
        console.log(a);

        let b = 3 <= 4 || 3 > 1 || 3 != 2
        console.log(b);

        let c = 2 === "2"
        console.log(c);

        let d = !c || b && a
        console.log(d);
    </script>