近些年在前端领域，JavaScript 十分流行，每年都会有新的技术和特性被添加到 ECMA Script 中。ECMA Script 10（简称 ES10 ）其中一个重要的更新特性是 Optional Chaining 操作符，旨在简化代码和使用避免错误。
Optional Chaining 操作符是一种新的数据访问方式，可轻松处理多层嵌套对象和数组的情况，使用 Optional Chaining 运算符可以检查对象是否存在，如果存在，则可以继续进行下一个属性的访问操作，如果不存在，则不执行任何操作并返回 undefined。
Optional Chaining 的使用场景
在实际开发中，经常会遇到多层嵌套的数据结构。比如：
-- -------------------- ---- ------- ----- ---- - - -------- - ----- ------- ---- -- -- ------------ - -------- ----------- ----------- ------------- - -展开代码
在上面的代码中，要访问 user 对象中的 name 属性，一般我们可能需要使用如下代码：
console.log(user && user.profile && user.profile.name)
在这种情况下，就可以使用 optional chaining 运算符，简化代码，这是一种更为简洁的方式:
console.log(user?.profile?.name)
其中 ?. 是 Optional Chaining 运算符，问号可以防止错误和代码爆炸，优雅而简洁，避免了许多代码中的语法繁琐性。
除了对象之外，这种操作符还适用于数组访问，如：
const arr = [1,2,3]; console.log(arr?.[0]);
如果数组 arr 不存在，则返回 undefined，否则返回数组中的第一个元素。
Optional Chaining 的优势
- 更具可读性和美观性，解决了深度嵌套对象的语法繁琐性问题。
- 在深入访问对象或者数组中嵌套的属性或元素时增加了可靠性和代码的健壮性。
- 在处理错误时提供了更好的控制，防止运行时引起异常。
为什么要使用 Optional Chaining
在传统的数据访问方式中，当访问对象的属性时，如果对象不存在或者对象的属性不存在，就会抛出异常，代码会停止运行。针对这种情况，我们要一遍遍的检查该对象是否存在，然后再进行操作。这往往会导致代码异常冗长，使代码的可读性大大降低。
有了 Optional Chaining 运算符，我们只需简单的判断属性是否存在，然后在运行的时候自动跳过不存在的部分，这大大减少了代码的冗长，并使代码更易阅读和维护。
Optional Chaining 运算符的注意事项
?.运算符不能在函数中使用，它只适用于属性的访问。?.运算符不能在赋值操作的左侧使用。- Optional Chaining 操作符不能用于旧版本的浏览器。
善用 Optional Chaining 运算符的示例代码
-- -------------------- ---- ------- --- ---- - - --- -- -------- - ----- ------- ---- -- -- ------------ - -------- ----------- ----------- ------------- - -- --- -------- - -------------------- ---------------------- -- ------ --- ---------- - ---------------------- ------------------------ -- --------- --- --------- - -------------------------------- ----------------------- -- --------- --- --------- - ------------ ----------------------- -- --------- --- ------- - ------------------ -- --- --------------------- -- --- ------- --- --------- -- -- ------ -----展开代码
小结
Optional Chaining 运算符为我们提供了一种更为简洁，可读性更高的方式来处理对象和数组中多层级属性的访问，它还可以保护代码，提高代码的健壮性。因此，当你将来写这种代码的时候，可以使用 Optional Chaining 运算符以更准确和自信地访问数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bcf332a231b2b7edee5960
