在 JavaScript 编程中，经常会遇到不确定的属性或方法，这时候如果直接访问这些属性或方法可能会导致 TypeError，打乱程序的流程。为了解决这个问题，ES2020（ES10）中引入了 Optional Chaining 运算符，让访问不确定的属性或方法更为方便和安全。本文将介绍 Optional Chaining 的语法和使用方法，并给出相应的示例代码。
Optional Chaining 的语法
Optional Chaining 运算符是一个问号（?），可以在属性访问前放置，表示当前属性可选。具体语法如下所示：
---------------- ----------------
上述语法中，object 是待访问的对象，property 是对象的属性，method() 是对象的方法。在此基础上，添加了一个问号，表示当前属性或方法是可选的。如果 object 对象不存在或者 property 或 method() 不存在，那么访问属性或者执行方法都会返回 undefined，而不会抛出 TypeError。
使用 Optional Chaining 解决 TypeError
现在我们来看一个实际的代码例子，假设有一个对象 person，其中包含一个属性 name，还包含一个 address 对象，address 对象中包含一个 city 属性，但是有时候 address 对象本身可能是 undefined，如下所示：
----- ------ - -
----- ------
-------- -
----- ---------
-
--
--------------------------------- -- ---------
----- ------- - -
----- -----
--
---------------------------------- -- ---------- ------ ---- -------- ------ -- ---------在上面的代码中，当 person2 中没有 address 属性时，访问 person2.address.city 会抛出 TypeError，可能会导致程序出现故障。使用 Optional Chaining 运算符可以避免这种情况的发生，代码如下所示：
------------------------------------ -- ---------
在上述代码中，我们使用了 Optional Chaining 运算符，当 person2 对象中不存在 address 属性或者 address 对象中不存在 city 属性时，我们直接返回了 undefined，避免了抛出异常。
给出一个更严谨的解决方案
虽然 Optional Chaining 运算符可以解决许多问题，但在某些情况下，我们需要使用其他方式来补救。例如，考虑下面的代码：
----- ------- - -
----------- ---- --------- -
-------------------- ------ -----------
-- ------------ ---------- ------- -
------ --- ------------------ ---------
-
------ ------------------- ---- ----------
-
--
----- ------ - -
----- ------
-------- -
----- ----------
------- -
----- ------------
-
-
--
----- ----------- - --- ------------- ---------
-------------------------------------- -- ---------
--------------------------------------------- -- ------------
---------------------------------------------- -- ---------- ------ ---- -------- ------ -- ---------在上面的代码中，我们使用了一个 handler 对象来监视对象属性的访问，并根据属性的类型返回不同的结果。当对象的某个属性不存在时，我们会抛出 TypeError。现在我们来使用 Optional Chaining 运算符尝试解决这个问题：
-------------------------------------------------
虽然 Optional Chaining 运算符不再抛出 TypeError，但它也没有打印提示信息，导致程序出现了混乱。解决这个问题的方法是，我们需要在 Proxy 对象中使用 Proxy 的递归（recursive）特性，检测到属性不存在时，继续返回一个新的 Proxy 对象。修改后的代码如下所示：
----- -------- - -
----------- ---- --------- -
-------------------- ------ -----------
-- ------------ ---------- ------- -
------ --- ------------------ ---------
-
------ ------------------- ---- ----------
--
----------- ---- -
-- ---- -- ------- -
------ -----
- ---- -
---------------------- ------ --- --------
------ ------
-
-
--
----- ------------ - --- ------------- ----------
-------------------------------------------------- -- ---------注意，我们在 handler2 对象中添加了一个 has() 方法，用于检测对象是否包含某个属性。当属性不存在时，我们打印出一条警告信息。使用这种方式，既避免了 TypeError，又保证程序的正确执行。
总结
Optional Chaining 运算符是 ES2020 中一个非常实用的语法特性，它可以方便地解决 JavaScript 中访问不确定的属性和方法时可能出现的 TypeError。但实际编程中，我们还需要考虑对象的类型和程序的健壮性等问题，不能仅仅依赖语法特性，而忽略程序的正确性和稳定性。我建议大家在开发中,不要被 Optional Chaining 等特性所迷惑，要更加注意对象的类型和程序的健壮性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645daccd3423812e43e92b3