ES9 中的可选链操作符，处理嵌套对象属性的好帮手
在前端开发中，经常遇到需要访问嵌套对象的属性，但往往可能会因为对象属性不存在而报错，尤其是当对象复杂嵌套时，代码错误能够产生巨大的影响。
为了解决这个问题，ES9 提供了一个新的操作符：可选链操作符（Optional Chaining Operator），该操作符可以简单、安全地访问深嵌套、有可能不存在的对象属性，可以说是处理对象模型时编写高效、直观代码的重要工具之一。
可选链操作符的使用
可选链操作符的语法形式是一个问号后跟一个句点，例如：
const value = obj?.prop;
这里的 obj 是我们要访问的对象，而 prop 是我们要访问的对象属性。问号表示对象 obj 可能为空，但如果存在，我们就可以访问它的 prop 属性。
如果我们要访问嵌套的属性，我们只需简单地将这个问号句点串联在一起：
const value = obj?.prop1?.prop2?.prop3;
这里的 obj 是我们要访问的对象，而 prop1、prop2、prop3 是我们要访问的对象属性， 问号表示每一层的 prop 属性都有可能为空，但如果存在，我们就可以访问它。
对于数组对象，我们同样可以使用可选链操作符来处理嵌套数组的情况，例如：
const value = arr?.[0]?.[1];
这里的 arr 是我们要访问的数组对象，[0] 表示数组中的第一个元素，而 [1] 表示第一个元素中的第二个元素，问号表示每一层的数组元素都有可能不存在，但如果存在，我们就可以访问它。
可选链操作符的指导意义
可选链操作符的出现，使得开发者们在访问深嵌套对象属性时，无需再使用冗长的判断语句，不仅减少了代码的冗余性、提高了代码的可读性，而且也降低了代码出错的风险。
例如，在没有可选链操作符的情况下，我们需要写下如下代码：
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
const value = obj.prop1.prop2.prop3;
} else {
// Handle error
}这种做法非常繁琐冗长，而且存在严重的错误风险，如果我们有很多这样的代码，那么维护的成本将会非常高。但如果我们使用可选链操作符的话，代码就变得十分简单：
const value = obj?.prop1?.prop2?.prop3;
这段代码的作用同第一段代码相同，但更加简化，更容易维护。同时也处理了 obj.prop1.prop2.prop3 中任何一段属性缺失的情况。
可选链操作符在 React 中的应用
在 React 中，我们常常需要处理一个嵌套的 props 对象，该对象可能存在，也可能不存在，而且嵌套层次可能非常深。这时候，可选链操作符可以为我们提供极大的方便。
例如，在一个 React 组件中，我们需要使用 props 中的 user 对象中的 name 属性，但我们不确定 props 或者 user 是否存在。使用可选链操作符，代码可以简单地这样写：
function User({ user }) {
return (
<div>
<p>Name: {user?.name}</p>
</div>
);
}此时，如果 user 属性不存在，那么 user?.name 就会返回 undefined 而不是引发一个错误。
总结
可选链操作符是 ES9 提供的一个新操作符，它使得 JavaScript 开发人员能够更加简单、直观地访问嵌套的对象属性。
作为一种新的编程方式，可选链操作符不仅减少了代码的冗余度、提高了代码的可读性，而且还能关注应用程序的稳定性。同时，它也为我们提供了新的工具和技术，以支持更快地开发性能优化代码，加快开发人员的开发流程。
让我们在将来的代码中使用可选链接操作符并尝试提高我们的产品质量和代码的可维护性。
示例代码：
-- -------------------- ---- -------
----- --- - -
------ -
------ -
------ -------
-
-
--
----- ----- - -------------------------
------------------- -- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66490c93d3423812e47cc37e