JS - JS中常见运算符

258 阅读3分钟

运算符(也被称之为操作符,operators)是用于执行各种运算的符号。在编程中,运算符可以对数据进行处理和操作。

JavaScript中运算符的分类:

  • 算术运算符
  • 赋值运算符
  • 关系(比较)运算符
  • 逻辑运算符
 # + -> 运算符 
 # 2和3 -> 运算元或运算目 - 运算符所作用到的那个对象
 $ 2 + 3

如果一个运算符对应的只有一个运算元,那么它是 一元运算符

  • 比如说一元负号运算符(unary negation)-,它的作用是对数字进行正负转换

如果一个运算符拥有两个运算元,那么它是 二元运算符

  • 比如 2 + 3

如果一个运算符拥有三个运算元,那么它是 三元运算符

  • 比如 isLogin ? 'loginOut' : 'loginIn'

算术运算符

算术运算符+, -, *, /, %(取余), **(求幂)。

 console.log(2 + 3); // 输出 5
 console.log(10 % 3); // 输出 1
 console.log(2 ** 3); // 输出 8 <=> Math.pow(2, 3)
 ​
 // **的优先级大于普通的数学运算符
 console.log(2 * 3 ** 2)  // => 2 * 9 = 18

赋值运算符

基本赋值( assignments )运算符=

链式赋值:多个变量共享一个值。

 let a, b;
 a = b = 5;
 console.log(b = 5) // 输出 5
 console.log(a, b); // 输出 5 5

原地修改:例如 +=, -=, *=, /=, %=

 let x = 10;
 x += 2 ** 2; // 等价于 x = x + 2 ** 2
 console.log(x); // 输出 14

自增/自减运算符

  • 自增运算符++,将变量加1。

  • 自减运算符--,将变量减1。

  • 前置和后置

    • 前置(++a):先加后用。
    • 后置(a++):先用后加。
  • 只能用于变量。「 ++5 会报错 」

比较运算符

基本比较运算符==, !=, ===, !==, >, <, >=, <=

比较运算符的结果都是Boolean类型的

相等性比较

  • ==:会进行类型转换。
  • ===:严格相等,不进行类型转换。

相等性比较规则

  1. 如果两个值类型相同,直接比较。
  2. null 和 undefined被认为是相等的
  3. 一个值是null 或 undefined,另一个不是null 或 undefined 直接不等 「 不再转number后比较 」
  4. 如果存在引用类型,先将引用类型转原始类型后再比较
  5. 其余情况,转换为数值类型后再比较
  console.log(0 == null) // => false
  
  console.log(null == null) // => true
  console.log(null == undefined) // => true

逻辑运算符

逻辑运算符,主要是由三个: ||(或),&&(与),!(非)

逻辑或 || :返回第一个真值或最后一个值。

 let name = '';
 let defaultName = name || 'Default';
 console.log(defaultName); // 输出 'Default' => 输出的是变量值,不是转换后的布尔值
 let nickName = 'Klaus'
 ​
 // 逻辑或可以用来给变量赋默认值
 // 如果username的值为undefined或null的时候
 // userName的值就会变成Alex
 let userName = nickName || 'Alex'
 ​
 // -------------------------------------
 ​
 // 但是使用逻辑或进行默认值的赋值会存在一定的问题
 // 因为fasly的值不但但只有null 和 undefined
 // 所以在进行默认值赋值的时候,就容易出现问题
 let num = 0
 let count = num || 18 // => 18
 ​
 // -------------------------------------
 ​
 // 所以ES11中提供了??运算符,也就是空值合并操作符
 let price = 0
 // 只有当price的值是 nullish值时,才会使用??后边那个值
 let totalPrice = price ?? 20  // 0

逻辑与 && :返回第一个假值或最后一个值

 let user = { name: 'Alice' };
 console.log(user && user.name); // 输出 'Alice'
 let user = {
   name: 'klaus',
   age: 23,
   running() {
     console.log('running')
   }
 }
 ​
 // 确保user.running一定存在,且user.running是函数可以被调用
 user && user.running && typeof user.running === 'function' && user.running()
 ​
 // ES11中提供了可选链操作符(?.) 以简化上述操作
 // <变量>?.<操作>
 // 如果变量转布尔后是false,整个操作返回undefined并中止执行, 否则则正常执行对应操作
 // ?. 可以用于对象属性的取值,函数的调用或数组元素值的调用
 // ?. 只能用于取值操作,不能用于赋值操作
 user?.running?.()

逻辑非 ! :将值转换为布尔类型并取反。

 let str = 'Hello World'
 ​
 // 转Boolean类型值
 // 方式一
 console.log(Boolean(str)) // => true
 ​
 // 方式二
 console.log(!str) // => false 
 console.log(!!str) // => true