在前端开发中，我们经常需要访问对象的属性或方法。在访问对象的属性或方法时，如果对象不存在或属性不存在，我们往往需要进行一些判断，避免出现异常或错误。
在 ES11 中，可选链语法为我们提供了一种简洁、方便、安全的访问对象属性或方法的方式，避免了繁琐的判断和可能的错误。
可选链语法的基本使用
可选链语法使用问号 ? 来表示属性或方法是否存在，如果存在则访问，否则返回 undefined。
访问对象属性
我们可以使用可选链语法来访问对象的属性。
const obj = { a: { b: { c: 1 } } };
console.log(obj.a?.b?.c); // 1
console.log(obj.a?.b?.d); // undefined
console.log(obj.a?.e?.f); // undefined在上面的示例中，我们使用可选链语法访问了对象 obj 中的属性 a、b、c、d、e、f，并分别打印了它们的值。由于属性 a、b、c 存在，因此可以正常访问并得到值；而属性 d、e、f 不存在，因此返回 undefined。
调用对象方法
我们还可以使用可选链语法来调用对象的方法。
const obj = { a: { b: { c: () => 1 } } };
console.log(obj.a?.b?.c?.()); // 1
console.log(obj.a?.b?.d?.()); // undefined
console.log(obj.a?.e?.f?.()); // undefined在上面的示例中，我们使用可选链语法调用了对象 obj 中的方法 c、d、e、f，并分别打印了它们的返回值。由于方法 c 存在，因此可以正常调用并得到返回值；而方法 d、e、f 不存在，因此返回 undefined。
可选链语法的高级用法
除了基本的使用方法外，可选链语法还有一些高级用法，可以更加灵活地应用到实际开发中。
使用可选链语法避免异常
在访问对象属性或方法时，如果对象不存在或属性不存在，往往会抛出异常或错误。使用可选链语法可以避免这种异常或错误的发生。
const obj = null; console.log(obj?.a?.b?.c?.()); // undefined
在上面的示例中，我们尝试访问一个空对象 null 的属性 a、b、c，并尝试调用方法。由于使用了可选链语法，即使对象为空，也不会抛出异常或错误，而是返回 undefined。
使用可选链语法简化代码
在访问对象属性或方法时，如果对象的层级比较深，往往需要进行多次判断。使用可选链语法可以简化这种代码。
-- -------------------- ---- ------- ----- --- - - -- - -- - -- -- -- - - - -- -- ------- ----- ------- - ----------------- --------------------- -- - -- -------- ----- ------- - --- -- ----- -- ------- -- --------- -- ------------ --------------------- -- -
在上面的示例中，我们分别使用了可选链语法和传统的判断方式来访问对象的属性和方法，并分别打印了它们的返回值。使用可选链语法可以更加简洁、清晰地表达代码的意图。
可选链语法的注意事项
在使用可选链语法时，需要注意以下几点。
可选链语法的兼容性
可选链语法是 ES11 中新增的语法，需要使用较新的浏览器或 Node.js 版本才能支持。为了保证兼容性，可以使用 Babel 等工具将代码转换成 ES5 或 ES6 的语法。
可选链语法的局限性
可选链语法只能用于访问对象的属性或方法，不能用于访问变量或函数。如果需要访问变量或函数，仍然需要使用传统的判断方式。
const obj = null;
const func = () => {};
// 无法使用可选链语法
console.log(obj?.a); // undefined
console.log(func?.()); // 抛出异常在上面的示例中，我们尝试使用可选链语法访问变量 obj 和函数 func，并分别打印了它们的值。由于可选链语法只能用于访问对象的属性或方法，因此无法访问变量或函数。
可选链语法的返回值
使用可选链语法访问对象的属性或方法时，如果属性或方法存在，则返回它们的值；否则返回 undefined。需要注意的是，如果属性或方法的返回值本身就是 undefined，则无法区分它是不存在还是返回值本身就是 undefined。
const obj = { a: { b: { c: undefined } } };
console.log(obj.a?.b?.c); // undefined
console.log(obj.a?.b?.d); // undefined在上面的示例中，我们使用可选链语法访问对象 obj 中的属性 a、b、c、d，并分别打印了它们的值。由于属性 a、b、d 不存在，因此返回 undefined；而属性 c 存在，但其值为 undefined，因此也返回 undefined。
总结
可选链语法是 ES11 中新增的语法，为我们提供了一种简洁、方便、安全的访问对象属性或方法的方式。在实际开发中，我们可以灵活运用可选链语法，避免异常和错误，简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c529bd3423812e49cd6de
