在 JavaScript 的开发中，我们经常会遇到 undefined 错误。这种错误可能是由于代码中使用了访问 null 或 undefined 对象的属性导致的。在过去，我们往往通过检查对象是否为 null 或者 undefined 来避免这种错误的发生。然而，在 ECMAScript 2021 (ES12) 中，一种新的语言特性 Optional Chaining（可选链式调用） 可以使我们更加优雅地解决这个问题。
Optional Chaining 是什么
Optional Chaining 是 ECMAScript 2021 (ES12) 中新增的一种语言特性，用于简化我们在访问嵌套结构对象（即深度嵌套的对象）时的代码量。
我们通过一个简单的示例来说明，假设我们有以下嵌套对象：
-- -------------------- ---- -------
----- -------- - -
----- ------
-------- -
----- ----------
------- ---------- ---------
-------- --------
--
------ -
----- ---------------
--------- ---------------
-
-如果我们需要访问 userData 对象中的某个属性，比如访问 email 的 work 属性，就需要使用到属性访问符（.），例如：
console.log(userData.email.work)
这样的代码在有些情况下会引发错误，如当 email 对象为 null 或 undefined 时，我们如果仍然按照上面的方式访问 work 属性，就会得到一个 undefined 错误。因此我们需要通过检查 email 和 work 是否为 null 或 undefined 来解决这个问题，例如：
if (userData.email && userData.email.work) {
console.log(userData.email.work)
}然而，随着对象结构的嵌套层数增多，这种方式会使我们的代码变得不可读，非常繁琐。
如何使用 Optional Chaining 避免 undefined 错误
Optional Chaining 允许我们通过在访问嵌套对象时，在想要访问的属性后面加上问号（？）来避免 undefined 错误。
以下是使用 Optional Chaining 访问 userData 对象中的 email.work 属性的示例代码：
console.log(userData.email?.work)
这段代码等价于以下的代码：
if (userData.email !== undefined && userData.email !== null) {
console.log(userData.email.work)
}Optional Chaining 内部会自动执行一个判断，如果访问对象不存在，则返回 undefined，如果存在，则正常访问对应属性。因此，我们在访问嵌套的属性时就可以省去繁琐的检查过程，使得代码更加简洁和可读。
如何在实际开发中使用 Optional Chaining
来看一个更具体的例子。
假设我们的应用程序需要从后端 API 获取用户信息。API 返回的数据如下：
const responseData = {
name: 'Tom',
email: {
personal: 'tom@gmail.com'
}
}我们需要将这个 responseData 转换成一个包含用户信息的对象。我们通常的做法是为每一个属性添加一个属性检查来保证转换的正确性，例如以下的代码：
-- -------------------- ---- ------- ----- ---- - - ----- ------------------ ---------- ----------------------- - -- ------------ - ----- --- ---------------- - -- ----------------- - ----- --- ----------------- -
以上代码会检查用户信息是否存在。不过，如果 responseData 对象中的某个属性不存在，或者对象的结构发生了变化，我们的代码就会出现很多错误。
使用 Optional Chaining 可以极大地简化代码，使其更加健壮。下面是使用 Optional Chaining 的代码：
-- -------------------- ---- ------- ----- ---- - - ----- ------------------ ---------- ------------------------ - -- ------------ - ----- --- ---------------- - -- ----------------- - ----- --- ----------------- -
以上代码可以保证当 responseData 对象中 email 属性不存在时，user.workEmail 的值为 undefined，以及 user 对象中的其他属性都必须存在。这样，我们就能够更加优雅地避免 undefined 错误，使代码更加清晰和健壮。
总结
通过本文，我们了解了 ECMAScript 2021 (ES12) 中新增的语言特性 Optional Chaining，并且演示了如何使用该特性避免了 undefined 错误的发生。Optional Chaining 简化了我们代码中访问嵌套结构对象的方式，使我们的代码更加健壮和易于维护。在实际的开发中，我们应该积极使用 Optional Chaining，以此来提升我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e48070f6b2d6eab3ff4db3