ES2020 - 逻辑分配运算符

发表于:2020-04-27

临睡之前看看 tc39 提案~

ES2020 也就是ES11的新语法, 目前在 Stage3 阶段, 实际上是一个语法糖。

目前包含3个

// NO.1, 如果 a 为 falsy , 把 b 赋值给 a
a ||= b

// NO.2, 如果 a 和 b 都为 truthy, 把 b 赋值给 a
a &&= b

// NO.3,如果 a 不是 null、undefined,则把b 赋值给 a
a ??= b

动机

Ruby 的启发, 目前 js 已经有十二个数学赋值运算符 查看MDN , 但是对于经常使用的逻辑运算符则没有。

查看如下示例:

if (!a) {
  a = 'hello';
}

上述例子如果 afalsy, 把 a 赋值 hello,有了新的语法会变得更简单:

a ||= 'hello';

还有比较常用的用于操作DOM

document.getElementById('input').value ||= 'default';

// 等价
if (!document.getElementById('input').value) {
  document.getElementById('input').value = 'content';
}

编译结果

a ||= b

var a = 'foo';
var b = 'bar';

a ||= b

实际编译为

var a = 'foo';
var b = 'bar';
a || (a = b);

a &&= b

var a = 'foo';
var b = 'bar';

a &&= b

实际编译为

var a = 'foo';
var b = 'bar';
a && (a = b);

a ??= b

var a = 'foo';
var b = 'bar';

a ??= b

实际编译为

var _a;

var a = 'foo';
var b = 'bar';
(_a = a) !== null && _a !== void 0 ? _a : a = b;

最后

一般在 Stage3 后,4-5个月后便可以 finished , 目前不必等正式发布, Babel 已经支持,在项目中用完全没问题,现在用现在爽,一直用一直爽!!!

JavaScript