在日常前端开发中，经常需要进行数据的操作和访问。然而，当访问的对象中含有未定义的属性或方法时，就会导致代码出现错误。ES10 中引入了 Optional chaining 运算符，可以很好地解决这个问题，使得代码更加优美、简洁。
Optional chaining 运算符
Optional chaining 运算符 ?. 的作用是在访问对象属性或方法时，判断对象是否为 null 或 undefined，如果是，就不再执行后面的访问操作，直接返回 undefined，而不会抛出错误。
下面是一个使用 Optional chaining 的示例代码：
-- -------------------- ---- -------
----- -------- - -
----- ------
---- ---
-------- -
----- ----------
-------- -------
-
-
----- ------- - -------------------------
-------------------- -- -------
----- ----- - ----------------------
------------------ -- ---------可以看到，在访问 userInfo 对象的 address 属性时，使用了 Optional chaining 运算符，如果 address 属性不存在，就返回 undefined，不会导致代码错误。
使用 Optional chaining 改进代码
使用 Optional chaining 运算符可以改进一些常见的代码模式，使得代码更加简洁、易于读写。
检查对象是否存在
在访问对象属性或方法时，需要先检查对象是否存在，这是一种常见的代码模式。使用 Optional chaining 运算符可以简化这个模式，如下所示：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- -- - -- ----- -- ------------ -- ------------------ - ------------------------------ - --------------------------------
可以看到，在访问 user 对象的 address 属性和 city 属性时，使用了 Optional chaining 运算符，如果对象不存在，则不继续访问后续属性，直接返回 undefined。
链式调用方法
在进行方法调用时，需要先检查对象是否存在，然后再调用方法，这也是一种常见的代码模式。使用 Optional chaining 运算符可以简化这个模式，如下所示：
-- -------------------- ---- -------
----- ---- - -
--------- -
------ -
----- ------
---- --
-
-
-
-- ----- -- ------------ -- --------------- -
--------------------------------
-
----------------------------------可以看到，在调用 data 对象的 getData 方法时，使用了 Optional chaining 运算符，如果对象不存在，则不继续访问后续方法，直接返回 undefined。
注意事项
在使用 Optional chaining 运算符时，需要注意以下事项：
?.运算符优先级较低，可以加括号以提高优先级；?.运算符不能用于属性赋值操作；?.运算符不能与delete运算符一起使用。
总结
Optional chaining 运算符是 ES10 的一个新特性，可以很好地解决对象属性和方法不存在时的错误问题，使得代码更加优美、简洁。在实际开发中，使用 Optional chaining 运算符可以改进一些常见的代码模式，让代码更加易于读写。然而，在使用过程中也需要注意一些注意事项。建议开发者掌握 Optional chaining 运算符的使用方法，以提高开发效率、写出更好的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a68301add4f0e0fff4d3b1