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这样的实用程序库对此有一个解决方案，它们提供了一个属性的 getter。如果属性不存在，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），它也会返回默认值。我们必须记住哪些值会转换为假值，哪些不会。转换假值很容易出错，这就是空值合并运算符可以提供帮助的原因。

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来使用这些语法。