Babel7 如何在项目中使用 Optional Chaining 和 Nullish Coalescing 语法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到需要处理空值或者未定义的情况，而在 JavaScript 中，我们通常使用 if 语句或者三目运算符来判断变量是否为空，这种方式虽然可以解决问题，但是代码显得臃肿而且可读性不高。为了解决这个问题，ECMAScript 提出了 Optional Chaining 和 Nullish Coalescing 语法，它们可以让我们更方便地处理空值和未定义的情况，同时也可以让代码更加简洁易读。

在本文中，我们将介绍如何在项目中使用 Babel7 来使用 Optional Chaining 和 Nullish Coalescing 语法。

什么是 Optional Chaining 和 Nullish Coalescing

Optional Chaining 和 Nullish Coalescing 是 ECMAScript 2020 中的两个新特性，它们可以让我们更方便地处理空值和未定义的情况。

Optional Chaining：可选链操作符 ?. 可以让我们更方便地访问对象的属性，即使这个属性不存在或者为 undefined。
Nullish Coalescing：空值合并操作符 ?? 可以让我们更方便地处理空值或者未定义的情况，它会返回第一个非空的值或者默认值。

如何在项目中使用 Optional Chaining 和 Nullish Coalescing

在使用 Optional Chaining 和 Nullish Coalescing 之前，我们需要使用 Babel7 来将这些语法转换成浏览器可以识别的 JavaScript 代码。下面是使用 Babel7 配置文件来转换 Optional Chaining 和 Nullish Coalescing 的示例：

// javascriptcn.com 代码示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

上面的配置文件中，我们使用了 @babel/preset-env 来指定代码需要支持的浏览器版本，同时使用了 @babel/plugin-proposal-optional-chaining 和 @babel/plugin-proposal-nullish-coalescing-operator 来启用 Optional Chaining 和 Nullish Coalescing 语法。

在配置文件中启用插件之后，我们就可以在代码中使用 Optional Chaining 和 Nullish Coalescing 语法了。下面是一个示例代码：

const person = {
  name: 'Tom',
  age: 18
};

const job = person.job?.title ?? 'Unknown';

console.log(job); // 'Unknown'

在上面的示例代码中，我们使用了 Optional Chaining 和 Nullish Coalescing 语法来处理 person.job 为空的情况。如果 person.job 存在，那么会返回 person.job.title 的值，否则会返回 'Unknown'。

总结

在本文中，我们介绍了如何在项目中使用 Babel7 来使用 Optional Chaining 和 Nullish Coalescing 语法。这两个语法可以让我们更方便地处理空值和未定义的情况，让代码更加简洁易读。如果你还没有使用 Optional Chaining 和 Nullish Coalescing 语法，那么现在就可以尝试一下了。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65826d97d2f5e1655dd8c095