1. 算术运算符
+ 加
- 减
* 乘
/ 除
% 余
算术优先级 * / % 优先级要高于 + - 无论是 + - * / % 都是左结合性(从左至右计算)
var num1 = 10;
var num2 = 20;
var res1 = num1 + num2;
console.log(res1); // 30
var res2 = num1 - num2;
console.log(res2); // -10
var res3 = num1 * num2;
console.log(res3); // 200
var res4 = num2 / num1;
console.log(res4); // 2
var res5 = num2 % num1;
console.log(res5); // 0
1.1 加法运算的注意点
-
任何非数值类型的数据在参与加法运算之前,都会被转成数值类型,再参与运算
var num1 = 1; // 先把true转换成数值类型,转成1 var num2 = true; // 计算 1 + 1 var res1 = num1 + num2 console.log(res1); // 2 // null 转换成数值类型0 var res2 = 1 + null; console.log(res2); // 1 -
任何数据和NaN进行运算,结果都是NaN
// undefined 转换成数值类型 NaN var res3 = 1 + undefined; console.log(res3); // NaN // 字符串转换成数值类型 NaN var res4 = 1 + Number("abc"); console.log(res4); // NaN -
任何数据和字符串类型相加,都会被先转换成字符串之后再运算
// 加法运算只要有字符串类型都是字符串的拼接 var res5 = 1 + "abc"; console.log(res5); // 1abc
1.2 减法运算注意点
-
任何非数值类型的数据在参与减法运算之前,都会被自动转换成数值类型之后再参与运算
var res1 = 1 - true; console.log(res1); // 0 var res2 = 1 - null; console.log(res2); //1 -
任何数据和NaN进行运算,结果都是NaN
var res3 = 1 - undefined; console.log(res3); // NaN var res5 = 1 - 'abc'; console.log(res5); // NaN -
任何数据和字符串相减,都会把字符串转换成数值类型之后再运算
var res4 = 1 - '12'; console.log(res4); // -11
1.3 乘法注意点
- 和减法运算的注意点一模一样
var res1 = 1 * true;
console.log(res1); // 1
var res2 = 1 * null;
console.log(res2); // 0
var res3 = 1 * undefined;
console.log(res3); // NaN
var res4 = 1 * '12';
console.log(res4); // 12
var res5 = 1 * 'abc';
console.log(res5); // NaN
1.4 取模(取余)运算注意点
格式: m % n = 余数
-
如果m>n的, 那么就正常取余
var res1 = 10 % 3; console.log(res1); // 1 -
如果m<n的, 那么结果就是m
var res2 = 3 % 4; console.log(res2); // 3 -
如果n是0, 那么结果就是NaN
var res3 = 10 % 0; console.log(res3); // NaN -
取余运算结果的正负性, 取决于m而不是n
var res4 = 10 % -2; console.log(res4); // 0 var res5 = -10 % 2; console.log(res5); // -0 var res6 = -10 % -2; console.log(res6); // -0
2. 赋值运算符
赋值运算符就是将等号右边的值存储到等号左边的变量中
2.1 赋值运算符
= 、+=加等于、-=减等于、*=乘等于、/=除等于、%=模等于
// =
// 把5赋值给res这个变量
var res = 5;
// 加等于
var number = 3;
// 会将等号左边存储的值取出来和右边进行指定的运算, 运算完毕之后再将运算的结果存储到左边
// number += 2 相当于 number = number + 2 那么就是 number = 3 + 2
// -=、*=、/=、%=、也是一样的步骤
number += 2;
console.log(number); // 5
2.2 赋值运算的优先级和结合性
-
赋值运算优先级低于算术运算
// 由于算术运算符的优先级高于赋值运算符，所以先计算1+1然后把结果赋值给res1这个变量 var res1 = 1 + 1 console.log(res1); // 2 赋值运算符的结合性是右结合性(从右至左的计算)
// 由于赋值运算符的结合性是右结合性,所以将会把5赋值给num2然后再将num2中的值赋给num1
var num1, num2;
num1 = num2 = 5;
console.log(num1); // 5
console.log(num2); // 5
- 赋值运算符的左边只能放变量，不能放常量
3. 自增自减运算符
3.1 自增运算符 ++
可以快速的对一个变量中保存的数据进行+1的操作
var num1 = 2;
//num1 = num1 + 1
// num1 += 1; ===> num1 = num1 + 1;
// num++; ===> num1 = num1 + 1;
++num1
console.log(num1); // 3
3.2 自减运算符 --
可以快速的对一个变量中保存的数据进行-1的操作
let num2 = 2;
// num2 = num2 - 1;
// num2 -= 1; ===> num2 = num2 - 1
// num2--; ===> num2 = num2 - 1
--num2;
console.log(num2); // 1
3.3 自增自减写在变量前面和后面的区别
- 自增自减写在变量的前面，表示变量先自增或自减，然后再参与其他运算
- 自增自减写在变量的后面，表示变量先进行运算，然后再自增或自减
// 写在变量的后面
var num = 1;
// 这里拆解成这样 var res = 1 + 1; num++;
var res = num++ + 1;
console.log(res); // 2
console.log(num); // 2
// 写在变量的前面
var num = 1;
// 这里拆解成这样 ++num; var res = 2 + 1;
var res = ++num + 1;
console.log(res); // 3
console.log(num); // 2
// 在企业开发中不推荐这样写法 var res = a++ + b; // var res = a + b; a++;
var a = 5;
var b = 10;
var res = a + b;
a++;
console.log(res); // 15
console.log(a); // 6
4. 关系运算符
> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于
!== 不等于
=== 全等于
!== 不全等于
关系运算符只有两个返回值，true 和 fasle
关系成立，返回 true
关系不成立，返回 false
console.log(1 > 2); // false
console.log(5 > 2); // true
console.log(1 == 1); // true
关系运算符的注意点
-
如果是非数值类型比较，那么会先转换成数值类型再比较
console.log(1 > false); // true console.log(1 > true); // false console.log(1 > undefined); // false console.log(1 > null); // true console.log(1 > ''); // true console.log(1 > ' '); // true console.log(1 > 'a'); //flase -
对于关系运算符来说，任何数据和
NaN比较都是falseconsole.log(1 > NaN); // false console.log(undefined == NaN); // false console.log(null == NaN); // false console.log('a' > NaN); // false console.log(true == NaN); // false //如果想判断某一个数据是否是NaN那么可以通过isNaN来进行判断 let num = NaN; let res = isNaN(num) console.log(res); // true -
如果是两边都是字符串类型，那么不会转换成数值类型，而是比较字符串相对应的Unicode编码
console.log('a' > 'b'); // false console.log('a' < 'b'); // true // 如果字符串中有多个字符, 会从左至右的依次比较, 直到条件不满足为止 console.log( "ab" > "ac"); // false -
===和!==会比较值和数据类型是否相等==和!=只会比较值console.log("123" == 123); // true console.log("123" != 123); // false console.log("123" === 123); // false console.log("123" !== 123); // true -
关系运算符都是左结合性(从左往右运算)
// 因为关系运算符是左结合性 所以会先运算 10 > 3 返回 true 再计算 1 > 2 最后的结果为false console.log(10 > 3 >2); // STEP1 10 < 25 返回true STEP2 运算 1 < 20 结果为true console.log(10 < 25 < 20); -
关系运算符中
>大于、<小于、>=大于等于、<=小于等于的优先级大于==、!=、===、!==// 先会计算 10 > 3 返回 true 再计算 1 == 5 最后结果返回false console.log(10 > 3 == 5); // 先会计算 10 > 0 返回 true 再计算 10 == 1 最后结果false console.log(10 == 10 > 0);
5. 逻辑运算符
逻辑运算符往往用于多个表达式的求值。
5.1 逻辑与（&&）
格式： 条件表达式A && 条件表达式B
返回值： true/false
特点：如果有一个条件表达式为假则为假
// true && false 结果为false
console.log((10 > 5) && (1 > 2)); // false
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false
5.2 逻辑或（||）
格式： 条件表达式A && 条件表达式B
返回值： true/false
特点：如果有一个条件表达式为真则为真
// true || false 结果为true
console.log((10 > 5) || (1 > 2)); // true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false
5.3 逻辑非（!）
格式： ！条件表达式
返回值： true/false
特点：真变假，假变真
// 非true 就是 false
console.log( !true ); // false
// 先计算括号里的 1 > 2 返回 false 取反 变为 true
console.log( !(1 > 2) ); // true
5.4 逻辑运算符的优先级和结合性
逻辑运算符的结合性是左结合性
逻辑与的优先级大于逻辑或
// 左结合性就是从左往右运算 就计算 true && false 结果为 false
var res = true && false;
console.log(res); // false
// 赋值运算就是右结合性 先运算 1 + 1 返回把结果赋值给 res 这个变量
var total = 1 + 1
console.log(total); // 2
5.5 逻辑运算符的注意点
-
在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
如果条件A不成立, 那么就返回条件A
如果条件A成立, 无论条件B是否成立, 都会返回条件B
// 条件A为flase 那么就会返回条件A 值为0 console.log(0 && 123); // 0 // 条件A为true 那么条件B 不论真假都会返回B console.log(1 && 123); // 123 -
在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
如果条件A成立, 那么就返回条件A
如果条件A不成立, 无论条件B是否成立, 都会返回条件B
// 条件A为flase 那么就会返回条件B 值为123 console.log(0 || 123); // 123 // 条件A为true 那么条件B 不论真假都会返回A 值为1 console.log(1 || 123); // 1
6. 三元（目）运算符
三元运算符格式：条件表达式 ? 返回结果A : 返回结果B
在三元运算符中如果条件表达式为真，那么返回结果A
在三元表达式中如果条件表达式为假，那么返回结果B
// 10 > 6 返回 true 返回条件A Hello
console.log(10 > 6 ? 'Hello' : 'World'); // Hello
// 5 > 6 返回 false 返回条件B World
console.log(5 > 6 ? 'Hello' : 'World'); // World
