ES9 中的 Optional Chaining 操作符现已可用
在编写 JavaScript 代码时，经常遇到需要同时访问对象属性和方法的情况，而这些对象的某些属性或方法可能未被定义。以往我们可能使用繁琐的 if…else 语句来处理这种情况，这样会让代码变得复杂和冗长。在 ES9 中，Optional Chaining 操作符的出现可以更好地解决这个问题。
什么是 Optional Chaining 操作符？
Optional Chaining 操作符，也可以称为 “可选链操作符”，其作用是判断一个对象的属性或方法是否存在，如果存在则返回访问结果；如果不存在则返回 undefined。Optional Chaining 操作符使用 ? 调用对象属性或方法来解决对象不存在的情况。
为什么要使用 Optional Chaining 操作符？
在不使用 Optional Chaining 操作符的情况下，访问某个对象的属性或方法时，如果该对象的属性或方法不存在，JS 将会抛出一个 Uncaught TypeError 错误并停止执行代码。如下所示：
const obj = {
prop1: {
prop2: ‘test’
}
}
// 下面这行代码将会报错
console.log(obj.prop1.prop2.prop3)上述代码中，尝试访问 obj.prop1.prop2.prop3，但是 obj.prop1.prop2 并没有 prop3 这个属性，因此会抛出一个 Uncaught TypeError 错误。
为了避免此类情况发生，我们通常需要使用 if…else 语句或 && 运算符进行判断。例如：
-- -------------------- ---- -------
----- --- - -
------ -
------ ------
-
-
------ -- --------- -- --------------- -- ---------------------- -
----------------------------------
-上面的代码中，我们首先需要判断 obj 是否存在，接着再判断 obj.prop1，然后再判断 obj.prop1.prop2，最后才能访问 obj.prop1.prop2.prop3。这一系列的判断非常繁琐，不仅冗长而且难以维护。
在 ES9 中，Optional Chaining 操作符出现，我们可以更加简单地判断对象属性或方法是否存在，代码也更加简洁易懂，如下所示：
const obj = {
prop1: {
prop2: ‘test’
}
}
console.log(obj?.prop1?.prop2?.prop3)上述代码中，我们添加了 ? 操作符来代替之前的繁琐的判断操作，如果访问到的对象属性或方法不存在，返回 undefined 而不是抛出一个 Uncaught TypeError 错误。
示例代码
下面是一个完整的示例代码，可以让你更好地理解 Optional Chaining 操作符的用法：
-- -------------------- ---- -------
----- -------- - -
----- -------
---- ---
-------- -
----- ----------
--
---- -
------ ----------
------- -----
-------- -
----- -----
-
-
-
-- -- -------- - ------- - ---- --
------------------------------------ -- ----------
-- -- -------- - --- - ------- - ---- --
----------------------------------------- -- -----
-- -- -------- - ------- -----------
------------------------------------------ -- ---------注意：Optional Chaining 操作符是 ES9 中新增的语法，不是所有的浏览器都支持，需要进行兼容性处理。
指导意义
Optional Chaining 操作符的出现可以更好地处理对象属性或方法的判断问题，使代码更加简洁易懂。不仅如此，也可以更好地保证代码的可读性和可维护性。
在 ES9 中，Optional Chaining 操作符应用较为广泛，可以用于访问对象的所有类型，包括数组或函数等。了解 Optional Chaining 操作符的用法，有助于我们在日常开发中更加高效地编写 JavaScript 代码。
结论
本文介绍了 Optional Chaining 操作符的作用、用法以及示例代码。Optional Chaining 操作符是 ES9 中新增的语法，可以更好地处理对象属性或方法的判断问题，使代码更加简洁易懂。使用 Optional Chaining 操作符可以提高代码的可读性和可维护性，也非常适合在日常开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ea6e25f55128102617ad3