您必须存储此 JavaScript 运算符索引

这里是 JavaScript 运算符的列表及其使用方法！

您应该标记这一点，并在需要知道这个操作符是什么时使用它！

为了导航，您可以创建一个cmd + f或ctrl + f并将您需要的运算符放在:其后面。

例如：...:如果我正在寻找什么是...运算符

🚨 受欢迎程度由我自己的使用情况决定。

双手灵巧的操作员

`+`：加法 | 一元加法

人气：★★★★☆

如果在操作数之前使用`+`运算符，它将被用作。`unary plus operator`

一元加运算符位于其操作数之前并计算其操作数，但如果尚未转换为数字，则尝试将其转换为数字。

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（非数字）

如果在其他上下文中使用`+`运算符，则将用作`addition operator`。

它产生了sum of numeric operands除了string

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

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

当你将它与字符串一起使用时，它将产生string concatenation

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

📝 注意：你应该使用模板文字字符串而不是连接

`-`：减法 | 一元否定

人气：★★★★☆

如果在操作数之前使用`-`运算符，它将被用作。`unary negation operator`

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

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

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

📝 注意：如果您尝试将其与非数字的字符串一起使用，它将返回 NaN（非数字）

如果在其他上下文中使用`-`运算符，则将用作`subtraction operator`。

它将两个操作数相减，得出它们的差值。

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

`...`：传播 | 休息

人气：★★★★☆

如果在执行过程中使用`...`运算符作为函数参数，它会将数组转换为参数列表。在这种情况下，它被称为`Spread operator`。

let arr = [3, 5, 1]

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

您可以`...`以另一种方式使用运算符，即`opposite of turning array into a list`，当您转换时`some item into an array`！

它允许我们为该函数提供无限数量的参数！因为它会将参数（项目列表）转换为参数数组！

// 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)

您还可以将其用于或的extracting值arrayobject

// 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)

总结：

Spread operator:将数组转换为参数列表。

Rest operator:将参数列表转换为数组。

逻辑运算符

需要了解的是：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

`||`：逻辑或

人气：★★★★☆

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

它将返回第一个真值，否则将返回最后一个值。

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

`??`：逻辑空值合并

人气：★★★☆☆

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

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（为空）时才分配值。

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

`!`：逻辑非

人气：★★★★★

将 a 交换true value成false value，并将false value交换成true value。

它还可以将任何值转换为布尔值。因此所有truthy值都变为falsy值，反之亦然。

💡 提示：我经常使用双重逻辑运算符将任意值转换为布尔值！这相当于使用布尔值（任意值）

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!
}

但这样做其实不太方便，不是吗？

所以opional chaining它来拯救我们了！🦸‍♂️

您可以尝试访问某个属性，而无需像上面那样先检查所有属性是否存在！您只需在属性上使用此运算符，如果该属性不存在，它将返回undefined。

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

`?`：三元

人气：★★★★☆

是 JavaScript 中唯一需要两个伪操作数（?与）的运算符。它根据条件是否为或来:评估条件！它等同于。falsytruthyif (...) & 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')
}

比较运算符

`==`：平等

人气：★☆☆☆☆

它检查两个操作数是否相等，并返回布尔值。与不同=== (strict equality operator)，它会尝试转换（进行隐式强制转换）并比较不同类型的操作数。

📝 注意：隐式强制转换的机制并不容易理解，但你可以在这篇文章中查看详细信息https://dev.to/codeozz/implicit-coercion-in-javascript-neh

这里有一个隐式强制转换的例子！👇

// 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 !

一般来说你应该使用=== (strict equality)并避免使用这个运算符！

`===`：严格平等

人气：★★★★★

它检查两个操作数是否相等，并返回布尔值。与不同== (equality operator)，严格相等运算符始终将不同类型的操作数视为不同。

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

您应该始终使用此运算符来代替== (equality operator)！

`!=`：不平等

人气：★☆☆☆☆

它检查两个操作数是否不相等，并返回布尔值。与不同!== (strict inequality operator)，它会尝试转换并比较不同类型的操作数。

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

一般来说你应该使用!== (strict inequality)并避免使用这个运算符！

`!==`：严格不等式

人气：★★★★★

它检查两个操作数是否不相等，并返回布尔值。与不同(!= inequality operator)，严格不等运算符始终将不同类型的操作数视为不同。

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

您应该始终使用此运算符来代替!= (inequality)！

`>`：大于

人气：★★★★☆

如果左操作数大于右操作数，则返回 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

算术运算符

`+=`：加法作业

人气：★★★☆☆

Adds将右操作数的值传递给变量并赋值result to the variable。

let a = 5
let b = 3

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

`-=`：减法作业

人气：★★★☆☆

Subtracts将右操作数的值传递给变量并赋值result to the 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

`*=`：乘法作业

人气：★★★☆☆

Multiple将右操作数的值传递给变量并赋值result to the variable。

let a = 5
let b = 3

b *= a // 15

`/`：分配

人气：★★★☆☆

其产生的结果quotient of its operands是左操作数是被除数，右操作数是除数。

let a = 10
let b = 2

let c = a / b // 2

console.log(1 / 0) // Infinity

`/=`：部门分配

人气：★★★☆☆

Divide将右操作数的值传递给变量并赋值result to the variable。

let a = 10
let b = 2

b /= a // 2

``：指数运算**

人气：★★★☆☆

它返回第一个操作数的第二个操作数的幂的结果。它等效于Math.pow，但它也接受 BigInt 作为操作数。

let a = 10
let b = 2

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

`=`：指数运算作业**

