1. 指数运算符 **
a ** b - - - a 的 b 次方
多个 ** 指数运算符时,计算顺序为:从右到左
eg:
let x = 2 ** 3
console.log(x)
// 多个指数运算符,从右向左计算
let y = 3 ** 2 ** 3
// 相当于 3 ** (2 ** 3)
console.log(y)
打印结果:
2. 链判断运算符 ?.
x ?. y 如果 x 存在,则返回 x.y , 不存在返回 undefined
注意:?.后面紧跟十进制数(后面还有:),会被处理成三目运算符 ?: .会被当成小数点,十进制数处理成小数
eg:
// 2. 链判断运算符 ?. x?.y 如果 x 存在,则返回 x.y , 不存在返回 undefined
let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1]
console.log(hex)
let x = {
a: 1,
b: 2,
5: '斑'
}
let res1 = x?.c
let res2 = x?.a
console.log(res1, res2)
let res3 = x?.5:0 // ?.后面紧跟十进制数,这种会被解析成三目运算符 x ? .5 : 0
console.log(res3)
打印结果:
3. Null 判断运算符 ??
ES5 中 || 运算符 常用于默认值处理- - -数据 || 默认值,对于数据是 空字符串、false、0 、null、undefined都会进行默认值处理
但是有时需要 当数据值为 null / undefined 时才设置为默认值,
如果数据值为 空字符串、false、0,还是照常返回
ES6中添加了 ?? 运算符解决这个问题
eg:
let obj = {
0: false,
1: '苹果',
2: '',
3: 0
}
const res1 = obj[0] || '榴莲'
const res2 = obj[1] || '榴莲'
const res3 = obj[2] || '榴莲'
const res4 = obj[3] || '榴莲'
console.log(res1, res2, res3, res4)
const res5 = obj[0] ?? '榴莲'
const res6 = obj[1] ?? '榴莲'
const res7 = obj[2] ?? '榴莲'
const res8 = obj[3] ?? '榴莲'
const res9 = obj[4] ?? '榴莲'
console.log(res5, res6, res7, res8, res9)
打印结果:
4. 逻辑运算符 ||= &&= ??=
x ||= y 相当于 x || (x = y)
x &&= y 相当于 x && (x = y)
x ??= y 相当于 x ?? (x = y)
eg:
let obj = {
uname: '史迪仔',
age: 2
}
let obj2 = {}
const uname = obj.uname ||= '不知名星人'
const uname2 = obj2.uname ||= '不知名星人'
console.log(uname, uname2)
const address = obj.address ??= '地球'
console.log(address)
let x = 2
let y = 3
let z = 0
x &&= y
z &&= y
console.log(x)
console.log(z)
打印结果: