运算符的扩展

指数运算符

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

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

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

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

指数运算符可以与等号结合，形成一个新的赋值运算符（**=）

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

let b = 4;
b **= 3;
// 等同于 b = b * b * b;

链判断运算符

编程实务中，如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。比如，读取message.body.user.firstName这个属性，安全的写法是写成下面这样

xxxxxxxxxx
// 错误的写法
const  firstName = message.body.user.firstName || 'default';

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

这样的层层判断非常麻烦，因此 ES2020引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法

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

Null 判断运算符

读取参数的时候，如果某个参数的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

xxxxxxxxxx
function add(x,y){
    x = x || 100;
    y = y || 100;
    console.log(x+y);
}

add(0,0); // 200

上面的三行代码都通过||运算符指定默认值，但是这样写是错的。开发者的原意是，只要属性的值为null或undefined，默认值就会生效，但是属性的值如果为空字符串或false或0，默认值也会生效

为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

xxxxxxxxxx
function add(x,y){
    x = x ?? 100;
    y = y ?? 100;
    console.log(x+y);
}
add(0,0);

逻辑赋值运算符

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

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

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

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

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

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

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

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

实时效果反馈

1. 下列代码运算结果是多少：

xxxxxxxxxx
function add(x,y){
    x = x ?? 100;
    y = y || 100;
    console.log(x+y);
}
add(0,0);

A 0

B 100

C 200

D 报错

答案

1=>B