四、运算符
目录
1.运算符概述
- 运算符也被称为是用于实现赋值、比较和执行算数运算等功能的符号。
- JavaScript常用运算符有:算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符。
2.算术运算符
2.1 算术运算符概述
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
2.2 二元运算符
运算符 | 描述 | 类型 | 实例 |
+ | 加 | 二元运算符 (二目) | 10+10=20 |
- | 减 | 10-5=5 | |
* | 乘 | 10*10=100 | |
/ | 除 | 10/2=5 | |
% | 取余数(取模) | 10%20=10 9%2=1 |
2.3 一元运算符
运算符 | 描述 | 类型 | 实例 |
++ | 自增 | 一元单元格 (一目) | x=++y |
x=y++ | |||
-- | 自减 | x=--y | |
x=y-- | |||
+ | 正 | +5 | |
- | 负 | -7 |
2.3.1 自增和自减运算符概述
在编程时,需要反复给数字变量添加或减去,可以使用自增或自减运算符来完成。
在JavaScript中,自增(++)和自减(--)在变量前面时,我们可以称为前置运算符;在变量后面时,我们可以称为后置运算符。
注意:递增和递减运算符必须和变量配合使用。
2.3.2 自增运算符
++a 前置递增,就是自加1,相当于a=a+1;
使用口诀:先自加,再赋值
var a=10;
console.log(++a);//11
a++ 后置递增,也是自加1,相当于a=a+1;
使用口诀:先赋值(返回原值),后自加
var a=10;
console.log(a++); //10
2.3.3 前置和后置的区别
- 如果前置和后置不参与别的运算,自身在增和减,则两者没有区别
- 如果前置和后置参与别的运算,哪怕只有一个赋值,也有区别
前置 ++a 先运算(自增和自减)、后赋值 var a=10;
var b=++a;
console.log(a,b);//11 11
后置 a++ 先赋值、后运算(自增和自减) var a=10;
var b=a++;
console.log(a,b);11 10
2.4 浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
var result=0.1+0.2; //结果不是0.3,而是0.30000000000000004
console.log(0.07+100); //结果不是7,而是7.000000000000001
因此:不要直接判断两个浮点数是否相等。
3. 比较运算符
3.1 比较运算符概述
概念:比较运算符(关系运算符)是比较两个值,比较运算后,会返回布尔值(true和false)作为比较运算的结果。
运算符名称 | 说明 | 案例 | 结果 |
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
>= | 大于等于号 | 2>=2 | true |
<= | 小于等于号 | 3<=2 | false |
== | 双等号 | 35==35 | true |
!= | 不等号 | 32!=23 | false |
=== | 全等号 | 21==='21' | false |
3.2 ==和===两者区别
符号 | 是否会转数据类型 | 相等条件 | 例子 |
== | 会 | 只要值相等即可 | console.log('5'==5); //true |
=== | 不会 | 值和类型都必须相等 | console.log('5'===5);//false console.log('5'==='5');//true |
3.3 特殊的比较
- 有字符串参与
console.log('18'>9); //true 一边是字符串,一边是数字,会转数据类型 console.log('18'>'9'); //false 两边都是字符串时,比较的是ASCII码,一位一位的比
- 几个特殊值的比较:null、false、NaN、true、undefined
console.log(NaN==NaN); //false*** NaN和谁都不等 console.log(null>-1); //true console.log(null==0); //false*** console.log(''==null); //true console.log(undefined==null); //true*** console.log(undefined>-1); //怎么比都是false,不进行比较
- 数组、对象的比较
console.log([]==[]); //false console.log({}=={}); //false console.log(![]==[]); //true console.log(!{}=={}); //false console.log([]!=[]); //true console.log({}!={}); //true
4.逻辑运算符
4.1 逻辑运算符概述
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
运算符名称 | 说明 | 案例 | 结果 |
&& | 逻辑与 | console.log(3==5&&6==6) | false |
|| | 逻辑或 | console.log(5>3||4>5) | true |
! | 逻辑非(取反) | console.log(!5) | false |
4.2 逻辑与 &&
两边都为true,才返回true,否则返回false
console.log(2>1&&3>1); //true
console.log(2>1&&3>5); //false
4.3 逻辑或 ||
两边都为false,才返回false,否则返回true
console.log(2>3||1<2); //true
console.log(2>3||1>2); //false
4.4 逻辑非!
console.log(!5); //false
console.log(!false); //true
4.5 逻辑中断(短路逻辑)
短路逻辑的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。
4.5.1 逻辑与 &&
- 如果第一个表达式的值为真,则结果由后面的操作数决定
console.log(true&&2); //2 console.log(2&&true); //true console.log(2&&3); //3 console.log([]&&'hello'); //'hello'
- 如果第一个表达式的值为假,则后面的不再执行,由第一个操作数来决定结果
console.log(undefined&&'hello'); //undefined console.log(NaN&&'hello'); //NaN
4.5.2 逻辑或 ||
- 如果第一个操作数的值为假,则结果由后面的操作数决定
console.log(false||123); //123 console.log(0||456); //456
- 如果第一个操作数的值为真,则后面的不再执行,由第一个操作数来决定结果
console.log(123||456); //123 console.log(123||456||789); //123
总结:如果运算符两边的操作数,有一个操作数不是布尔值的情况,返回的不一定是布尔值,可能是原值
5. 赋值运算符
运算符名称 | 例子 | 等同于 |
= | x=y | |
+= | x+=y | x=x+y |
-= | x-=y | x=x-y |
*= | x*=y | x=x*y |
/= | x/=y | x=x/y |
%= | x%=y | x=x%y |
6.条件运算符(三元表达式)
判断条件表达式?条件成立的返回值1:条件不成立的返回值2
var age=21;
var flag=(age>=21)?'Beer':'Juice';
console.log(flag); //Beer
7. 优先级
从左到右算起:
1.圆括号()的优先级最大
2.一元运算符 ++、--、!、+正 -负
3.算术运算符 **(幂)、*、/、%(取余)、+、-
4.比较运算符 <、<=、>、>=、==、!=、===、!==
5.逻辑运算符 &&(逻辑与)、||(逻辑或)(注意:优先级:!>&&>||)
6.三元运算符 ? :
7.赋值运算符 =、+=、-=、*=、/=、%=
下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
运算符 | 描述 |
. [] () | 字段访问、数组下标、函数调用以及表达式分组 |
++ -- - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
* / % | 乘法、除法、取模 |
+ - + | 加法、减法、字符串连接 |
<< >> >>> | 移位 |
< >= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
== != === !== | 等于、不等于、严格相等、非严格相等 |
& | 按位与 |
^ | 按位异或 |
| | 按位或 |
&& | 逻辑与 |
|| | 逻辑或 |
?: | 条件 |
= oP= | 赋值、运算赋值 |
, | 多重求值 |