JS 可选链的三种形势及好处

JS的一些特性极大地改变了咱们的编码方式。从ES6年开始，对咱们代码影响最大的特性的解 、箭头函数、类和模块系统。

到2019年8月，一个新的可选链提案已经进入第三阶段，这是一个很好的改进。可选链接改变了从深层对象结构访问属性的方式。

来看看这是又是什么骚操作。

问题

由于JS的动态特性，对象可以具有多层不同的嵌套对象结构。

通常，当咱们处理以下这些对象时：

• 获取远程JSON数据
• 使用配置对象
• 有可选属性

虽然JS为对象支持不同层次数据结构，但是在访问此类对象的属性时，复杂性也随着增加。

1.bigObject可以在运行时拥有不同的属性集

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 嵌套版本 const bigObject = {   // ...   prop1: {     //...     prop2: {       // ...       value: 'Some value'     }   } }; // 简单版本 const bigObject = {   // ...   prop1: {     // Nothing here     } };

因此，必须手动检查属性是否存在

1 2 3 4 5

if (bigObject &&     bigObject.prop1 != null &&     bigObject.prop1.prop2 != null) {   let result = bigObject.prop1.prop2.value; }

这样写太过冗长了，最好避免写它。

咱们来看看可选链如何解决这个问题，以减少冗余的代码。

</