JavaScript运算符宝典

这篇文章将详细介绍JavaScript运算符及其用法！

如果我们想导航运算符的话，可以通过cmd + f或ctrl + f，然后放置你需要的运算符，运算符后面跟:。

举个例子：如果你想查找...运算符的话，可以这样写 ...:

P.s.人气指数非官方定义，仅图一乐。

灵巧的运算符

+：加法|一元加

人气指数：★★★★☆

如果在操作数之前使用+运算符，那么+就成为了一元加运算符。

一元加运算符位于操作数之前并计算操作数，并试图将操作数转换为数字（如果不是数字的话）。

const x = 1
const y = -1

console.log(+x)
// expected output: 1

console.log(+y)
// expected output: -1

console.log(+'')
// expected output: 0

console.log(+true)
// expected output: 1

console.log(+false)
// expected output: 0

console.log(+'hello')
// expected output: NaN

注意：如果将一元加运算符与不是数字的字符串一起使用，则返回NaN（not a number）

如果在其他上下文中使用+运算符，则用作加法运算符。

将产生除字符串之外的数字操作数的总和。

注意：它会将布尔值转换为数字，将对象转换为数字。

console.log(2 + 4) // 6
console.log(2 + true) // 3

当你将它与字符串一起使用时，将进行字符串连接

const name = 'code oz'
console.log('hello ' + 'my name is ' + name)

注意：你应该使用模板字符串代替连接。

-: 减法|一元否定

人气指数：★★★★☆

如果在操作数之前使用-运算符，那么-将用作一元否定运算符。

一元否定运算符位于操作数之前进行否定。

注意：它会将布尔值转换为数字，将对象转换为数字，将字符串转换为数字

const a = 5
console.log(-a) // -5
console.log(-'1') // -1

注意：如果将其与不是数字的字符串一起使用，则返回NaN（not a number）

如果在其他上下文中使用-运算符，则用作减法运算符。

减去两个操作数，产生它们的差。

console.log(5 - 3)
// expected output: 2

console.log(3.5 - 5)
// expected output: -1.5

console.log(5 - 'hello')
// expected output: NaN

console.log(5 - true)
// expected output: 4

...：扩展|rest参数

如果在函数参数中使用...运算符，它将用作rest运算符。

它允许函数拥有无限数量的参数！

let arr = [3, 5, 1]

Math.max(...arr) // 5 (spread turns array into a list of arguments)

如果在其他上下文中使用...运算符，它将用作扩展运算符。

如果将其用作函数中的参数：它将允许可迭代，例如函数参数中的数组表达式。

// rest parameter is handle as array in the function
const add = (...rest) => {
   return rest.reduce((total, current) => total + current)
}

// Nice your function can handle different number of parameters !
add(1, 2, 3)
add(1, 2, 3, 4, 5)

你还可以使用它从数组或对象中提取值。

// We extract the first Item of the array into the variable and the others variable in an array named others
const [ firstItem, ...others ] = [ 1, 2, 3, 4 ]
firstItem // 1
others // [ 2, 3, 4 ]

const toto = { a: 1, b: 2, c: 3 }
const { a, ...others } = toto
a // 1, we extract the a key from toto object
others // { b: 2, c: 3 }, we extract other key in the object thanks to rest operator 

注意：当你在做const toto = { ...anotherObject }时，它等于const toto = Object.assign({}, anotherObject)

逻辑运算符

首先我们要知道：Javascript中的所有值都是假值或真值，这意味着你可以对任何值进行布尔计算，并获得布尔值。在Javascript中，除0、null、undefined、NaN、空字符串外，其他所有值都是真值。

&&：逻辑与

人气指数：★★★★★

用于检查所有值（通常值为条件）是否为真。

它将返回第一个值falsy，否则返回最终值。

const isTrue = true
const isFalse = false


const value = isFalse && isTrue // will return false 
const valueBis = isTrue && isFalse // will return false

const toto = 5 && 3 && 1 // will return 1 since all value before are true (5 & 3)

