JavaScript -- 03. 运算符介绍

运算符

这部分内容主要讲解了JS中的各种运算符。主要有：算术运算符、赋值运算符、一元运算符、自增自减运算符、逻辑运算符、关系运算符、相等运算符、条件运算符、运算符的优先级以及隐式类型转换。

每个运算符都有两个功能，第一个是计算，第二个是返回计算结果（自增自减的时候需要区分）

1 算数运算符

1.1 基础符号

• 运算符可以用来对一个或多个操作数（值）进行运算

• 算术运算符：

  • 加法运算符
  • 减法运算符
  • 乘法运算符
  • / 除法运算符
  • ** 幂运算
  • % 模运算，两个数相除取余数

• 注意：

  • 算术运算时，除了字符串的加法，
  • 其他运算的操作数是非数值时，都会转换为数值然后再运算

let a = 1 + 1
a = 10 - 5
a = 2 * 4
a = 10 / 5
a = 10 / 3
a = 10 / 0 // Infinity, 其他语言会报错
a = 10 ** 4
a = 9 ** 0.5 // 开方
a = 10 % 2
a = 10 % 3
a = 10 % 4
1
2
3
4
5
6
7
8
9
10
11

1.2 自动类型转换

JS是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算

a = 10 - '5' // 10 - 5
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN
1
2
3
4

计算结果

当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，然后再做拼串的操作可以利用这一特点来完成类型转换可以通过为任意类型 + 一个空串的形式来将其转换为字符串其原理和String()函数相同，但使用起来更加简洁

let a = true
let b = String(a)
let c = a + ''
1
2
3

2 赋值运算符

赋值运算符用来将一个值赋值给一个变量

=
    - 将符号右侧的值赋值给左侧的变量
??=
    - 空赋值
    - 只有当变量的值为null或undefined时才会对变量进行赋值
+=
    - a += n 等价于 a = a + n
-=
    - a -= n 等价于 a = a - n
*=
    - a *= n 等价于 a = a * n
/=
    - a /= n 等价于 a = a / n
%=
    - a %= n 等价于 a = a % n
**=
    - a **= n 等价于 a = a ** n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let a = 5 // 将右边的值 赋值 给左边的变量
let b = a // 一个变量只有在 = 左边时才是变量，在 = 右边时它是值
a = a + 11 // 大部分的运算符都不会改变变量的值，赋值运算符除外
1
2
3

3 一元±

• 正号
  • 不会改变数值的符号
• 负号
  • 可以对数值进行符号位取反
• 当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算

4 自增和自减

4.1 ++ 自增运算符

• ++ 使用后会使得原来的变量立刻增加1
• 自增分为前自增(++a)和后自增(a++)
• 无论是++a还是a++都会使原变量立刻增加1
• 不同的是++a和a++所返回的值不同
  • a++ 是自增前的值 旧值
  • ++a 是自增后的值 新值

let a = 10
let b = a++ // a的值变为11, b的值为10

let c = 10
let d = ++c // c的值变为11, d的值为11

let n = 5
/* 算式从左到右执行，
   先执行n++，此时n变为6, n++返回值为5
   然后执行++n，此时n变为7，++n返回值为7
   最终n的值为7
   所以下式等同于 5 + 7 + 7
 */
let result = n++ + ++n + n // 最终结果为19
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.2 – 自减运算符

• – 使用后会使得原来的变量立刻减少1
• 自增分为前自减(–a)和后自减(a–)
• 无论是–a还是a–都会使原变量立刻减少1
• 不同的是–a和a–所返回的值不同
  • a-- 是自减前的值 旧值
  • –a 是自减后的值 新值

let a = 10
let b = a-- // a的值变为9, b的值为10

let c = 10
let d = --c // c的值变为9, d的值为9
1
2
3
4
5

5 逻辑运算符

• !：逻辑非
• &&： 逻辑与
• || ：逻辑或

5.1 逻辑非

逻辑非的符号是英文的感叹号，不要敲成中文了

• 这个运算符可以对一个值进行非运算

• 可以对一个布尔值进行取反操作

  !true // false
  !false // true
  1
  2

• 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反，可以利用这个特点将其他类型转换为布尔值（可以使用!!m代替Boolean(m)）

  

5.2 逻辑与

• 可以对两个值进行与运算
  • 当&&左右都为true时，则返回true，否则返回false
  • 与运算是短路的与，如果第一个值为false，则不看第二个值
  • 与运算是找false的，如果找到false则直接返回，没有false才会返回true
  • 对于非布尔值进行与运算，它会转换为布尔值然后运算，但是最终会返回原值
    • 如果第一个值为false，则直接返回第一个值
    • 如果第一个值为true，则返回第二个值

