es6运算符扩展

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

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

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

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

上面代码中，首先计算的是第二个指数运算符，而不是第一个。
指数运算符可以与等号结合，形成一个新的赋值运算符（=）。**

let a = 1.5;
a **= 2;
// 等同于 a = a * a;

let b = 4;
b **= 3;
// 等同于 b = b * b * b;
1
2
3
4
5
6
7

2.链判断运算符 ？.

const firstName = message?.body?.user?.firstName || 'default';
const fooValue = myForm.querySelector('input[name=foo]')?.value
1
2

3.Null 判断运算符??
读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。但是属性的值如果为空字符串或false或0，默认值也会生效。为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。
??本质上是逻辑运算，它与其他两个逻辑运算符&&和||有一个优先级问题，它们之间的优先级到底孰高孰低。优先级的不同，往往会导致逻辑运算的结果不同.现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

4.逻辑赋值运算符
ES2021 引入了三个新的逻辑赋值运算符（logical assignment operators），将逻辑运算符与赋值运算符进行结合。

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

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

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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

// 新的写法
user.id ||= 1;
1
2
3
4
5

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

下面是另一个例子。

function example(opts) {
  opts.foo = opts.foo ?? 'bar';
  opts.baz ?? (opts.baz = 'qux');
}
1
2
3
4

上面示例中，参数对象opts如果不存在属性foo和属性baz，则为这两个属性设置默认值。有了“Null 赋值运算符”以后，就可以统一写成下面这样。

function example(opts) {
  opts.foo ??= 'bar';
  opts.baz ??= 'qux';
}
1
2
3
4