ES的一些实用写法

2022-6-22 21:37:037

#前端

61

前言

不知不觉好久没更新过自己的博文网站了,最近博主也是毕业了,正式投身于工作之中,开启了码农的社畜生活,与自己的学生身份说拜拜了。 废话不多说,工作之余忙里偷闲也还是要坚持看一些技术文章,保持自己对技术的敏感性,这会儿看到一篇介绍es写法的文章,感觉很实用,为此通过写博文摘笔记与总结的方法来督促自己学习。 原文

正文

空值合并运算符

  • 场景:日常写代码时,经常会遇到后端接口缺少字段的情况,为此我们前端需要为此作空值兼容。这种情况我在日常工作中也碰到过好几次,而且这种空值情况会在不报错的情况下造成页面崩溃,未响应的状态,可以说是很坑的。
  • 解决方法:使用??这一空值合并运算符
  • 示例:const price = res.data?.price ?? '暂无标价'

可选链Optional Chaining

  • 场景:仍旧是后端接口传回的字段不存在的问题
  • 解决方法:使用?这一可选链运算符
  • 示例:const name = res?.result?.data?.userInfo?.name || '' 如这段代码所示,当该字段不存在时,会将name定义为空字符串''
  • 该运算符可以与上面的空值合并运算符结合起来成为const name = res?.result?.data?.userInfo?.name ?? '',这样可以避免如0这样的值带来的逻辑运算错误,??||运算符更好