result = true && true // true
result = true && false // false
result = false && true // false
result = false && false // false

let a = 2
result = 0 && a++ // 短路发生，第一个值为false，直接终止逻辑运算，不会运算a++
console.log(a) // 2

result = true && 1 > 2 && a-- // 执行到第二项的时候就返回false，也就是说找到第一个计算结果为false就会直接停止计算后面的值
1
2
3
4
5
6
7
8
9
10

布尔值计算最终会返回原表达式的值

• 从左到右计算，返回第一个计算结果为false的表达式计算结果
• 如果最终返回的是true，则会返回最后一项的计算结果

5.3 逻辑或

• 可以对两个值进行或运算
  • 当||左右有true时，则返回true，否则返回false
  • 或运算也是短路的或，如果第一个值为true，则不看第二个值
  • 或运算是找true，如果找到true则直接返回，没有true才会返回false
  • 对于非布尔值或运算，它会转换为布尔值然后运算, 但是最终会返回原值
    • 如果第一个值为true，则返回第一个
    • 如果第一个值为false，则返回第二个

result = true || false 	// true
result = false || true 	// true
result = true || true 	// true
result = false || false // false

let a = 2
result = 1 || a++ // 短路发生，true，直接终止逻辑运算，不会运算a++
console.log(a) // 2

result = false || 1 < 2 || a-- // 执行到第二项的时候就返回true，也就是说找到第一个计算结果为true就会直接停止计算后面的值
1
2
3
4
5
6
7
8
9
10

返回值的计算结果与逻辑与的返回方式相似

• 从左到右计算，返回第一个计算结果为true的表达式计算结果
• 如果最终返回的是false，则会返回最后一项的计算结果

6 关系运算符

关系运算符：关系运算符用来检查两个值之间的关系是否成立；成立返回true，不成立返回false

• >：用来检查左值是否大于右值
• >=：用来检查左值是否大于或等于右值
• <：用来检查左值是否小于右值
• <=：用来检查左值是否小于或等于右值

注意：

• 当对非数值进行关系运算时，它会先将前转换为数值然后再比较
• 当关系运算符的两端是两个字符串，它不会将字符串转换为数值，
  • 而是逐位的比较字符的Unicode编码
  • 利用这个特点可以对字符串按照字母排序
• 注意比较两个字符串格式的数字时一定要进行类型转换

let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true

result = 5 < "10" // true，自动类型转换
result = "1" > false // true，自动类型转换

result = "a" < "b" // true
result = "z" < "f" // false
result = "abc" < "b" // true

result = "12" < "2" // true
result = +"12" < "2" // false，自动类型转换

// 检查num是否在5和10之间
let num = 6
// result = 5 < num < 10 // 错误的写法!!!
// 对于上面这个式子会先执行 5 < num 得到结果是true
// 然后再比较true < 10，这时候会进行自动类型转换
// 将true转换为1后和10比较，也就是1<10，最终结果得到false
result = num > 5 && num < 10  // true，这个是正确写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

7 相等运算符

7.1 ==

• 相等运算符，用来比较两个值是否相等
• 使用相等运算符比较两个不同类型的值时，
  • 它会将其转换为相同的类型（通常转换为数值）然后再比较类型转换后值相同也会返回true
• null和undefined进行相等比较时会返回true
• NaN不和任何值相等，包括它自身

let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true

result = null == undefined // true
result = NaN == NaN // false
1
2
3
4
5
6
7

7.2 ===

• 全等运算符，用来比较两个值是否全等
• 它不会进行自动的类型转换，如果两个值的类型不同直接返回false
• null和undefined进行全等比较时会返回false

result = 1 === "1" // false
result = null === undefined // false
1
2

7.3 !=

• 不等，用来检查两个值是否不相等
• 会自动的进行类型转换

7.4 !==

• 不全等，比较两个值是否不全等
• 不和自动的类型转换

result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true
1
2
3

8 条件运算符（三元表达式）

写法：条件表达式 ? 表达式1 : 表达式2

• 执行顺序：条件运算符在执行时，会先对条件表达式进行求值判断，
  • 如果结果为true，则执行表达式1
  • 如果结果为false，则执行表达式2

let a = 100
let b = 200
let max = a > b ? a : b // 200
1
2
3

9 运算符的优先级

和数学一样，JS中的运算符也有优先级，比如先乘除和加减。

可以通过优先级的表格来查询运算符的优先级

• 在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行
• 优先级我们不需要记忆，甚至表格都不需要看
• 因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可