js中的常用运算符概述

js中的常用运算符概述

运算符也叫操作符。

通过运算符可以对一个或多个值进行运算，并获取运算结果。

比如：typeof 就是运算符，可以来获取一个值的类型。

typeof 0 // number
typeof '' // string
typeof true // boolean
typeof undefined // undefined
typeof null // object

算数运算符

运算符	描述
+	加法运算。
-	减法运算。
*	乘法运算。
/	除法运算。
%	取模运算。（余数）

注意：任何值和 NaN 运算都会返回 NaN。

1 + NaN // NaN
1 - NaN // NaN
1 * NaN // NaN
1 / NaN // NaN
1 % NaN // NaN

加法运算 +

可以对两个值进行加法运算，并将结果返回。

1 + 2 // 3

如果对两个字符串进行加法运算，则会做拼串处理。

'1' + '2' // '12'

任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作。

'1' + 2 // '12' 数值 2 会转换为字符串 '2'

我们可以使用 + '' 的方式，将任意的数据类型转换为 String 类型。

1 + '' // '1'
true + '' // 'true'
undefined + '' // 'undefined'
null + '' // 'null'
({}) + '' // '[object Object]'

这是一种隐式的类型转换，由浏览器自动完成，实际上是调用了 String() 函数进行隐式转换。

减法运算 -

可以对两个值进行减法运算，并将结果返回。

3 - 2 // 1

如果是非 Number 类型的值进行减法运算，会将这些值转换为 Number 类型，然后再运算。

'3' - '2' // 1
3 - true // 2 true 会转换成 1
'3' - false // 3 false 会转换成 0
3 - null // 3 null 会转换成 0
'3' - undefined // NaN undefined 会转换成 NaN，任何值和 NaN 运算都会返回 NaN

乘法运算 *

可以对两个值进行乘法运算，并将结果返回。

1 * 2 // 2

如果是非 Number 类型的值进行乘法运算，会将这些值转换为 Number 类型，然后再运算。

'3' * '2' // 6
3 * true // 3
'3' * false // 0
3 * null // 0
'3' * undefined // NaN

除法运算 /

可以对两个值进行除法运算，并将结果返回。

1 / 2 // 0.5

如果是非 Number 类型的值进行除法运算，会将这些值转换为 Number 类型，然后再运算。

'3' / '2' // 1.5
3 / true // 3
false / '3' // 0
null / 3 // 0
'3' / undefined // NaN

取模运算（取余数） %

可以对两个值进行取模运算，并将结果返回。

3 % 2 // 1

如果是非 Number 类型的值进行取模运算，会将这些值转换为 Number 类型，然后再运算。

'3' % '2' // 1
3 % true // 0
false % '3' // 0
null % 3 // 0
'3' % undefined // NaN

总结

除了加法运算 +，任何值进行其他算数运算都会自动转换为 Number 类型。

我们可以利用这一特点做隐式的类型转换。（通常都是将 String 类型转换为 Number 类型）

通过 -0，*1，/1，这种不改变原本数值大小的方式进行隐式类型转换。

'3' - 0 // 3
'3' * 1 // 3
'3' / 1 // 3

一元运算符

一元运算符只需要一个操作数。

• +：正号不会对数字产生任何影响。

• -：负号可以对数字进行负号的取反。

+3 // 3
-3 // -3

对于非 Number 类型的值，它会先将值转换为 Number 类型，然后再运算。

+'3' // 3
-'3' // 3

+true // 1
-true // -1

+null // 0
-null // 0

+undefined // NaN
-undefined // NaN

自增和自减

自增 ++

通过 ++ 自增的方式，使变量在自身的基础上增加 1。

自增分成两种：n++（后++）和 ++n（前++）。

无论是 n++ 还是 ++n，都会立即使原变量的值自增 1。

let n = 1

n++
console.log(n) // 2

++n
console.log(n) // 3

不同的是 n++ 和 ++n 返回的值不同。