const tutu = 5 && 0 && 2 // will return 0 since it's the first falsy value

if (firstCondition && secondCondition) { console.log('hello') } // console log will be shown only if both condition are true!

&&=：逻辑与赋值

人气指数：★☆☆☆☆

仅当传递的值为真时才赋值。

let toto = 0
let tutu = 2

toto &&= 5 // toto value will be NOT changed since toto is falsy (0)
tutu &&= 3 // tutu value will be replaced by 3 since tutu is trusly (2)

// toto &&= 5 It's a shortcut of 

let toto = 0 

toto = toto && 5

||：逻辑或

人气指数：★★★★☆

用于检查一组值中的一个值（通常值是条件）是否为真。

它将返回第一个值truthy，否则返回最终值。

const isTrue = true
const isFalse = false

const value = isFalse || isTrue // will return true 
const valueBis = isTrue || isFalse // will return true

const toto = 5 || 3 || 1 // will return 5 since it's the first truthy value

const tutu = 0 || 2 || 5 // will return 2 since it's the first truthy value

if (firstCondition || secondCondition) { console.log('hello') } // console log will be shown if one condition matches!

||=：逻辑或赋值

人气指数：★☆☆☆☆

仅当传递的值为假时才赋值。

let toto = 0
let tutu = 2

toto ||= 5 // toto value will be replaced by 5 since toto is falsy (0)
tutu ||= 3 // tutu value will NOT changed since tutu is not a falsy value (2)

// toto ||= 5 It's a shortcut of 

let toto = 0 

toto = toto || 5

??: 逻辑空合并

人气：★★★☆☆

当其左侧操作数为null或undefined （空值）时，返回其右侧操作数。

const toto = 0 ?? 55 // 0 since 0 is not equal to nullish value.
const tutu = null ?? 'hello' // 'hello' since the right-hand side is equal to `null`
const tata = undefined ?? 55 // '55 since the right-hand side is equal to `undefined`
const titi = null ?? undefined // undefined since the right-hand side is equal to `null`

注意：??运算符与||不同，因此当你需要根据其他值来赋值时，应该选择正确的运算符！

const toto = 0 || 55 // 55 since 0 is a falsy value
const titi = 0 ?? 55 // 0 since 0 is different of nullish value

const tutu = undefined || 55 // 55 since undefined is a falsy value
const tata = undefined ?? 55 // 55 since undefined is equal to nullish value

??=: 逻辑空赋值

人气指数：★☆☆☆☆

仅当传递的值等于null或undefined (nullish)时才赋值。

let toto = null
toto ??= 55 // toto is equal to 55 since it's a nullish value (null)

let tutu = 90
tutu ??= 23 // toto is equal to 90 since it's not a nullish value (90)
// toto ??= 5 It's a shortcut of 

let toto = null

toto = toto ?? 5 // Equal to 5 since toto is equal to null

!: 逻辑非

人气指数：★★★★★

将真值交换为假值，将假值交换为真值。

还会将任何值转换为布尔值。所以所有真值都变成假值，反之亦然。

提示：我经常使用双逻辑运算符来将任何值转换为布尔值。它相当于使用布尔值（任何值哦）

console.log(!true) // false
console.log(!true) // true
console.log(!0) // false
console.log(!1) // true

console.log(!{}) // false
console.log(![]) // false
console.log(!undefined) // true

// My tips 
console.log(!!{}) // true, equal to Boolean({})
console.log(!![]) // true, equal to Boolean([])

if (!!value) { ... } // I use a lot in order to check if a value is defined or undefined! (Be careful, if the value is equal to `0` it will be false!)

特殊运算符

?.: 可选链

人气指数：★★★★☆

它允许访问对象上的属性，而无需检查链中的每个引用是否有效。

是不是不明白？看看下面的例子你就知道了：

const toto = { a: { b: 5 } }
toto.a // { b: 5 }
toto.a.b // 5
toto.a.b.c // undefined
toto.a.b.c.d // Uncaught TypeError: Cannot read properties of undefined

