JavaScript: Optional chaining

译自 Marin Radman : JavaScript optional chaining

Optional chaining 是一个受许多开发人员欢迎的提议,已经被转移到第3阶段(stage 3),这意味着它是添加到ECMAScript标准的候选者。一旦它到达第4阶段(stage 4),它将被添加到下一次迭代的等候名单中。

嵌套属性 (Nested properties)

JavaScript的灵活性有时是有代价的,因为我们的对象没有严格定义的结构。当我们使用某些API时,我们经常会拿到缺少期望属性的对象,甚至整个对象都是null。因此,如果我们的某个对象没有所需的属性,并且我们尝试访问它,则会得到熟悉的错误:

const user = {
  address: {
    // city: {
    //   name: "London",
    //   code: 20
    // }
  },
  firstName: "Jane",
  lastName: "Doe",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

const cityCode = user.address.city.code;
// Uncaught TypeError: Cannot read property code of undefined

变通方法

  • 我们会使用以下解决方法来检查属性链中是否存在某个成员

const cityCode1 = user.address && user.address.city && user.address.city.code;

const cityCode2 = (((user || {}).address || {}).city || {}).code;

try {
  const cityCode3 = user.address.city.code;
} catch (e) {
}
  • 或者使用一些像Lodash这样受欢迎的函数库:

import _ from "lodash";

_.get(cityCode, "user.address.city.code");
  • 或是Ramda:

import R from "ramda";

R.path(["user", "address", "city", "code"], cityCode);

Optional chaining

这种场景正是 optional chaining 操作符 ?. 出场的时候,基本上会检查它左侧的任何内容。如果值为 null undefined ,它会短路并返回 undefined ,否则会继续求值。

这允许我们安全地引用深层嵌套的对象属性,即使它们并不存在。我们就将这可选性检查一直向下链接直到我们想要使用的属性:

const user = {
  address: {
    city: {
      name: "London"
      //code: 20
    }
  },
  firstName: "Jane",
  lastName: "Doe",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

user?.address?.city?.code; // undefined

使用中括号表示法,我们可以引用动态属性:

let prop = "address";

user?.[prop]?.city?.name; // “London”

甚至可以调用可能不存在的函数:

user?.getFullName?.(); // "Jane Doe"

访问数组中的项目:

const arr = ["Jane", "Mark", "Joan"];

const secondItem = arr?.item?.[1]; // "Mark"

删除属性:

delete user?.address?.city?.code;

Babel插件

这个功能在C#,Groovy,Swift等许多语言中都存在已久,在不久的将来终于要来到JavaScript了。

如果您现在就想开始使用它,Babel也为我们提供了相应插件!

$ npm install --save-dev @babel/plugin-proposal-optional-chaining

然后将其添加到.babelrc配置文件中:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章