JavaScript引入了可选的链接和空位合并

两个期待已久的运算符正在使用Javascript。它们都处于草稿阶段（第3阶段），并宣布可在Chrome Canary中使用。这意味着我们很快就会在Chrome稳定版和Node.js中看到它们。我记得几年前，Coffeescript是一个崭新的亮点，它具有这两个功能。我可以说值得等待：这两个运算符将在检查属性链和空值时消除冗长的代码块或库的使用。

可选链接（建议）

较长的属性访问链可能容易出错。

const name = movie.actor.name.first;

尽管上面的示例是可读的，但是访问的任何属性都可以具有 null 要么 undefined 值。如果发生这种情况，我们将收到错误消息： Uncaught TypeError: Cannot read property 'name' of undefined。我们可以通过创建一个 if 访问最深属性之前​​的语句。

let name;

if (movie && movie.actor && movie.actor.name) {
  name = movie.actor.name.first;
}

现在我们没有任何错误，但是代码的可读性降低了。

诸如Lodash的实用程序库为此提供了解决方案，它们提供了属性的获取器。如果该属性不存在，Lodash返回 undefined。

import { get } from 'lodash';

const name = get(movie, 'actor.name.first');

通过引入可选的链接运算符，该机制将在语言级别可用。

const name = movie?.actor?.name?.first;

它是如何工作的？当Javascript遇到对象不存在的属性访问时，它将返回 undefined 然后停下来。

可选链接还可以用于动态属性访问和方法访问。

const name = movie?.actors?.(0).name?.first;
const name = movie?.getActor?.().name?.first;

空位合并（建议）

访问属性或变量时，还需要默认值。您可以使用一种短路运算符， ||。

const name = movie?.actor?.name?.first || 'Jane Doe';

此解决方案有效，但存在重大缺陷。该表达式从左到右求值，并返回第一个非伪造的值。即使属性设置为假值（''， false， 0），它将返回默认值。我们必须牢记哪些值会转换为false，哪些不会。转换伪造的值容易出错，这就是为什么无效的合并运算符将为我们提供帮助的原因。

const name = movie?.actor?.name?.first ?? 'Jane Doe';

没有运算符，我们也可以用Lodash解决。

import { get } from 'lodash';

const name = get(movie, 'actor.name.first', 'Jane Doe');

仅当左侧的值是时，空合并运算符才返回默认值。 null 要么 undefined。当左侧值为时，它将不返回默认值 0， ''， Nan， 要么 false （虚假值）。

false ?? 'default'; // false
0 ?? 'default';     // 0
'' ?? 'default';    // ''

null ?? 'default';      // 'default'
undefined ?? 'default'; // 'default'

摘要

我希望您和我一样对这些操作员感到兴奋。它们将进一步简化并使这些用例不易出错。在发布之前，我们可以使用Babel或Typescript使语法可用。