随着 JavaScript 语言的发展，各种新特性层出不穷。其中，Optional Chaining 操作符是 ES12 中新增的一种语法，默认支持运行时检查对象是否存在，避免了对未定义属性的访问出现的代码异常问题。本文将介绍 Optional Chaining 操作符的语法规则、使用方法和示例代码，通过深入分析，帮助读者深入理解其使用场景和作用。
什么是 Optional Chaining 操作符
Optional Chaining 操作符（?）用于防止出现对象的undefined值导致的程序崩溃，同时也方便重构代码。Optional Chaining 的意思是“可选的链接”或“条件链接”，意思是如果对象不是null或undefined，就会返回属性的值。如果为null或undefined，则会返回undefined值，不会抛出异常。
在 JavaScript 中，通常使用点运算符（.）或数组下标运算符（[]）来访问对象或数组。但如果要访问的属性或元素不存在，则会导致异常。这是因为 JavaScript 在执行访问操作时，会首先尝试将访问对象转化为对象，如果对象不存在，则会抛出异常。而 Optional Chaining 就是为了避免这种异常情况的发生。
如何使用 Optional Chaining 操作符
使用 Optional Chaining 操作符时，需要在要访问的对象或数组的属性或元素后面加上问号“？”。这样，当对象或数组不存在时，就不会抛出异常，而是返回undefined值。
下面是使用 Optional Chaining 操作符的示例代码:
-- -------------------- ---- ------- --- -------- - - ----- ----- ----------- - ----- ------ ------- - ----- ----- ------ ------ - - -- --- ----------- - ------------------------------------ ------------------------- -- ------ --- -------------- - --------------------------- ---------------------------- -- ----- --- ------------ - --------------- -------------------------- -- ---- --- -------- - ------------------- ---------------------- -- ---------展开代码
在上面的示例代码中，我们使用了 Optional Chaining 操作符（?）来避免访问不存在的属性或元素，从而避免了异常的发生，并返回了正确的值。
可以看出，Optional Chaining 操作符可以使用多层嵌套来保证所访问的属性或元素的存在，这样我们的代码就更加简洁、可读、易于维护。
使用场景和作用
Optional Chaining 操作符在某些场景下非常有用。下面是一些常见的使用场景：
1. 访问深层次嵌套的属性
在一些对象中，属性之间存在深层次嵌套，如果不使用 Optional Chaining，就需要使用多个点运算符或数组下标运算符链接多个属性或元素，这样代码就会显得臃肿和不易于维护。
使用 Optional Chaining 操作符时，只需要在要访问的属性或元素后面加上问号“？”即可，就能够较为方便地访问深层次嵌套的属性或元素，从而更加简洁、可读、易于维护。
2. 避免代码异常
在传统的访问对象或数组属性或元素时，如果要访问的属性或元素不存在，就会抛出异常，导致程序崩溃。
而在使用 Optional Chaining 操作符时，如果要访问的对象或数组不存在，就会返回 undefined 值，不会抛出异常，从而避免了程序崩溃。
3. 重构代码
在重构代码时，经常需要修改访问对象或数组的方式，例如去掉某个属性的访问，或者增加一些属性的访问。
使用 Optional Chaining 操作符可以方便地重构代码。只需要增加或删除问号“？”即可，而不需要修改原来的代码。
4. 方便地使用默认值
在 JavaScript 中，有些情况下需要使用默认值，例如函数参数的默认值、属性的默认值等。使用 Optional Chaining 操作符可以更方便地使用默认值，避免了判断字符串或对象是否为 null 或 undefined 的繁琐代码。
下面是一个示例代码：
let employee = null; let name = employee?.name ?? '无名氏'; console.log(name); // '无名氏'
在上面的示例代码中，由于 employee 为空值，使用 Optional Chaining 操作符访问了其 name 属性后返回的是 undefined 值，所以使用 ?? 运算符设置了默认值，即 '无名氏'。
总结
本文介绍了 ES12 中新增的 Optional Chaining 操作符及其使用方法、示例代码和作用。从使用 Optional Chaining 操作符访问深层次嵌套的属性、避免代码异常、重构代码、方便地使用默认值等角度，深入介绍了 Optional Chaining 操作符的优势和使用场景，希望读者通过阅读本文，能够更好地理解 Optional Chaining 操作符的使用方法和作用，提高 JavaScript 编程能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a1395968c7c53b09d263b
