在前端开发中，我们经常需要处理各种数据，比如从异步请求中获取的返回值，或者是后端接口返回的数据。但是在处理数据时，我们经常会遇到各种兼容性问题，尤其是在处理 undefined 或者空值的时候。
在 ES11 中，新增了两个新的操作符：Optional Chaining（可选链操作符）和 Nullish Coalescing（空位合并操作符），这两个操作符可以为我们解决一些兼容性问题，并且还能简化代码，提高开发效率。
Optional Chaining
Optional Chaining（可选链操作符）的作用是在对象属性的调用链中，当链条上某个属性不存在时，直接返回 undefined，而不是像传统的访问属性方式那样抛出错误。这个操作符使用问号（?）表示。
示例
假设我们有以下数据：
-- -------------------- ---- -------
----- ---- - -
----- -
----- ------
---- ---
---- -
------ --------- -----------
----------- -- -------
--
--
--传统的对象属性访问方式：
console.log(data.user.job.title); // 'Frontend Developer' console.log(data.user.job.description); // TypeError: Cannot read property 'description' of undefined
上面的代码中，我们通过 data.user.job.title 访问 job 对象的 title 属性，并得到了正确的结果。但是当我们访问 job 对象的 description 属性时，由于该属性不存在，会抛出 TypeError 的异常。
现在我们可以使用 Optional Chaining 操作符来解决这个问题：
console.log(data.user.job?.title); // 'Frontend Developer' console.log(data.user.job?.description); // undefined
在这个例子中，我们使用了 Optional Chaining 操作符 ?. 来访问 job 对象的 title 和 description 属性。当 title 存在时，返回正确的结果；当 description 不存在时，返回 undefined，不会抛出异常。
嵌套使用 Optional Chaining
在实际开发中，我们经常需要访问一个对象的深层嵌套属性。这时候就可以使用多个 Optional Chaining 一起使用。
console.log(data?.user?.job?.title); // 'Frontend Developer' console.log(data?.user?.job?.description); // undefined
Nullish Coalescing
Nullish Coalescing（空位合并操作符）的作用是在值为 null 或 undefined 时，返回一个默认值。这个操作符使用两个问号（??）表示。
示例
假设我们有以下数据：
const name = ''; const jobTitle = null; console.log(name || 'Anonymous'); // 'Anonymous' console.log(jobTitle || 'No job'); // 'No job'
在这个例子中，我们使用了逻辑或操作符 ||，当 name 为空字符串时返回 'Anonymous'，当 jobTitle 为 null 时返回 'No job'。
但是还有一种情况是，如果 name 或 jobTitle 的值为 0 或者 false，我们希望返回的结果仍然为其本身。这时候就可以使用 Nullish Coalescing 操作符。
console.log(name ?? 'Anonymous'); // '' console.log(jobTitle ?? 'No job'); // 'No job'
在这个例子中，我们使用了 Nullish Coalescing 操作符 ??，当 name 为空字符串时返回空字符串本身，当 jobTitle 为 null 时返回 'No job'。
深层嵌套对象中的使用
Nullish Coalescing 操作符可以在深层嵌套对象中的使用。
-- -------------------- ---- -------
----- ---- - -
----- -
----- ---
---- ---
---- -
------ -----
----------- -- -------
--
--
--
-------------------------- -- ------------- -- --
------------------------------- -- --- ------ -- --- ----兼容性问题
由于 Optional Chaining 和 Nullish Coalescing 是 ES11 中新增的操作符，并不是所有浏览器都支持。如果我们在项目中使用这两个操作符，就会遇到一些兼容性问题。
兼容性处理方案
为了解决兼容性问题，我们可以使用 babel 和 @babel/plugin-proposal-optional-chaining 插件和 @babel/plugin-proposal-nullish-coalescing-operator 插件。这两个插件可以将 ES11 的语法转换成 ES5 或者 ES6 可以执行的代码。
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator
在 babel 配置文件（babel.config.js 或者 .babelrc）中配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
-------- -
------- -----
-------- -----
------- -------
----- -----
--- -----
--
--
--
--
-------- -
-------------------------------------------
-----------------------------------------------------
--
--配置完成之后，就可以使用 Optional Chaining 和 Nullish Coalescing 这两个操作符了。
总结
Optional Chaining 和 Nullish Coalescing 是 ES11 中新增的两个操作符，可以为我们解决一些兼容性问题，并且能够简化代码，提高开发效率。在实际开发中，我们可以灵活运用这两个操作符，兼容更多浏览器，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba4ba9add4f0e0ff2d4083