前言

在现在 Object 属性链的调用中，很容易因使用不当导致某个属性不存在而抛出 Cannot read property 'xxx' of undefined 的错误。

现在已经有一个草案 Optional Chaining 可以很方便的解决这个问题。

例子

访问深层次嵌套的属性

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

调用层次嵌套的函数

const obj = {
  foo: {
    bar: {
      baz() {
        return 42;
      },
    },
  },
};

const baz = obj?.foo?.bar?.baz(); // 42

const safe = obj?.qux?.baz(); // undefined
const safe2 = obj?.foo.bar.qux?.(); // undefined
const safe3 = obj?.xxx?.yyy?.[0]; // undefined

const willThrow = obj?.foo.bar.qux(); // Error: not a function

顶层函数

function test() {
  return 42;
}

test?.(); // 42
exists?.(); // undefined

类的写法同方法一样。

用法

安装插件

yarn add @babel/plugin-proposal-optional-chaining -D

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
发布时间：2019-12-31
目录