• n++ 返回的是 自增前 的值。（原变量值）

• ++n 返回的是 自增后 的值。（新值）

let n = 1

console.log(n++) // 1
console.log(n) // 2
console.log(++n) // 3
console.log(n) // 3

自减 –

跟自增的规则一样，只是计算方式不同。

通过 -- 自减的方式，使变量在自身的基础上减少 1。

自减分成两种：n--（后–）和 --n（前–）。

无论是 n-- 还是 --n，都会立即使原变量的值自减 1。

let n = 1

n--
console.log(n) // 0

--n
console.log(n) // -1

不同的是 n-- 和 --n 返回的值不同。

• n-- 返回的是 自减前 的值。（原变量值）

• –n 返回的是 自减后 的值。（新值）

let n = 1

console.log(n--) // 1
console.log(n) // 0
console.log(--n) // -1
console.log(n) // -1

逻辑运算符

运算符	描述
&&	与。
||	或。
!	非。

与 &&

对符号两侧的值进行与运算并返回结果。

运算规则：

• 两个值中只要有一个值为 false 就返回 false，只有两个值都为 true 时，才会返回 true。

false && true // false
true && false // false
true && true // true
false && false // false

• 如果第一个值为 false，则不会看第二个值。

true && console.log('...') // console 会执行
false && console.log('...') // console 不会执行

• 对于非 Boolean 类型的值进行 && 运算时：
   如果第一个值为 true，则返回第二个值。
   如果第一个值为 false，则直接返回第一个值。

1 && 0 // 0
1 && {} // {}

0 && 1 // 0
0 && {} // 0

或 ||

对符号两侧的值进行或运算并返回结果。

运算规则：

• 两个值中只要有一个 true，就返回 true，如果两个值都为 false，才返回 false。

false || true // true
true || false // true
true || true // true
false || false // false

• 如果第一个值为 true，则不会看第二个值。

true || console.log('...') // console 不会执行
false || console.log('...') // console 会执行

• 对于非 Boolean 类型的值进行 || 运算时：
   如果第一个值为 true，则返回第一个值。
   如果第一个值为 false，则直接返回第二个值。

1 || 0 // 1
1 || {} // 1

0 || 1 // 1
0 || {} // {}

非 !

可以用来对一个值进行非运算，返回一个 Boolean 类型的值。

所谓非运算就是对一个值进行取反操作。（true 变 false，false 变 true）

!true // false
!false // true

如果对一个值进行两次取反，它不会变化。

!!true // true
!!false // false

如果对非 Boolean 类型的值进行取反，则会将其转换为布尔值，然后再取反。

所以我们可以利用该特点，将其他数据类型转换为 Boolean 类型。

可以为一个任意数据类型取反两次，来将其转换为 Boolean 类型。

!!1 // true
!!0 // false
!!'' // false
!!null // false
!!undefined // false
!!{} // true

赋值运算符

对变量进行赋值。

运算符	描述
=	可以将符号右侧的值赋值给符号左侧的变量。
+=	左侧变量加上右侧的值。
-=	左侧变量减去右侧的值。
*=	左侧变量乘以右侧的值。
/=	左侧变量除以右侧的值。
%=	左侧变量使用右侧的值进行取余。

let n = 5

n += 5 // 10 等价于 n = n + 5
n -= 5 // 5 等价于 n = n - 5
n *= 5 // 25 等价于 n = n * 5
n /= 5 // 5 等价于 n = n / 5
n %= 5 // 0 等价于 n = n % 5

关系运算符

通过关系运算符可以比较两个值之间的大小，满足条件返回 true，不满足条件返回 false。

运算符	描述
>	判断符号左侧的值是否大于右侧的值。
>=	判断符号左侧的值是否大于或等于右侧的值。
<	判断符号左侧的值是否小于右侧的值。
<=	判断符号左侧的值是否小于或等于右侧的值。

1 > 1 // false
1 >= 1 // true

