一、指数运算符
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推出了?.链判断运算符来简化上面的写法,只要左侧对象为null或undefined,就不会再往下执行
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 为 null 或 undefined 则变量 name 的值为tom
??运算符只针对null或undefined的情况,其他如: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,新的写法比老的写法更紧凑一些。