常用运算符-JSjavaScript常用运算符，包含数学运算符、赋值运算符、比较运算符、逻辑运算符，还有一些涉及到的隐式

前端小白的学习笔记，如有错误请各位大佬指出，万分感谢！！！

1. 数学运算符

1.1 加性运算符（含隐式转换）

加法+

加号两侧的操作数有任何一个属于字符类型（String），加号为字符串拼接作用；

算数相加

Number类型
- 操作数都是数值，按照加法运算；
- 如果有一个操作数是NaN，那么结果为NaN

null / undefined / true / false / 对象 / 数组 => 进行隐式类型转换

对象隐式转换规则：

如果操作数是对象，首先会转换为原始值（toPrimitive函数，日期对象会调用toString()，其他对象会调用valueOf()，），得到的原始值不再被强制转换为数字或字符串。在这种约束下，对象转为原始值基本都是字符串（如果你没有重写valuOf()或者toString()方法），再进行加法操作。
加法例子：

console.log('10' + 1);       // '101'
console.log(1 + 2 + '3');    // '33'
console.log(1 + NaN);        // NaN  (Number)
console.log(1 + true);       // 2    (Number)
console.log(1 + false);      // 1    (Number)
console.log(1 + null);       // 1    (Number)
console.log(1 + undefined);  // NaN  (Number)
console.log(1 + []);       // '1'
console.log([] + 1);       // '1'
console.log([] + []);      // ''
console.log(1 + [1,2,3]);  // '11,2,3'
console.log(1 + {});          // '1[object Object]'
console.log({} + 1);          // '[object Object]1'
console.log({} + {});         // '[object Object][object Object]'
console.log(1 + {name:'li'}); // '1[object Object]'
console.log([] + {});                // '[object Object]'
console.log({} + []);                // '[object Object]'
console.log([1,2,3] + {name:'li'});  // '1,2,3[object Object]'
console.log(new Date() + 1);         // 'Fri Jul 09 2021 10:36:29 GMT+0800 (中国标准时间)1'

减法-

Number类型
- 操作数都是数值，按照减法运算；
- 如果有一个操作数是NaN，那么结果为NaN
String、null、undefined、true、false
- 如果操作数的类型不是Number类型，将按照隐形类型转化转化为Number类型，在进行操作。
备：加法与减法都是加性运算符，a-b 可以看作 a+(-b)

1.2 乘性运算符

乘法*

Number类型
- 操作数都是数值，按照乘法运算；
- 如果有一个操作数是NaN，那么结果为NaN
String、null、undefined、true、false
- 如果操作数的类型不是Number类型，将按照隐形类型转化转化为Number类型，再进行操作。

除法 /

同上
除数不能为0，否则结果为 Infinity 或 -Infinity

被除数和除数都是0，结果为 NaN

console.log(1 / 0); // Infinity
console.log(0 / 1); // 0
console.log(0 / 0); // NaN

取模 %

Number类型
- 如果左右两侧均是数值，则进行除法计算，结果返回余数
- 任何一侧为NaN，则结果返回NaN
- 只要除数是0，则结果返回NaN
如果有一侧不为Number类型，则（根据对应的规则）转为数字类型后，再进行计算。
```
console.log(1 % 0) // NaN
console.log(0 % 1) // 1
console.log(0 % 0) // NaN
```
案例：用于判断奇偶数，表格隔行变色

1.3 一元运算符

加号 + 、减号 -

操作数是Number类型，无影响（不论是正号还是负号，对NaN都是无影响）

操作数是其他类型，它具有转化成Number类型的功能，效果与Number(...) 相同。

console.log(+[]);    // 0
console.log(+[1]);   // 1
console.log(+[1,2]); // NaN  [1,2]原始值为'1,2'，转化为Number类型为NaN
console.log(+{});    // NaN
console.log(-undefined)  // NaN

隐式类型转换

var str = '123';
console.log(str + 2);    // 1232
console.log(+str + 2);   // 125  => '123'转化为Number类型