人气：★★★☆☆

它的raises the value of a variable右操作数的幂。

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

有关数学中模数的更多信息 -> https://simple.wikipedia.org/wiki/Modulo_operation

`%=`：剩余赋值

人气：★☆☆☆☆

它divides a variable by the value of the right operand并分配remainder to the variable。

let a = 10
let b = 3

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

有关数学中模数的更多信息 -> https://simple.wikipedia.org/wiki/Modulo_operation

`++`：增量

人气：★★★☆☆

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

您可以通过两种方式使用它：

As ：它在操作之前pre increment增加值

let toto = 55

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

As ：操作后post increment增加值

let toto = 55

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

`--`：减少

人气：★★★☆☆

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

您可以通过两种方式使用它：

As ：操作前pre decrement减少值

let toto = 55

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

As ：操作后post decrement减少值

let toto = 55

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

位运算符

`&`：按位与

人气：★☆☆☆☆

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

⚠️ 注意：不要混淆&and&&运算符！&&是逻辑运算符 AND。

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

console.log(a & b) // 00000000000000000000000000000001

💡 提示：如果您需要检查一个数字是否为偶数，您可以使用numberVar & 1，如果结果等于0，则您的数字为偶数！

`&=`：按位与赋值

人气：★☆☆☆☆

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

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

console.log(a) // 00000000000000000000000000000001

`~`：按位非

人气：★☆☆☆☆

它反转操作数的位。与其他位运算符一样，它将操作数转换为 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，因此结果始终为非负数。与其他按位运算符不同，零填充右移返回一个无符号的 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

我希望你喜欢这篇文章！

🎁 如果您在Twitter上关注我并给我发送消息，您可以Underrated skills in javascript, make the difference免费获得我的新书😁 并节省 19 美元💵💵

或者在这里获取

🇫🇷🥖 对于法国开发者，你可以查看我的YoutubeChannel

🎁我的新闻通讯

☕️ 你可以支持我的作品🙏

🏃‍♂️ 你可以关注我 👇

🕊 推特：https://twitter.com/code__oz

👨‍💻 Github：https://github.com/Code-Oz

你也可以标记🔖这篇文章！

文章来源：https://dev.to/codeoz/you-must-store-this-javascript-operator-index-2bec

您必须存储此 JavaScript 运算符索引

您必须存储此 JavaScript 运算符索引

双手灵巧的操作员

+：加法 | 一元加法

如果在操作数之前使用+运算符，它将被用作。unary plus operator

如果在其他上下文中使用+运算符，则将用作addition operator。

-：减法 | 一元否定

如果在操作数之前使用-运算符，它将被用作。unary negation operator

如果在其他上下文中使用-运算符，则将用作subtraction operator。

...：传播 | 休息

如果在执行过程中使用...运算符作为函数参数，它会将数组转换为参数列表。在这种情况下，它被称为Spread operator。

您可以...以另一种方式使用运算符，即opposite of turning array into a list，当您转换时some item into an array！

逻辑运算符

&&：逻辑与

&&=：逻辑与赋值

||：逻辑或

||=：逻辑或赋值

??：逻辑空值合并

??=：逻辑空值赋值

!：逻辑非

特殊运算符

?.：可选链式调用

?：三元

比较运算符

==：平等

===：严格平等

!=：不平等

!==：严格不等式

>：大于

>=：大于或等于

<：少于

<=：小于或等于

算术运算符

+=：加法作业

-=：减法作业

*：乘法

*=：乘法作业

/：分配

/=：部门分配

**：指数运算

**=：指数运算作业

%：余数（模）

%=：剩余赋值

++：增量

--：减少

位运算符

&：按位与

&=：按位与赋值

~：按位非

|：按位或

|=：按位或赋值

^：按位异或

^=：按位异或赋值

<<：左移

<<=：左移赋值

>>：右移

>>=：右移赋值

>>>：无符号右移

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

`+`：加法 | 一元加法

如果在操作数之前使用`+`运算符，它将被用作。`unary plus operator`

如果在其他上下文中使用`+`运算符，则将用作`addition operator`。

`-`：减法 | 一元否定

如果在操作数之前使用`-`运算符，它将被用作。`unary negation operator`

如果在其他上下文中使用`-`运算符，则将用作`subtraction operator`。

`...`：传播 | 休息

如果在执行过程中使用`...`运算符作为函数参数，它会将数组转换为参数列表。在这种情况下，它被称为`Spread operator`。

您可以`...`以另一种方式使用运算符，即`opposite of turning array into a list`，当您转换时`some item into an array`！

`&&`：逻辑与

`&&=`：逻辑与赋值

`||`：逻辑或

`||=`：逻辑或赋值

`??`：逻辑空值合并

`??=`：逻辑空值赋值

`!`：逻辑非

`?.`：可选链式调用

`?`：三元

`==`：平等

`===`：严格平等

`!=`：不平等

`!==`：严格不等式

`>`：大于

`>=`：大于或等于

`<`：少于

`<=`：小于或等于

`+=`：加法作业

`-=`：减法作业

`*`：乘法

`*=`：乘法作业

`/`：分配

`/=`：部门分配

``：指数运算**

`=`：指数运算作业**

`%`：余数（模）

`%=`：剩余赋值

`++`：增量

`--`：减少

`&`：按位与

`&=`：按位与赋值

`~`：按位非

`|`：按位或

`|=`：按位或赋值

`^`：按位异或

`^=`：按位异或赋值

`<<`：左移

`<<=`：左移赋值

`>>`：右移

`>>=`：右移赋值

`>>>`：无符号右移

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