设为首页 - 加入收藏 安康站长网 (http://www.0915zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 手机 2019 苹果 如何
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

为什么我喜欢 JavaScript 可选链

发布时间:2019-10-26 20:09 所属栏目:[优化] 来源:疯狂的技术宅
导读:很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015 及更高版本开始,对我的代码影响较大的功能是解构、箭头函数、类和模块系统。 截至2019年8月,一项新提案可选链(optional chaining)进入了第3阶段,将是一个很好的改进。可选的链接更改了从深

很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015 及更高版本开始,对我的代码影响较大的功能是解构、箭头函数、类和模块系统。

为什么我喜欢 JavaScript 可选链

截至2019年8月,一项新提案可选链(optional chaining)进入了第3阶段,将是一个很好的改进。可选的链接更改了从深层对象结构访问属性的方式。

让我们看看可选链是如何通过在深度访问可能缺少的属性时删除样板条件和变量来简化代码的。

1. 问题

由于 JavaScript 的动态特性,一个对象可以具有非常不同的对象嵌套结构。

通常,你可以在以下情况下处理此类对象:

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

尽管这为对象提供了支持不同数据的灵活性,但是在访问此类对象的属性时,随之而来的是增加了复杂性。

bigObject 在运行时可以有不同的属性集:

  1. //?One?version?of?bigObject?
  2. const?bigObject?=?{?
  3. ??//?...?
  4. ??prop1:?{?
  5. ????//...?
  6. ????prop2:?{?
  7. ??????//?...?
  8. ??????value:?'Some?value'?
  9. ????}?
  10. ??}?
  11. };?
  12. ?
  13. //?Other?version?of?bigObject?
  14. const?bigObject?=?{?
  15. ??//?...?
  16. ??prop1:?{?
  17. ????//?Nothing?here????
  18. ??}?
  19. };?

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

  1. //?Later?
  2. if?(bigObject?&&??
  3. ????bigObject.prop1?!=?null?&&??
  4. ????bigObject.prop1.prop2?!=?null)?{?
  5. ??let?result?=?bigObject.prop1.prop2.value;?
  6. }?

最好不要这样写,因为包含了太多的样板代码。。

让我们看看可选链是如何解决此问题,从而减少样板条件的。

2. 轻松深入访问属性

让我们设计一个保存电影信息的对象。该对象包含 title 必填属性,以及可选的 director 和 actor。

movieSmall 对象仅包含 title,而 movieFull 则包含完整的属性集:

  1. const?movieSmall?=?{?
  2. ??title:?'Heat'?
  3. };?
  4. ?
  5. const?movieFull?=?{?
  6. ??title:?'Blade?Runner',?
  7. ??director:?{?name:?'Ridley?Scott'?},?
  8. ??actors:?[{?name:?'Harrison?Ford'?},?{?name:?'Rutger?Hauer'?}]?
  9. };?

让我们写一个获取导演姓名的函数。请注意 director 属性可能会丢失:

  1. function?getDirector(movie)?{?
  2. ??if?(movie.director?!=?null)?{?
  3. ????return?movie.director.name;?
  4. ??}?
  5. }?
  6. ?
  7. getDirector(movieSmall);?//?=>?undefined?
  8. getDirector(movieFull);??//?=>?'Ridley?Scott'?

if (movie.director) {...} 条件用于验证是否定义了 director 属性。如果没有这种预防措施,则在访问movieSmall 对象的导演的时,JavaScript 会引发错误 TypeError: Cannot read property 'name' of undefined。

这是用了可选链功能并删除 movie.director 存在验证的正确位置。新版本的 getDirector() 看起来要短得多:

  1. function?getDirector(movie)?{?
  2. ??return?movie.director?.name;?
  3. }?
  4. ?
  5. getDirector(movieSmall);?//?=>?undefined?
  6. getDirector(movieFull);??//?=>?'Ridley?Scott'?

在 movie.director?.name 表达式中,你可以找到 ?.:可选链运算符。

对于 movieSmall,缺少属性 director。结果 movie.director?.name 的计算结果为 undefined。可选链运算符可防止引发 TypeError: Cannot read property 'name' of undefined 错误。

相反 movieFull 的属性 director是可用的。 movie.director?.name 默认被评估为 'Ridley Scott'。

简而言之,代码片段:

  1. let?name?=?movie.director?.name;?

等效于:

  1. let?name;?
  2. if?(movie.director?!=?null)?{?
  3. ??name?=?movie.director.name;?
  4. }?

?. 通过减少两行代码简化了 getDirector() 函数。这就是为什么我喜欢可选链的原因。

2.1 数组项

可选链能还可以做更多的事。你可以在同一表达式中自由使用多个可选链运算符。甚至可以用它安全地访问数组项!

下一个任务编写一个返回电影主角姓名的函数。

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章