今天又被QA发现：这个页面昨天还好好的，今天就一片空白。你的代码有问题吗？请看一下。查了一下，发现原因：本来如果pickup和dropoff这两个字段没有数据，应该返回{}，但是现在pickup字段返回null，我们取值的时候没有守住这个地方.list:openApiOrderInfo.pickup.address_list，结果是：脚本报错，页面不可用。解决办法也很简单，要么给个默认值，要么用?。做一层防御。改完再试，就OK了，页面又恢复正常了。让我们谈谈这个？今日主要内容：什么是可选链算子(?.)如何开启这个功能熟悉了，这里简单回顾一下。什么是可选链接运算符(?.)可选链接运算符(?.)允许读取位于连接对象链深处的属性值，而无需显式验证链中的每个引用是否有效。例如，考虑一个具有嵌套结构的对象obj。如果不使用可选链，在寻找深度嵌套的子属性时，需要验证它们之间的引用，例如：letnestedProp=obj.first&&obj.first.second;为了避免报错，在访问obj.first.second之前，保证了obj.first的值既不是null也不是undefined。如果您只是直接访问obj.first.second而没有验证obj.first，则可能会抛出错误。有了可选的链式运算符（?.），不再需要在访问obj.first.second之前显式检查obj.first的状态，然后使用短路计算得到最终结果：letnestedProp=obj。第一的？。第二;这等同于下面的表达式，但实际上并没有创建临时变量：lettemp=obj.first;letnestedProp=((temp===null||temp===undefined)?undefined:temp.second)的;？。运算符类似于.链式运算符，不同的是当引用为空（nullish）（nullorundefined）时不会报错，这个表达式的短路返回值为：undefined。与函数调用一起使用时，如果给定函数不存在，则返回undefined。在尝试访问可能不存在的对象属性时，使用可选的链接运算符将导致更短、更简洁的表达式。有两点需要注意：如果有属性名，而且不是函数，用?。仍会生成TypeError异常（x.y不是函数）。letresult=someInterface.customMethod?.();如果someInterface本身是null或undefined，异常TypeError仍然会被抛出。如果你想让someInterface也为null或undefined，那么你需要写someInterface?.customMethod?.()可选链不能用于赋值letobject={};object?.property=1;//UncaughtSyntaxError:Invalidleft-handsideinassignment如何启用这个功能//installnpminstall--save-dev@babel/plugin-proposal-optional-chaining//babelconfig{"plugins":["@babel/plugin-proposal-optional-chaining"//Optionalchaining"@babel/plugin-proposal-nullish-coalescing-operator",//双问号]}optionalchainingoperator(?.)是如何工作的consta={b:1};控制台日志（a？.b）；将被转换为：consta={b:1};console.log(a===null?void0:a.b);如果层次更深，会为Logging创建一个临时变量：consta={b:{c:1,d:2,}};console.log(a?.b?.c)会被转换成：var_a$b;consta={b:{c:1,d:2}};console.log(a===null||a===void0?void0:(_a$b=a.b)===null||_a$b===void0?void0:_a$b.c);Heny发布的一些相关信息Heny目前是babel项目的负责人，曾发表过一篇介绍目前babel困境的文章。上面的推文链接：https://twitter.com/left_pad/...有兴趣的可以去看看。概括？。用起来很方便，但是如果用不好，就会隐藏应该暴露的问题。所以，在使用的时候一定要清楚自己在做什么。？。还有一个小哥叫空值合并运算符（？？），这里就不说了，去MDN看文档吧。今天就到这里，希望对大家有所启发。
