JS中运算符详解

JS中运算符详解

js中运算符有很多，还有一下ES新添加的实用运算符，掌握这些运算符可以使日常开发更加流畅，增加了语法的灵活性；下面就让我们了解一下js有哪些操作符：

1.数学运算符

数学运算符就是常见的加(+)、减(-)、乘(*)、除(/)、等于(=)、求幂(**)、自增(++)、自减(--)、加等于(+=)、减等于(-=)等

let num = 0;
num = 1 + 3 - 4 / 2 * 2; // 0
num = num++; // 1
num = num--; // 0
num += 1; // 1
num -= 1; // 0

2.比较运算符

与数学运算中的比较相同：大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、相等(==)、全等(===)、不等(!=)、不全等(!==)等；注意: 全等不光比较两者值是否相同，还比较变量类型是否相同；不全等也是一样；

1 == '1' // true 两者虽然类型不同但是==比较时会发生隐式类型转换进行比较
1 === '1' // false 前者是number类型，后者是string类型

3.三元表达式

三元表达式可以替代简单的if条件，表达式为判断条件 ？条件为真 ：条件为假。例如：

if（3 > 4）{
    console.log("条件为真");
}else {
    console.log("条件为假");
}
// 三元表达式 —— 代码更加简洁清晰
3 > 4 ? console.log("条件为真") : console.log("条件为假")

4.短路运算符 && 与 ||

短路运算符就是从左到右的运算中前者满足要求，就不再执行后者了。

• &&：从左到右依次判断，如果遇到一个假值，就返回假值，以后不再执行，否则返回最后一个真值；
• || ：为取真运算，从左到右依次判断，如果遇到一个真值，就返回真值，以后不再执行，否则返回最后一个假值；

// 1.利用||设置默认值，防止代码出错。
// 假设data需要取出后台返回的context数组,但返回中不包含context，便可以使用||防止找不到对应值而报错
const data = res.context || [];
// 2.利用&&来省略简单if判断,例如：当某一条件为真时执行函数
if(1 < 2) {
    fn()
}
// 可以简写为
(1 < 2) && fn()

合理运用这两个运算符可以让你的代码更加清晰明了，前提是理解这两个操作符的概念，这样才能事半功倍。

5.可选链运算符 ?.

允许读取位于连接对象链深处的属性的值，功能类似于 . 链式运算符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

// 回到上面那个例子，后台返回res中有一个pagination对象里面有分页信息page和pageSize，但是有时没数据不返回pagination对象
// 常规处理
if(res && res.pagination) {
   const page = res.pagination.page;
}
// 使用?.运算符后
const page = res?.pagination?.page || 1;

6.逻辑空赋值运算符

逻辑空赋值运算符 (x ??= y) 仅在 x 是(null 或 undefined) 时对其赋值。

const data = {}
data.context ??= []; // data的值为{context: []}
data.context ??= [1,2,3]; // data的值为{context: []}
// 只有在??左侧值为null或者undefined时才会把右边的值赋值给左边

7.运算符的优先级

下面表中有一些是上面没有讲解到的，平常使用性会低一些，所以就没有深入讲解；运算符按照优先级的不同从高到低排列：

运算符	介绍
++ – !	自增、自减、去反
* / %	用于number类型的乘、除、求余
+ -	相加、相减
> >= < <=	用于比较的运算符
== === != !==	比较两者是否相等
& ^ |	按位"与" 、按位"异或"、按位"或"
&& ||	逻辑与、逻辑或
?.	条件运算
= += -=	赋值、赋值运算
，	多个计算