ES6新增的几个运算符,十分有用

515 阅读2分钟

一、指数运算符

1、简单示例

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

ES5实现

Math.pow(2,2) // 4
Math.pow(2,3) // 8

2、多个运算

指数运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。

// 相当于 2 ** (3 ** 2)
2 ** 3 ** 2
// 512

上面代码中,首先计算的是第二个指数运算符,而不是第一个。

二、链判断运算符

1、简单示例

老式判断

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

上面判断代码繁余且多不利于维护,所以ES6推出了?.链判断运算符来简化上面的写法,只要左侧对象为nullundefined,就不会再往下执行

const firstName = message?.body?.user?.firstName || 'default';

2、链判断运算符?.有三种写法

  • obj?.prop // 对象属性是否存在
  • obj?.[expr] // 同上
  • func?.(...args) // 函数或对象方法是否存在

下面是obj?.[expr]用法的一个例子。

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

上面例子中,字符串的match()方法,如果没有发现匹配会返回null,如果发现匹配会返回一个数组,?.运算符起到了判断作用。

下面是?.运算符常见形式,以及不使用该运算符时的等价形式。

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

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

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

三、Null判断运算符

1、简单示例

var name = student.name ?? 'tom'

如果 student 为 nullundefined 则变量 name 的值为tom

??运算符只针对nullundefined的情况,其他如:0,"",false无效

四、逻辑赋值运算符

ES2021 引入了三个新的逻辑赋值运算符(logical assignment operators),将逻辑运算符与赋值运算符进行结合。

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

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

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

这三个运算符||=&&=??=相当于先进行逻辑运算,然后根据运算结果,再视情况进行赋值运算。

它们的一个用途是,为变量或属性设置默认值。

// 老的写法
user.id = user.id || 1;

// 新的写法
user.id ||= 1;

上面示例中,user.id属性如果不存在,则设为1,新的写法比老的写法更紧凑一些。

fenxianglu.cn/

image.png