JS中运算符详解

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

一、数学运算符

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

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

js中++num和num++在赋值时的区别

js中，我们在写一个变量自加1时，可以写为num=num+1
但是我们习惯性简写，num++或者是++num,
在不配合进行其他运算时，这两者是没有任何区别的，都是自加1，但是当它们用于赋值时结果就是不一样的。

    var num1=10
    var num2=10
    var add = num1++ + ++num2
    console.log(add) //21

num1++会先将num1的值返回，后将num1自加
所以num1用做计算值是10，然后自加变为11
++num2是先自加，然后将自加后的值返回
所以num2用做计算值是11，
最后得到的add就是10+11为21了

二、比较运算符

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

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

三、三元表达式

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

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

四、短路运算符 && 与 ||

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

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

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

五、可选链运算符 ?.

允许读取位于连接对象链深处的属性的值，功能类似于 . 链式运算符，不同之处在于，在引用为空(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;

六、逻辑空赋值运算符

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

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

七、运算符的优先级

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

image.png