Tk Wiki

Appearance

运算符扩展 ​

指数运算符 ​

ES2016 新增了一个指数运算符（**）

js
2 ** 2 // 4
2 ** 3 // 8

链判断运算符 ​

读取对象内部的某个属性，需要判断一下该对象是否存在。

三元运算符?:也常用于判断对象是否存在。

js
const fooValue = fooInput ? fooInput.value : undefined

ES2020 - 链判断运算符?.：左侧对象是否为 null 或 undefined。如果是，返回 undefined，如果不是，继续运算

三种写法 ​

js
// 属性
const fooValue = fooInput?.value
// 动态属性
obj?.[expr]
// 函数、方法调用
func?.(...args)

注意点 ​

短路机制：不满足条件，不向下执行。如果左侧为真，++x 不执行

js
a?.[++x]
// 等同于
a == null ? undefined : a[++x]

括号影响：属性链有圆括号，链判断运算符对圆括号外部没有影响

js
;(a?.b).c(
  // 等价于
  a == null ? undefined : a.b
).c

delete 运算符

js
delete a?.b
// 等同于
a == null ? undefined : delete a.b

报错场合：以下均不合法

  1. 构造函数
  2. 右侧为模板字符串
  3. super 函数
  4. 左侧为赋值运算符
  5. 右侧为十进制
js
// 构造函数
new a?.()
new a?.b()

// 右侧有模板字符串
a?.`{b}`
a?.b`{c}`

// super函数
super?.()
super?.foo

// 左侧用于赋值运算符
a?.b = c

// 右侧为十进制
foo?.3:0
// 为了保证兼容性，会被解析为 foo ? .3 : 0

Null 判断运算符 ​

ES5 - 通过 || 指定默认值， 值为null或undefined，默认值生效

问题：false或0触发默认值

js
const default = val || 'world'

ES2020 - Null 判断运算符??：类似||，但 false 或 0 不会触发

??有一个运算优先级问题，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

js
lhs && middle ?? rhs // 报错

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);

逻辑赋值运算符 ​

ES2021 - 引入了三个新的逻辑赋值运算符（||= &&= ??=)

js
// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

用法

js
function example(opts) {
  opts.foo = opts.foo ?? 'bar'
  opts.baz ?? (opts.baz = 'qux')
}
js
function example(opts) {
  opts.foo ??= 'bar'
  opts.baz ??= 'qux'
}

相关链接 ​

[-] 运算符扩展