实际上，当你尝试访问未定义属性上的属性时，Javascript引擎将触发错误！

所以为了安全起见，我们需要像这样做：

const toto = { a: { b: 5 } }

if (toto.a && toto.a.b && toto.a.b.c && toto.a.b.c.d) {
    console.log(toto.a.b.c.d) // It's safe to use it since we check before if the property exist!
}

但是这样不太方便，是吧？

所以可选链来拯救我们了。

如上所示，你可以尝试访问一个属性，而无需检查之前是否存在所有属性！你只需要在属性上使用此运算符，如果该属性不存在，则返回undefined。

const toto = { a: { b: 5 } }
toto?.a?.b // 5
toto?.a?.b?.c?.d // undefined

?: 三元运算符

人气指数：★★★★☆

这是JavaScript中唯一需要两个伪操作数（?和:）的运算符。它根据条件是假还是真来评估条件。等价于if (...) & else (...)。

console.log(true ? 55 : 10) // 55
console.log(0 ? 13 : 34) // 34

const toto = 2 > 1
console.log(toto ? 'ok' : 'not ok')

//  It's a shortcut of 

if (toto) {
    console.log('ok')
} else {
    console.log('not ok')
}

比较运算符

==：相等

人气指数：★☆☆☆☆

检查两个操作数是否相等，并返回布尔结果。与===（严格相等运算符）不同，它尝试转换（进行隐式强制）并比较不同类型的操作数。

下面是如何完成隐式强制的示例！

// 1) Not the same type so implicit coercion will be made
'24' == 24

// 2) Convert string into number so 
Number('24') == 24

// 3) We got an number so we can check value
24 == 24 // true !

通常，你应该使用===（严格相等），并避免使用此运算符！

===：严格相等

人气指数：★★★★★

检查两个操作数是否相等，并返回布尔结果。与==（相等运算符）不同，严格相等运算符始终认为不同类型的操作数是不同的。

console.log(1 === 1)
// expected output: true

console.log('hello' === 'hello')
// expected output: true

console.log('1' ===  1)
// expected output: false

console.log(0 === false)
// expected output: false

你应该始终使用此运算符而不是==（相等运算符）！

!=: 不等于

人气指数：★☆☆☆☆

检查两个操作数是否不相等，并返回布尔结果。与!==（严格不等于运算符）不同，它尝试转换和比较不同类型的操作数。

console.log(1 != 1)
// expected output: false

console.log('hello' != 'hello')
// expected output: false

console.log('1' !=  1)
// expected output: false

console.log(0 != false)
// expected output: false

通常，你应该使用!==（严格不等于）并避免使用此运算符！

!==: 严格不等于

人气：★★★★★

检查两个操作数是否不相等，并返回布尔结果。与!=（不等于运算符）不同，严格不等于运算符始终认为不同类型的操作数是不同的。

console.log(1 !== 1)
// expected output: false

console.log('hello' !== 'hello')
// expected output: false

console.log('1' !==  1)
// expected output: true

console.log(0 !== false)
// expected output: true

你应该始终使用此运算符而不是!=（不等于）！

>：大于

人气指数：★★★★☆

如果左操作数大于右操作数，则返回true，否则返回false。

console.log(5 > 3)
// expected output: true

console.log(3 > 3)
// expected output: false

console.log('ab' > 'aa')
// expected output: true

>=：大于或等于

人气指数：★★★★☆

如果左操作数大于或等于右操作数，则返回true，否则返回false。

console.log(5 >= 3)
// expected output: true

console.log(3 >= 3)
// expected output: true

console.log('ab' >= 'aa')
// expected output: true

<：小于

人气指数：★★★★☆

如果左操作数小于右操作数，则返回true，否则返回false。

console.log(5 < 3)
// expected output: false

console.log(3 < 3)
// expected output: false

console.log('aa' < 'ab')
// expected output: true

<=：小于或等于

人气：★★★★☆

如果左操作数小于或等于右操作数，则返回true，否则返回false。

console.log(5 <= 3)
// expected output: false

