运算符(也被称之为操作符,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类型的
相等性比较:
==:会进行类型转换。===:严格相等,不进行类型转换。
相等性比较规则
- 如果两个值类型相同,直接比较。
- null 和 undefined被认为是相等的
- 一个值是null 或 undefined,另一个不是null 或 undefined 直接不等 「 不再转number后比较 」
- 如果存在引用类型,先将引用类型转原始类型后再比较
- 其余情况,转换为数值类型后再比较
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