如何使用 ECMAScript 2021 中的 Optional Chaining 进行条件判断
在前端开发过程中，我们经常需要进行条件判断，而传统的判断语句显得繁琐且不够简洁。幸运的是，在 ECMAScript 2021 中引入了 Optional Chaining 这个新特性，可以更加便捷地进行条件判断。本文将为大家介绍 Optional Chaining 的用法，并以详细的示例代码来解析该特性的实现方式。
Optional Chaining 的概念
Optional Chaining，顾名思义，是一种可选的链式语法。它可以简化代码中的条件判断，避免代码中的重复性工作。通常情况下，我们都需要通过 if 语句来检查对象中是否存在某个属性。例如，我们要判断一个对象的属性 a 是否存在：
if (obj && obj.a) {
// Do something with obj.a
}以上代码需要增加 obj 与 obj.a 的判断，判断是否存在，造成代码量过大、多余的问题。
在 ECMAScript 2021 中，我们可以使用可选链式语法，通过安全的方式调用对象的属性，即使该属性不存在，也不会导致代码出现错误。示例如下：
if (obj?.a) {
// Do something with obj.a
}如果 obj 对象不存在 a 这个属性，则代码仅仅只是不去“做一些操作”的处理而已。
Optional Chaining 的使用
在实际开发中，Optional Chaining 的使用很多时候是配合箭头函数使用的，这里先简单介绍一下箭头函数（Arrow Function）。
箭头函数是 ES6 中一种简写函数的方式，它简写了函数声明的方式，同时还有自己独特的特性，比如不需要绑定 this、更加简短等。
这个，我们用箭头函数来特展示Optional Chaining的用法，需要理解一下 Demo 中的 transformData 函数原型，它一般的存在于一个上下文。
const transformData = (data) => {
// 从 demo-01.js 提供的数据结构中提取需要的字段（不能破坏原始数据结构）
const name = data?.name ?? 'Unknown'
const age = data?.age ?? 18
const gender = data?.isMan ?? true
// 操作省略
return { name, age, gender }
}ES2021 的 Optional Chain 实现了简洁的取值方式，借助于 ?. 操作符，不但可选的属性可以被取值,同时更深层次的链会被保护。例如：
-- -------------------- ---- -------
--- --- - -
------- -
----- -----
---- --
-
-
---------------------------- -- ----
----------------------------- -- --
--------------------------------------- -- ---------当 obj.person 或者 obj 不存在时，obj?.person?.age 和 obj?.person?.address?.country 都不会抛出 TypeError。
Optional Chaining 解决了什么问题
以上代码都有一个问题，如果在提取这些数据时，当前数据值为 null 或者 undefined 的时候，对于当前值的取值及子取值，就会产生异常及错误。Optional Chaining 此时就会帮我们解决这个问题。
实际应用
其实我们在项目中，很多时候都可以使用 Optional Chaining，最常用的是在 JSON 数据的处理上，比如从后端 API 返回的用户信息。以 transformData 函数为例，来模拟一个用户信息的 JSON 数据：
-- -------------------- ---- -------
-
------- -----
------ ---
---------- -
----------- ------
------- ------
----------- -
----------- ---------
------------ ---------
-
--
--------------- -----
---------- --
-了解了 Optional Chaining 的实现方式后，我们可以使用 Optional Chaining 为默认值提供更好的解决方案：
-- -------------------- ---- ------- ----- ------------- - ------ -- - -- ------------------------- ----- ---- - ---------- -- --------- ----- --- - --------- -- -- ----- ------ - ------------ -- ---- ----- ----- - ----------------------------- -- ------- ----- -------- - ----------------------- -- ----- ----- ---- - ------------------- -- ----- ----- -------- - --------------------------------- -- - ----- --------- - ---------------------------------- -- - ----- ------- - --------------------- -- -- ------ ------ - ----- ---- ------- ------ --------- ----- --------- ---------- ------- - - ----- -------- - ------------------- ---------------------
这里我们为 phone 提供了一个默认值，因为 phoneNumbers 设置为了 null，所以就算不给默认值，第二次尝试确定值就会报 error: data.phoneNumbers[0] is undefined。
总结
正是依靠 ECMAScript 2021 中新增的 Optional Chaining 特性，使我们更方便的处理对象的属性鉴定及其子属性的取值，对于多方面业务场景都提供了一种更加优美的代码处理方式。虽然目前还有许多浏览器没有完全实现此特性，但可以通过 TypeScript 等高级语言转义为相似的语法来实现。
Optional Chaining 举了一个反例：数据驱动（data-driven）应用和组件，通常都喜欢深入嵌套, 随着更“扯远”的组件导航，不用 Chain 是很难进行数据的操作和筛选的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c09a9083d39b48814e6c03