JavaScript运算符

最新推荐文章于 2024-08-31 13:05:07 发布

来个鲫鱼饼

最新推荐文章于 2024-08-31 13:05:07 发布

阅读量883

点赞数 30

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 visual studio code

本文链接：https://blog.csdn.net/m0_56065994/article/details/135954756

版权

JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

四、运算符

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=	赋值、运算赋值
，	多重求值