var num1 = 10;
var num2 = 20;
console.log(num1 + num2);      // 30
console.log(num1 + '' + num2); // 1020  => 转化为字符串拼接

1.4 递增递减运算符

++ & --
前置型：num1基础上，进行+1的操作，然后和num2进行相加
后置型：num1基础上，和num2进行相加，在计算之前，并没有发生自增的情况,计算完成之后再自增。
如果有一侧不为Number类型，则（根据对应的规则）转为数字类型后，再进行计算。

1.5 案例

0.1 + 0.2 => （0.1 * 10 + 0.2 * 10）/10（判断小数位数，方法并不全面，可以去了解一下浮点精度问题）

2. 赋值运算符

= 、 += 、 -= 、 *= 、 /= 、 %=

3. 比较运算符

3.1 关系操作符

< 、 > 、 <= 、 >=

关系操作符（比较操作符），最终返回的结果是一个布尔值
Number 类型，直接比较；如果比较中出现了NaN，那么结果就是false
String 类型
- 一侧是字符串，按照相应规则进行转换
- 两侧均为字符串，按照UniCode编码进行判断，字符串的比较是逐位比较的，不用关心字符串长度
null 、undefined、true、false，根据对应的规则进行转换。

console.log('3' < 17);      // true    Number('3') => 3 => 3<17
console.log('abc' < 3);     // false   Number('abc') => NaN => NaN<3
console.log('3' < '17');    // false   ('3').codePointAt() < ('1').codePointAt()  逐位比较
console.log('abc' < '3');   // false   ('a').codePointAt() < ('3').codePointAt()  逐位比较
console.log(3 > 2 > 1);     // false   从左向右依次比较，3>2 为 true, true>1 为 false

3.2 相等运算符

==相等、 !=不等、===全等、!==不全等

相等

NaN不等于任何类型的数值，包括自己本身，返回false
两侧均为String类型，比较UniCode字符编码值
两侧均为Number类型数值，比较值是否相同
两侧均为Object类型，则比较地址是否一致
null == undefined 返回true
一侧是String，一侧是Number,将String转换为Number类型再进行比较
如果一侧是Boolean，则将布尔值转换为Number类型后，再比较;

console.log('ABC' == 'abc');  // false
console.log(NaN == NaN)       // false
console.log('123' == 123)     // true
console.log(null == undefined)// true
console.log(false == 0)       // true

let obj1 = {x:10};       
let obj2 = {x:10};
let obj3 = obj1;
console.log(obj1 == obj2);    // false
console.log(obj1 == obj3);    // true

全等

值是否相等
类型是否相等

不等、不全等与相等、全等的结果相反

4. 逻辑运算符

与 &&

看左侧的操作数：进行隐式类型的转换，转为Boolean类型，true / false
- false ，返回左侧的操作数
- true ，返回右侧的操作数

或 ||

看左侧的操作数：0，进行隐式类型的转换，转为Boolean类型，true / false
- true ，返回左侧的操作数
- false，返回右侧的操作数

非！

取反，只作用于一个操作数，得到的结果一定是个boolean
!! 两次取反相当于类型转换Boolean()
作用在一个条件上，所以也是一元运算符的成员之一

console.log(1 && 2);    // 2
console.log(0 && 2);    // 0
console.log(1 || 2);    // 1
console.log(0 || 2);    // 2
console.log(!true);     // false
console.log(!0);        // true
console.log(!!100);     // true
console.log(!{});       // false  =>  Object类型，结果返回false (所有对象均为true)
console.log(!'');       //true    =>  空字符串，结果返回true
console.log(!'abc');    // false  =>  非空的字符串，结果返回false
console.log(!NaN);      // true   =>  NaN，返回true
console.log(!100);      // false  =>  非0数值，返回false
console.log(!null);     // true   =>  null 或 undefined，返回true
console.log(!undefined);// true

常用运算符-JS