如果一侧为 Number 类型的值，另一侧不是 Number 类型，会将其转换为 Number 类型然后再比较。

2 < '10' // true
2 > true // true
0 > true // false

如果两侧都是 String 类型，关系运算符不会将其转换为 Number 类型进行比较，这点要特别注意。

而是分别比较字符串中字符的 Unicode 编码顺序。

比较字符编码时是一位一位进行比较，如果两位一样，则比较下一位。

'2' < '10' // false 因为 '2' 的字符编码顺序在 '1' 的后面，比它大
'abc' < 'bca' // true 因为 'b' 的字符编码顺序在 'a' 的后面，比它大

注意：任何值和 NaN 做任何比较都是返回 false。

1 > NaN // false
1 >= NaN // false
1 < NaN // false
1 <= NaN // false

还有一点要特别注意：关系运算符不要联系比较。

3 > 2 > 1 // false

按照正常逻辑，应该返回 true。但是在 JavaScript 中，一个表达式返回一个结果，跟后面的运算符组成新的表达式进行比较，是通过这个方式进行运算的。

3 > 2 > 1 首先 3 和 2 进行比较，返回 true，然后用它们的返回值和 1 进行比较，也就是 true > 1，所以会返回 false。

相等运算符

相等运算符用来比较两个值是否相等。（相等返回 true，不相等返回 false）

运算符	描述
==	相等。
!=	不相等。
===	全等。
!==	不全等。

相等和不相等

== 和 != 是浅比较。如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较。

1 == 1 // true
1 == '1' // true
1 == true // true

1 != 1 // false
1 != '1' // false
1 != true // false

注意：undefined 衍生自 null，所以这两个值做相等判断时，会返回 true。

undefined == null // true

全等和不全等

=== 和 !== 是深比较。用来判断两个值是否全等，它和相等类似。

不同的是它不会做自动的类型转换，必须值和类型都一样，才会返回 true。

1 === 1 // true
1 === '1' // false
1 === true // false
undefined === null // false

1 !== 1 // false
1 !== '1' // true
1 !== true // true
undefined === null // true

注意：NaN 不和任何值相等，包括它本身。

NaN == NaN // false
NaN === NaN // false

NaN != NaN // true
NaN !== NaN // true

可以通过 isNaN(number) 函数来判断一个值是否是 NaN。

或者使用 Object.is(value1, value2) 函数判断两个值是否为同一个值。

isNaN(NaN) // true
Object.is(NaN, NaN) // true

条件运算符（三元运算符）

相当于 if...else... 语句的简写。

语法：条件表达式 ? 语句1 : 语句2。

执行流程：

1. 条件运算符在执行时，首先对条件表达式进行求值。
2. 如果条件表达式返回的值为 true，则执行语句1，并返回语句1的执行结果。
3. 如果条件表达式返回的值为 false，则执行语句2，并返回语句2的执行结果。
4. 如果条件表达式返回的值是一个非 Boolean 类型的值，会将其转换为 Boolean 类型的值然后再运算。

// 返回 undefined，打印 true
true ? console.log(true) : console.log(false)

// 返回 undefined，打印 false
false ? console.log(true) : console.log(false)

1 ? 2 : 3 // 2
0 ? 2 : 3 // 3

运算符的优先级

序号	运算符
1	.、[]、new
2	()
3	++、--
4	!、~、+(单目)、-(单目)、typeof、void、delete
5	%、*、/
6	+(双目)、-(双目)
7	<<、>>、>>>
8	<、<=、>、>=
9	==、!=、===、!==
10	&
11	^
12	|
13	&&
14	||
15	?:(条件)
16	=、+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、^=、|=
17	,(多重求值)

在表中越靠上优先级越高，优先级越高越优先计算。

如果优先级一样，则最左边的优先开始计算，以此类推。

表中的优先级顺序不需要我们专门去记，如果遇到优先级不清楚，我们通常使用 () 来改变优先级。