操作符
::: tip 基础概念
- 操作符：也叫运算符，是一种符号。通过操作符可以对一个或多个值进行运算，并获取运算结果
- 表达式：由数字、运算符、变量的组成的式子，一个表达式往往会产生一个值
:::
一元操作符
只操作一个值的操作符叫一元操作符
递增/递减操作符
++是递增操作符，表示在自身基础上加 1
a++先用再加，++a 先加再用
var a = 3
var b = ++a
console.log(b) // 4
var a = 3
var b = a++
console.log(b) // 3
递减操作符同理，不做赘述
另外，这 4 个操作符可以作用于任何值，意思是不限于整数——字符串、布尔值、浮点值，甚至对象都可以。 递增和递减操作符遵循如下规则：
- 对于字符串，如果是有效的数值形式，则转换为数值再应用改变。变量类型从字符串变成数值。
- 对于字符串，如果不是有效的数值形式，则将变量的值设置为 NaN。变量类型从字符串变成数值。
- 对于布尔值，如果是 false，则转换为 0 再应用改变。变量类型从布尔值变成数值。如果是 true，则转换为 1 再应用改变。变量类型从布尔值变成数值。
- 对于浮点值，加 1 或减 1。
- 如果是对象，则调用其 valueOf()方法取得可以操作的值。对得到的值应用上述规则。如果是 NaN，则调用 toString()并再次应用其他规则。变量类型从对象变成数值。
let a = {
valueOf() {
return -1
},
}
a-- // 值变成2
一元加和减
一元加由一个加号（+）表示，放在变量前头，对数值没有任何影响
如果将一元加应用到非数值，则会执行与使用 Number()转型函数一样的类型转换：布尔值 false 和 true 转换为 0 和 1，字符串根据特殊规则进行解析，对象会调用它们的 valueOf()和/或 toString()方法以得到可以转换的值。
一元减由一个减号（-）表示，放在变量前头，主要用于把数值变成负值
在应用到非数值时，一元减会遵循与一元加同样的规则，先对它们进行转换，然后再取负值
一元加和减操作符主要用于基本的算术，但也可以像上面的例子那样，用于数据类型转换。
布尔操作符
布尔操作符的优先级是：非 → 与 → 或，而在 js 表达式中的优先级是：非 → 数学（乘性，加性）→ 关系 → 布尔，例如：
!5 < 4 + 4 || 3 < 1 // true
逻辑非
逻辑非操作符由一个叹号（!）表示，这个操作符始终返回布尔值，无论应用到的是什么数据类型。逻辑非操作符首先将操作数转换为布尔值，然后再对其取反。 逻辑非操作符会遵循如下规则：
- 如果操作数是对象，则返回 false。
- 如果操作数是空字符串，则返回 true。
- 如果操作数是非空字符串，则返回 false。
- 如果操作数是数值 0，则返回 true。
- 如果操作数是非 0 数值（包括 Infinity），则返回 false。
- 如果操作数是 null，则返回 true。
- 如果操作数是 NaN，则返回 true。
- 如果操作数是 undefined，则返回 true。
逻辑非操作符也可以用于把任意值转换为布尔值。同时使用两个叹号（!!），相当于调用了转型函数 Boolean()
逻辑与
逻辑与操作符由两个和号（&&）表示，应用到两个值,两个值都真才真
逻辑或
逻辑或操作符由两个管道符（||）表示，两个值有真就真
短路运算
a&&b
- 如果 a 是真的，b 的真假决定结果，b 真结果就真，b 假结果就假，所以它的结果就是 b
- 如果 a 是假的，不用看 b 了，被短路了。结果就是 a
3 && 6 // 6
null && 2 // null
a||b
- 如果 a 是真的，不用看 b 了，被短路了。结果就是 a
- 如果 a 是假的，b 的真假决定结果，b 真结果就真，b 假结果就假，所以它的结果就是 b
::: tip 如果出现布尔运算符连续的情况 先计算前面的结果，拿这个结果和后面的进行计算：
false || false || 123 =>123
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
:::
乘性操作符
ECMAScript 定义了 3 个乘性操作符：乘法、除法和取模。
乘法操作符由一个星号（*）表示，可以用于计算两个数值的乘积。
除法操作符由一个斜杠（/）表示，用于计算第一个操作数除以第二个操作数的商
取模操作符
取模操作符用百分号“%″表示
a%b表示求 a 除以 b 的余数，它不关心整数部分，只关心余数
指数操作符
ECMAScript 7 新增了指数操作符，Math.pow()现在有了自己的操作符**，结果是一样的：
console.log(Math.pow(3, 2); // 9
console.log(3 ** 2);// 9
加性操作符
加性操作符，即加法和减法操作符
加法操作符有“加法”和“连字符”两种作用,如果加号两边的操作数都是数字，则为“加法”
如果有一方是字符串的话，加号的作用就是将他们进行拼接,在这种情况下，另一操作数是对象、数值或布尔值，则调用它们的 toString()方法以获取字符串，对于 undefined 和 null ,则调用 String() 函数， 分别获取 "undefined"和"null"
如果加号两边均是布尔值、null 或 undefined，则先在后台使用 Number()将其转换为数值，然后再执行数学运算。如果转换结果是 NaN，则计算的结果是 NaN；如果有任一操作数是对象，则调用其 valueOf()方法取得表示它的数值。如果该值是 NaN，则计算的结果是 NaN。如果对象没有 valueOf()方法(Math 和 Error 对象没有 valueOf 方法)，则调用其 toString()方法，然后再将得到的字符串转换为数值
减法操作符，除了基本的数学运算外，只要有一个操作数是字符串、布尔值、null 或 undefined，则先在后台使用 Number()将其转换为数值，然后再执行数学运算。如果转换结果是 NaN，则减法计算的结果是 NaN；如果有任一操作数是对象，则调用其 valueOf()方法取得表示它的数值。如果该值是 NaN，则减法计算的结果是 NaN。如果对象没有 valueOf()方法，则调用其 toString()方法，然后再将得到的字符串转换为数值
::: tip 一道 NT 面试题
'a' + +'b' // -> "aNaN"
因为 + 'b' 等于 NaN，所以结果为 "aNaN"
:::
关系操作符
关系操作符执行比较两个值的操作，包括小于（<）、大于（>）、小于等于（<=）和大于等于（>=）,这几个操作符都返回布尔值
- 如果操作数都是数值，则执行数值比较。
- 如果操作数都是字符串，则逐个比较字符串中对应字符的编码。
- 如果有任一操作数是数值，则将另一个操作数转换为数值，执行数值比较。
- 如果有任一操作数是对象，则调用其 valueOf()方法，取得结果后再根据前面的规则执行比较。如果没有 valueOf()操作符，则调用 toString()方法，取得结果后再根据前面的规则执行比较。
let a = {
valueOf() {
return 0
},
toString() {
return '1'
},
}
a > -1 // true
在以上代码中，因为 a 是对象，所以会通过 valueOf 转换为原始类型再比较值。
- 如果有任一操作数是布尔值，则将其转换为数值再执行比较。
::: warning js 中没有连比
2 < a <= 15 // ❌
a > 2 && a <= 15 // √
:::
相等操作符
两个等号==运算符不比较值的类型，它会进行隐式转换后比较值是否相等
三个等号===运算符，不仅比较值是否相同，也比较类型是否相同,只有两个操作数在不转换的前提下相等才返回 true。
在转换操作数的类型时，相等和不相等操作符遵循如下规则:
- 如果任一操作数是布尔值，则将其转换为数值再比较是否相等。
false转换为 0，true转换为 1。 - 如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否 相等。
- 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf()方法取得其原始值，再根据前面的规则进行比较。
在进行比较时，这两个操作符会遵循如下规则:
- null 和 undefined 相等。
- null 和 undefined 不能转换为其他类型的值再进行比较。
- 如果有任一操作数是 NaN，则相等操作符返回 false，不相等操作符返回 true。记住：即使两 个操作数都是 NaN，相等操作符也返回 false，因为按照规则，NaN 不等于 NaN。
- 如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true。否则，两者不相等。 全等和不全等操作符与相等和不相等操作符类似，只不过它们在比较相等时不转换操作数。
条件操作符
var a = b ? 1 : 2
上面的代码执行了条件赋值操作，即根据条件表达式 b 的值决定将哪个值赋 给变量 a 。如果 b 是 true ，则赋值 1 ；如果 b 是 false，则赋值 2。
赋值操作符
简单赋值用等于号（=）表示，将右手边的值赋给左手边的变量
每个数学操作符以及其他一些操作符都有对应的复合赋值操作符：
- 乘后赋值（*=）
- 除后赋值（/=）
- 取模后赋值（%=）
- 加后赋值（+=）
- 减后赋值（-=）