console.log(3 <= 3)
// expected output: true

// Compare bigint to number (note: bigint is not supported in all browsers)
console.log(3n <= 5)
// expected output: true

console.log('aa' <= 'ab')
// expected output: true

算术运算符

+=：加法赋值

人气指数：★★★☆☆

右操作数的值加到变量，并将结果赋值给变量。

let a = 5
let b = 3

b += a // b will be equal to 8, since we are adding 5 to b variable!

-=：减法赋值

人气指数：★★★☆☆

右操作数的值减去变量，并将结果赋值给变量。

let a = 5
let b = 3

b -= a // b will be equal to 2, since we are subtracting 5 to b variable

*：乘法

人气指数：★★★☆☆

产生操作数的乘积。

let a = 5
let b = 3

let c = a * b // 15

*=：乘法赋值

人气：★★★☆☆

右操作数的值乘以变量，并将结果赋给变量。

let a = 5
let b = 3

b *= a // 15

/：除法

人气指数：★★★☆☆

产生操作数的商，其中左操作数是被除数，右操作数是除数。

let a = 10
let b = 2

let c = a / b // 2

console.log(1 / 0) // Infinity

/=：除法赋值

人气：★★★☆☆

右操作数的值除以变量，并将结果赋给变量。

let a = 10
let b = 2

b /= a // 2

**：求幂

人气指数：★★★☆☆

返回第一个操作数作为底数，第二个操作数作为指数的求幂结果。等同于Math.pow，不同在于**也接受BigInts作为操作数。

let a = 10
let b = 2

let c = a ** b // 100, it equals to 10^2 or Math.pow(10, 2)

**=：求幂赋值

人气：★★★☆☆

将变量的值提升到右操作数的幂。

let a = 10
let b = 2

b **= a // 1024, it equals to 2^10 or Math.pow(2, 10)
a **= b // 100, it equals to 10^2 or Math.pow(10, 2)

%：余数（取模）

人气指数：★☆☆☆☆

返回一个操作数除以第二个操作数时剩余的余数。总是带被除数的符号。

let a = 10
let b = 3

let c = a % b // 1

%=: 余数赋值

人气：★☆☆☆☆

变量除以右操作数的值，并将余数赋值给变量。

let a = 10
let b = 3

a %= b // 1 it's equal to a % b

++：增量

人气指数：★★★☆☆

增加（加一）操作数并返回一个值。

你可以通过两种方式使用：

作为预增量：在操作前增加值

let toto = 55

console.log(toto) // 55
console.log(++toto) // 56
console.log(toto) // 56

作为后增量：在操作后增加值

let toto = 55

console.log(toto) // 55
console.log(toto++) // 55
console.log(toto) // 56

--：减量

人气指数：★★★☆☆

减少（减一）操作数并返回一个值。

你可以通过两种方式使用：

作为预减量：在操作前递减值

let toto = 55

console.log(toto) // 55
console.log(--toto) // 54
console.log(toto) // 54

作为后减量：在操作后递减值

let toto = 55

console.log(toto) // 55
console.log(toto--) // 55
console.log(toto) // 54

位运算符

&：按位与

人气指数：★☆☆☆☆

在两个操作数的对应位均为1的每个位位置返回1。

注意：不要混淆&和&&运算符。&&是逻辑运算符AND

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a & b) // 00000000000000000000000000000001

小提示：如果你需要检查一个数是否为偶数，可以使用numberVar & 1，如果结果等于0，那就是偶数！

&=：按位与赋值

人气指数：★☆☆☆☆

使用两个操作数的二进制表示，对它们进行按位与运算并将结果分配给变量。

let a = 5      // 00000000000000000000000000000101
a &= 3         // 00000000000000000000000000000011

~：按位取反

人气：★☆☆☆☆

取反操作数的位。与其他按位运算符一样，将操作数转换为32位有符号整数

const a = 5     // 00000000000000000000000000000101
const b = -3    // 11111111111111111111111111111101

