02-JS运算符md
运算符
在程序的运行和开发当中呢，都涉及到运算，我们来了解一下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加1num = num + 1 //这是之前的做法console.log(num);//使用赋值运算符进行计算num += 1 //num +=1 等于 num = num+1 这是经过简化得来的console.log(num);// 让变量乘以5let a = 10a *= 5console.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 +1console.log(unm); //输出为13 相当于num = num+1--unm1console.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 +1console.log(unm); //输出为13 相当于num = num+1</script>后置自增：先使用再自加（记忆口诀：++在后 先使用原值，后自加1） →先大家后小家
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQLNkPIT-1648709903834)(02-JS运算符md.assets/1648265023404.png)]
代码展示：
<script>// 后置递增运算符 ++写在变量后面let num = 10num++console.log(num); //输出为11 后置运算符单独使用是跟前置运算符没有区别// 那为什么还要分为前置跟后置呢？ 原因是后置自增的口诀为：“先返回原值，后自加1”let age = 18console.log(age++ + 10); //大局为重，自己先不变。先国家后小家//输出为28，age++ 是先返回原值也就是说age++等于age，18+10=28;//运算完式子之后，才会自行加1console.log(age); //19 </script>
自增运算符的用法
- 前置自增和后置自增独立使用时二者并没有差别！
- 一般开发中我们都是独立使用
- 后面 i++ 后置自增会使用相对较多
小练习
计算该面试题，是否能够得出正确的结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkDItRoP-1648709903835)(02-JS运算符md.assets/1648265543899.png)]
代码块：最终结果是7
<script>let i = 1console.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码
- 从左往右依次比较
- 如果第一位一样再比较第二位，以此类推
- 比较的少，了解即可
- NaN不等于任何值，包括它本身（可能是字符串a，或者是b字符串，无法保证两个值的内容等同，不能光看表面）
- 尽量不要比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
- 所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 否则都是falseconsole.log(5 > 3 && 3 > 2); // trueconsole.log(5 < 3 && 3 > 2); // false//2.逻辑或|| 全为false 才为false 其余都为trueconsole.log(5 < 3 || 3 > 2); //trueconsole.log(5 < 3 || 3 < 2);//false//3.逻辑非!console.log(!true);//falseconsole.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); //456console.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 == 4console.log(a);let b = 3 <= 4 || 3 > 1 || 3 != 2console.log(b);let c = 2 === "2"console.log(c);let d = !c || b && aconsole.log(d);</script>
结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5T9ZN53i-1648709903836)(02-JS运算符md.assets/1648266944898.png)]
练习
根据优先级判断下方的结果
[外链图片转存中…(img-VJoSjgFH-1648709903836)]
代码块：
<script>let a = 3 > 5 && 2 < 7 && 3 == 4console.log(a);let b = 3 <= 4 || 3 > 1 || 3 != 2console.log(b);let c = 2 === "2"console.log(c);let d = !c || b && aconsole.log(d);</script>
结果：
[外链图片转存中…(img-5T9ZN53i-1648709903836)]
02-JS运算符md相关推荐
- 02 . JS 运算符 + 流程控制
算数运算符 ------------------------------------- console.log(1 + 1); // 2console.log(1 - 1); // 0console. ...
- js运算符单竖杠“|”的用法和作用及js数据处理
js运算符单竖杠"|"的作用 很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用 ...
- JavaScript深入【表达式和运算符（上集）】你能过我8关js运算符的题目吗？
博主留言 (茗洋芳竹) 每一个高手成功之路,都要学会怎样与孤独打交道 .我是个傻孩子,孤独竟然是我的夫人,每天晚上都会坐在我旁边看我学习,写博客.马上要离开ASP.NET生涯,投奔PHP了,一切都是那 ...
- 前端：JS/18/JS运算符（算术运算符，赋值运算符，字符串运算符，比较运算符，逻辑运算符，三元运算符），window.prompt（）
JS运算符 要进行各种各样的运算,就要使用不同的运算符号. 1,算术运算符:+ - * / % ++ -- + :加法运算符 - :减法运算符 * :乘法运算符 / :除法运算符 % :取余运算符,返 ...
- java/02/java运算符,java逻辑控制,java方法的定义及使用
java/02/java运算符/java逻辑控制/java方法的定义及使用 运算符 如"="是赋值运算符,四则运算也是运算符. 在程序中运算的式子要简化,用简单的式子 以下运算符可 ...
- JavaScript学习笔记：JS运算符重载
1.定义 在了解运算符重载之前,先了解一下重载.重载是指可使函数.运算符等处理不同类型数据或者接受不同个数参数的一种方法. 函数重载是指函数名相同,函数参数个数或者参数类型不同,以至于返回类型 ...
- 4.js运算符,js三目运算符
js运算符 单目运算符:自增自减 自增 ++ 变量的值每次加1,再赋给变量; 自减 – 变量的值每次减1,再赋值给变量; 双目运算符: + 加 - 减 * 乘 / 除 % 求余 = 赋值 += 加等 ...
- 前端面试题 - JS 运算符优先级
建议先看一下运算符分类,可以参考这篇文章:js运算符与优先级,基本上把所有的运算符以及分类都总结了出来. 借用文章的一个表格,该表格包含了所有的运算符,优先级自上而下逐渐降低,同一行优先级相同: 我们 ...
- js运算符单竖杠“|”的用法
js运算符单竖杠"|"的作用 很多朋友都对双竖杠"||",了如指掌,因为这个经常用到.但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用 ...
最新文章
- ACR2010_MRI骶髂关节炎症与CTX-II变化以及TNF拮抗剂治疗过程中全身炎症改变相关...
- 我的世界java路径_我的世界java路径在哪 路径有误怎么设置
- c语言编程暴力是什么意思,(C语言代码)用笨办法暴力出来的，但是还是希望给大家一点思路上的启发...
- 连续三年蝉联第一，Flink 荣膺全球最活跃的 Apache 开源项目
- php编写服务器端脚本程序,PHP脚本语言写的简单服务器程序
- springboot忽略证书_SpringBoot获取resource下证书失败
- UI标签库专题十：JEECG智能开发平台 Form（form标签）
- 未来云原生世界的“领头羊”：容器批量计算项目Volcano 1.0版本发布
- 9_python基础—数据序列(公共方法)
- javascript 容错处理代码【屏蔽js错误】
- pip install 出现报asciii码错误的解决
- python 宏定义_Flask干货：Jinja2模板中的宏定义和使用
- MFC最详细入门教程[转载]
- 用Java实现文本编辑器
- kettle 学习笔记
- Kafka结合Spark-streaming 的两种连接方式(AWL与直连)
- 数字证书及其简单数字签名的实现（java实现）
- 腾讯前端面试经验（一）
- ROS——Teb算法的优化
- 想要成为一个游戏美术设计师，需要学习什么？游戏建模教程