• 欢迎大家分享资料!前往留言板评论即可!

ES2020可选链(?.)的初步使用

合宙 模组资料网 2年前 (2021-05-15) 273次浏览 已收录 0个评论 扫描二维码

吐槽:
前端开发过程中,大多数情况下会存在一个很“尴尬”的现象;访问对象属性(特别是深层次的访问obj的对象属性)时遇到undefined、报错等情况,让开发人员不得不去进行数据的判定,防止代码页面崩溃…很常见的一种就是在访问对象中某个不存在的属性,可能要进行多次的 && 或者 if判断才能达到目的

结合场景:
最近一段时间在进行某个订单系统的开发,其中牵涉到很多对象属性访问,目前统一使用 && 进行开发(存在访问重复属性字段),让人看起来很不舒服(开发过程中,对对象中不一定存在的属性进行访问,导致报错,页面崩了塞…)。

思考:有没有什么方法能快速、简捷的方式来实现对对象属性的判定访问呢?查阅资料…

目前我知道的解决方案有三种:
1、if
2、&&
3、?. (可选链:是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。)

前两者大家都已经比较熟悉了,if && 唯一不好的地方就是代码量太多,而且存在重复访问属性,不够优雅

这里以 && 为例(xxx开发需求):
user.[key1].[key2].[key3]... =>user.[key1] && user.[key1].[key2]&& user.[key1].[key2].[key3]...无奈(这种方式代码逻辑是比较清晰的,逐个进行访问)

。。。那有没有更简洁的方式实现呢?下面让我们看一下使用
?. 是如何实现滴

最直接的表达方式:

//声明变量
let userF = {}
let userS = { 
              name : {
                   firstName:'合宙',
                   secondName:'NB',
              } 
            }

正常访问一个对象属性很常见:userS .name.firstName。。。

假如是个空对象进行访问呢。大家很清楚都能看到userF这就是一个空的对象,里面不存在任何属性,这个时候如果你进行属性访问会出现什么情况呢?可想而知:errror,例如:userF .name.firstName(开发会存在这种情况)

使用 ?. 进行访问:userF .name ?.firstName 这样就不会报错了(虽然):
userF .name => undefined
ps: ?. 左边是undefined/null 时,不会再进行后面的运算(访问),同时并返回当前的值 userF .name ?.firstName => undefined(不会报错)

注意:
1、使用 ?. 时,运算符左边的变量必须是声明过的
2、?. 运算符,只会让左边的值设为可选值,并不会影响右边的值
3、不要滥用 ?. 很容易造成调试开发上的困难

其中 ?. 还存在两种不一样的变体:?.() | ?.[]
?.() : 判定函数是否存在,存在则调用 不存在则返回undefined
?.[] : 访问对象的属性的一种方法(在前端访问对象属性时,普遍使用类似:obj.key 进行访问,也可通过【】进行访问,效果相同)

空判断操作符(??)
简单解释一下:当使用 ?? 运算符时,只要左边不是null/undefined,就会返回右边值;
比如:
"" ?? "a" =====>""
0 ?? "a" =====>0
null ?? "a" =====>"a"
undefined ?? "a" =====>"a"
这个时候可能会有人问:什么情况下会用到这个 ?? 运算符呢???
场景:需要返回 0 或 “”
ps:有兴趣的小伙伴可以了解一下 ?? 和 || 的不同点在哪!!!

运算扩展:
常用取整方式:(不知道大家对一下其中几种了解过呢)

//常见
parseInt("1.5555") // => 1
1.5555.toFixed(0)  // => "2"
Math.ceil(1.5555) // => 2
Math.floor(1.5555) // => 1
Math.round(1.5555) // => 2
Math.round(1.4999) // => 1
Math.trunc(1.5555) // => 1

//不常见
双按位非取整
// 利用位运算取整
~~1.5555 // => 1

//按位运或取整
1.5555 | 0  // => 1

//按位异或取整
1.5555^0  // => 1

//左移0位取整
1.5555<<0 // => 1

ps:其中按位运算,是进一步优化性能的操作(Math相关方法与位运算性能无异)


转载请注明原文链接:ES2020可选链(?.)的初步使用
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址