console.log(~a) // 11111111111111111111111111111010
// expected output: -6

console.log(~b) // 00000000000000000000000000000010
// expected output: 2

|: 按位或

人气：★☆☆☆☆

在其中一个操作数或两个操作数的相应位为1时，在每个位位置返回一个1。

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a | b) // 00000000000000000000000000000111
// expected output: 7

|=：按位或赋值

人气指数：★☆☆☆☆

使用两个操作数的二进制表示，对它们进行按位或运算并将结果分配给变量。

let a = 5      // 00000000000000000000000000000101
a |= 3         // 00000000000000000000000000000011

console.log(a) // 00000000000000000000000000000111
// expected output: 7

^：按位异或

人气指数：★☆☆☆☆

当其中任一操作数但不是两个操作数的相应位是1时，在每个位位置返回一个1。

const a = 5        // 00000000000000000000000000000101
const b = 3        // 00000000000000000000000000000011

console.log(a ^ b) // 00000000000000000000000000000110

^=：按位异或赋值

人气指数：★☆☆☆☆

使用两个操作数的二进制表示，对它们进行按位异或运算并将结果分配给变量。

let a = 5      // 00000000000000000000000000000101
a ^= 3         // 00000000000000000000000000000011

console.log(a) // 00000000000000000000000000000110
// expected output: 6

<<: 按位左移

人气指数：★☆☆☆☆

将第一个操作数向左移动指定的位数。左移的多余位将被丢弃。零位从右侧移入。

const a = 5         // 00000000000000000000000000000101
const b = 2         // 00000000000000000000000000000010

console.log(a << b) // 00000000000000000000000000010100
// expected output: 20

<<=：按位左移赋值

人气指数：★☆☆☆☆

向左移动指定数量的位并将结果赋值给变量。

let a = 5 // 00000000000000000000000000000101

a <<= 2   // 00000000000000000000000000010100

console.log(a)
// expected output: 20

>>：右移

人气指数：★☆☆☆☆

将第一个操作数向右移动指定的位数。右移的多余位将被丢弃。最左侧位的副本从左边移入。

由于新的最左侧位与前一个最左侧位具有相同的值，因此符号位（最左侧位）不会改变。所以又叫做符号传播。

const a = 5          //  00000000000000000000000000000101
const b = 2          //  00000000000000000000000000000010
const c = -5         // -00000000000000000000000000000101

console.log(a >> b)  //  00000000000000000000000000000001
// expected output: 1

console.log(c >> b)  // -00000000000000000000000000000010
// expected output: -2

>>=：按位右移赋值

人气指数：★☆☆☆☆

向右移动指定数量的位并将结果赋值给变量。

let a = 5      //  00000000000000000000000000000101

a >>= 2        //  00000000000000000000000000000001
console.log(a)
// expected output: 1

let b = -5     // -00000000000000000000000000000101

b >>= 2        // -00000000000000000000000000000010
console.log(b)
// expected output: -2

>>>：无符号右移

人气指数：★☆☆☆☆

将第一个操作数向右移动指定的位数。右移的多余位将被丢弃。

零位从左侧移入。

符号位变为0，因此结果始终为非负。与其他按位运算符不同，0填充的右移返回一个无符号的32位整数。

const a = 5          //  00000000000000000000000000000101
const b = 2          //  00000000000000000000000000000010
const c = -5         // -00000000000000000000000000000101

console.log(a >>> b) //  00000000000000000000000000000001
// expected output: 1

console.log(c >>> b) //  00111111111111111111111111111110
// expected output: 1073741822

>>>=：无符号右移赋值

人气指数：★☆☆☆☆

向右移动指定数量的位并将结果赋值给变量。

let a = 5 //  00000000000000000000000000000101

a >>>= 2  //  00000000000000000000000000000001
console.log(a)
// expected output: 1

let b = -5 // -00000000000000000000000000000101

b >>>= 2   //  00111111111111111111111111111110
console.log(b)
// expected output: 1073741822

希望这篇教程能对大家有所帮助。祝编码快乐！