ES6-运算符的扩展

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)

打印结果：