笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

操作符

也叫运算符，js中发起运算最简单的方式

表达式：包括操作数和操作符，表达式会得到一个结果参与程序

算数运算符

包括加+、减-、乘、除/、取余%和括号()*

取余%：也叫取模，a / b = a余d等价于a % b = d

运算顺序：先算乘除和取余、再算加减，有小括号优先

//普通运算
console.log(4 + 5);  //9
console.log(4 - 5);  //-1
console.log(4 * 5);  //20
console.log(4 / 5);  //0.8
console.log(4 % 5);  //4

当有特殊字符参与运算时：

• 凡是NaN参与的运算，运算结果都是NaN
• Indinity参与运算时，要视情况而定：

// Infinity参与运算
console.log(Infinity + 5);    //Infinity
console.log(Infinity - 5);    //Infinity
console.log(Infinity * 5);    //Infinity
console.log(Infinity / 5);    //Infinity
console.log(Infinity % 5);    //NaN
console.log(5 + Infinity);    //Infinity
console.log(5 - Infinity);    //-Infinity
console.log(5 * Infinity);    //Infinity
console.log(5 / Infinity);    //0
console.log(5 % Infinity);    //5
console.log(Infinity + Infinity);    //Infinity
console.log(Infinity - Infinity);    //NaN
console.log(Infinity * Infinity);    //Infinity
console.log(Infinity / Infinity);    //NaN
console.log(Infinity % Infinity);    //NaN
console.log(Infinity + -Infinity);   //NaN

注意：工作中不会使用特殊符号参与运算，没有实际意义，面试可能会遇到

其他数据类型参与的运算

当有字符串参与加法运算运算，+会变成连字符将前后文本连接起来输出新字符串

隐式转换：除了上面的情况，其他情况下，所有数据类型参与运算的时候，计算机都会先暗中将数据转换为数数字类型再参与运算，这个过程是默认暗中进行的，叫做隐式转换

// 其他字符参与
console.log(1 + '2');          //12
console.log(1 - '2');          //-1
console.log(1 * '2');          //2
console.log(1 / '2');          //0.5
console.log(1 % '2');          //1
console.log(1 - '');           //1
console.log(1 - '   ');        //1
console.log(1 - '2abc');       //NaN
//其他数据类型参与
console.log(1 - true);         //0
console.log(1 - false);        //1
console.log(1 - undefined);    //NaN
console.log(1 - null);         //1

比较运算符

也叫关系运算符，会返回一个布尔类型的值，结果只能是true和flase之一

运算符	解释
大于
<	小于
>=	大于等于
<=	小于等于
==	相等，只判断大小，不判断数据类型
!=	不相等，逻辑同上
===	全等，数值和数据类型必须相等
!==	不全等，逻辑同上

// 比较运算符
console.log(7 > 8);          //flase
console.log(7 < 8);          //true
console.log(7 >= 8);          //flase
console.log(7 <= 8);          //true
console.log(7 == 8);          //flase
console.log(7 !== 8);          //true
console.log(7 === 8);          //flase
console.log(7 !== 8);          //true

特殊值参与运算

• NaN参加运算，除!=和!==为true，其余全为flase
• Infinity参与运算要视情况而定(注意Infinity和Infinity是相等的，凡事涉及到等于的运算都会输出true)

其他数据类型参与运算

排除字符串和字符串比较， 会隐式转换为数值类型进行对比（类似于算数运算符的隐式转换）

'123'转换成123、true转换成1、false转换成0、null转换成0、undedined转换为NaN、''转换成0，'abc'转换成NaN

注意：

• null比较特殊：null与0判断时，判定为不相等，<=和>=判断为true
• null==undedined（相等判断，不全等）

字符串之间进行比较

不会发生隐式转换，直接对比字符串字符的编码顺序

编码顺序：0-9 > A-Z > a-z，比较大小反之，0-9比较起来最小

比较的时候，无论字符串多，从第一个字符挨个向后比较，直到可以比较出一个大小

// 字符串与字符串比较
console.log(12 > '6');          //true
console.log('12' > '6');          //flase（字符串之间比较按照从前往后，6》1，所以dlase
console.log('A' > '6');          //true(数字和字母相比永远最小)
console.log('A' > 'a');          //flase（小写字母大于大写字母）
console.log('banner > bananer');          //true（前三个相同，地四个字母n>a,所以输出true）

比较顺序

从向往后进行比较，前面得出的结果参与运算进行比较

例如：3 > 2 > 1 先计算3 > 2结果是true，再对比true > 1，结果flase

逻辑运算符

常用于布尔类型值之间，当操作都是布尔值时，返回的也是布尔值

• &&：且：前后都真才输出true
• ||：或：前后有一个真则输出true
• ！：非（取反，可以写多个，两个！则抵消为true）：后面结果是flase则输出true，反之这输出flase

// 逻辑运算符&&:都真才真
console.log(true && true) //true
console.log(true && false) //false
console.log(false && true) //false
console.log(false && false) //false
// 逻辑运算符||:都假才假
console.log(true || true) //true
console.log(true || false) //true
console.log(false || true) //true
console.log(false || false) //false
// 逻辑运算符！：取反，真则输出假，假则输出真
console.log(!true)   //false
console.log(!false)   //true
console.log(!!!!!!!!!!!!false)   //flase（前面12个！两个一组相互抵消了）

非布尔值参与运算

非布尔值参与运算时，会先将值转为布尔值，在进行运算，输出的结果除取反（！）外，返回的都不是一定是布尔值

规律：

• （&&运算）a&&b，如果a转换布尔值后是false，这输出结果直接是a，不是转换后的布尔值，否则则返回b
• （||运算）a||b,如果a转换布尔值后是true，则直接返回a，不是转换后的布尔值，否则则返回b

// 逻辑运算符&&,如果前面为flase，直接返回前面内容发生变化,否则返回后面内容
console.log(12 && NaN)     //NaN
console.log(0 && NaN)     //0
console.log(false && NaN)     //false
console.log(true && NaN)     //NaN
// 逻辑运算符||，如果前面为true，直接返回前面内容，否则返回后面内容
console.log(12 || NaN)     //12
console.log(0 || NaN)     //NaN
console.log(false || NaN)     //NaN
console.log(true || NaN)     //true
// 逻辑运算符！：直接取反，只能返回true和false
console.log(!0)     //true
console.log(!1)     //false

运算顺序

默认从前到后，非！》 与&& 》或||

// 运算顺序
console.log(null || 12 && 'abc' || !8); //abc
//先计算！8输出false，在计算12 && 'abc'输出'abc'，公式可以转换为null || 'abc' || false，之后再计算null || 'abc'输出'abc'，在计算'abc' || false直接输出'abc' 

赋值运算符

必须有变量参与运算

1. 将变量中原始值参与数学运算，与右侧的数据
2. 将计算结果重新赋值给变量

运算符	解释
=	等于
+=	加等于
-=	减等于
*=	乘等于
/=	除等于
%=	取余等于
++	递加（自增）
--	递减（自减）

// 赋值运算符
var a = 5;
a += 2; //等价于a = a + 2
console.log(a); //7
a *= 7;
console.log(a); //49
a++
console.log(a); //50
a--
console.log(a); //49

一元运算符

++和--也叫一元运算符，只有一个操作数

一元运算符位置不同效果不同

• 如果++在后（a++）：运算的时候会使用a的原始值参与运算，然后a再+1（先参与，后自加）
• 如果++在前（++a）：运算的时候使用直接a+1然后参与运算（先自加，后参与）

//一元运算符
var a = 10,b = 20,c = 30;
console.log(a++ + ++b + ++c + ++a);  //74,等价于10+21+31+12

运算优先级

综合运算顺序：

1. （）优先级最高
2. 一元运算符++、--、！
3. 算数运算符，先乘除取余，后加减
4. 关系运算符>、>=、< 、<=
5. 相等运算符==、！=、===、！==
6. 逻辑运算符先&&后||
7. 赋值运算符

// () → 一元 → 算术 → 比较 → 逻辑 → 赋值
var a = 4;
var num = 1 * (2 + 3) && ++a || 5 > 6 && 7 < 8 || !9;
// num = 1 * 5 && ++a || 5 > 6 && 7 < 8 || !9
// num = 1 * 5 && 5 || 5 > 6 && 7 < 8 || false
// num = 5 && 5 || 5 > 6 && 7 < 8 || false
// num = 5 && 5 || false && true || false
// num = 5 || false || false
// num = 5
console.log(num); //5