ES11中的可选链操作符（Optional Chaining Operator）是一项非常实用的功能，它能够简化前端代码的编写过程，同时有效地避免错误的出现，提高代码的可读性和可维护性。
什么是可选链操作符？
在传统的编程语言中，使用.操作符可以访问一个对象的属性或方法，例如：obj.property，但是如果该对象不存在该属性或方法，则会抛出一个异常错误。为了解决这个问题，ES11中引入了可选链操作符，它允许我们在访问一个对象的属性或方法时，检查该对象是否为null或undefined，从而防止异常错误的发生。
如何使用可选链操作符？
可选链操作符使用?和.进行组合，例如：obj?.property，如果obj为null或undefined，则返回undefined。
示例代码：
// 定义一个对象 const obj = { name: 'Peter', age: 28, job: { title: 'Front-end developer', company: { name: 'ABC Corporation', location: { city: 'New York', state: 'NY' } } } };
// 使用可选链操作符访问嵌套的属性 console.log(obj?.name); // 输出：'Peter' console.log(obj?.job?.title); // 输出：'Front-end developer' console.log(obj?.job?.company?.name); // 输出：'ABC Corporation' console.log(obj?.job?.company?.location?.city); // 输出：'New York' console.log(obj?.hobby); // 输出：undefined
这里可以看到，在访问一个嵌套的属性或方法时，通过可选链操作符可以确保所有的父对象都存在或非null/undefined，避免了异常错误的出现。
需要注意的是，可选链操作符仅在最新版本的浏览器中支持，为了保证兼容性，我们可以使用babel将代码转换成ES5或ES6的语法。
结论
可选链操作符是一项非常实用的功能，通过使用它，可以有效地避免异常错误的发生，提高代码的可读性和可维护性。在日常的前端开发中，我们应该合理地使用这个技术，优化代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672da015eedcc8a97c85781f