ECMAScript 2019 引入了可选链操作符（Null Propagation Operator），这种语法可以使得我们查询嵌套对象时不再需要判断对象是否存在，从而减少代码中的冗余操作。这种语法非常实用，然而在某些浏览器中还没有得到支持，这对前端的开发带来了一些不便，本文将介绍如何在实现浏览器兼容性方面得到帮助。
可选链操作符简介
可选链操作符简写为（?.），它可以让我们在获取一个嵌套对象的属性值时判断该嵌套对象是否存在，如果存在则返回该属性值，如果不存在则返回 undefined。这样可以减少很多冗余代码，代码变得更加简洁易懂。例如：
const person = {
name: 'Bob',
gender: 'male'
}
console.log(person?.gender); // 'male'
console.log(person?.age); // undefined当 person 对象存在 gender 属性时，输出 'male'；当 person 对象不存在 age 属性时，输出 undefined。
可选链操作符的兼容性
尽管可选链操作符非常实用，但是在某些浏览器中还没有得到支持，这对于前端的开发带来了一些不便。目前（2021年4月）只有较新的浏览器（如 Chrome 80、Firefox 74、Safari 13.1、Edge 80）支持该语法，为了更好的兼容性，我们可以使用第三方库或者手动写一些兼容性代码。
使用 Babel 转义可选链操作符
Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 6 及以上版本转化为能够在较老版本浏览器中执行的代码。在使用 Babel 时，可以使用 @babel/plugin-proposal-optional-chaining 插件来支持可选链操作符。具体步骤如下：
- 安装 Babel：
npm install @babel/core --save-dev
- 安装 @babel/plugin-proposal-optional-chaining 插件：
npm install @babel/plugin-proposal-optional-chaining --save-dev
- 配置 Babel，在 babel.config.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
-------- -
----- -----
-------- -----
------- -----
------- -------
--
------------ --------
------- -------
-
-
--
-------- -
------------------------------------------
-
--其中：
- presets 属性表示应用的预设，这里使用了 targets 预设来指定要支持的浏览器和系统环境。
- plugins 属性表示要使用的插件，这里使用了 @babel/plugin-proposal-optional-chaining 插件。
这样，在打包代码时，Babel 会自动将可选链操作符转化为支持的语法。需要注意的是，需要使用 Babel 的开发者，要安装相应的插件（如 @babel/core 和 @babel/preset-env），Babel 的使用还需要配置相应的文件（如 babel.config.js）来指定转译的规则。
手动实现可选链操作符兼容性
当然，我们也可以手动实现可选链操作符的兼容性。这里我们定义一个名为 q 的函数，可以查询嵌套对象中的属性值，如果对象不存在，则返回 undefined。
function q(obj, ...keys) {
return keys.reduce((object, key) => (object != null ? object[key] : undefined), obj);
}使用该函数时，可以这样写：
const person = {
name: 'Bob',
gender: 'male'
}
console.log(q(person, 'gender')); // 'male'
console.log(q(person, 'age')); // undefined这个函数实现了可选链操作符相似的功能，但是需要手写代码，实用性和可读性不如可选链操作符。
使用第三方库
第三方库是一个非常便利的解决方案，例如 Lodash、Underscore 等有很多已经实现了可选链操作符的库，使用这些库可以非常简单的实现兼容性。例如使用 Lodash 库，如下:
-- -------------------- ---- ------- ------ - ---- --------- ----- ------ - - ----- ------ ------- ------ - ------------------------- ----------- -- ------ ------------------------- -------- -- ---------
Lodash 是一个非常常用的 JavaScript 工具库，它包含了许多常用的函数和工具类，使用 Lodash 实现可选链操作符就是通过使用 _.get() 方法实现的。
总结
可选链操作符是 ECMA 系列标准最新的语法之一，它可以使得查询嵌套对象属性值不再需要判断嵌套对象是否存在，提高了代码的简洁性和可读性。尽管该语法还没有得到所有浏览器的支持，但是我们可以使用 Babel 、手动实现、使用第三方库等方式来实现兼容性。由于第三方库等方式其安装和实现基本都可以通过 npm 快速完成，因此我个人推荐使用第三方库的方式实现兼容性。若使用 Babel 的方式，则需要开发者配置规则来进行转义，相信未来我们在浏览器上也能看到更加便捷的实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0c45948841e9894cdf51c