===================================================================
当你在获取一个对象的属性的时候,你可能需要检测这个属性是否存在,否则会报错;比如:
var obj
console.log(obj.name)
会报错:TypeError: Cannot read property 'name' of undefined
;
特别是后端接口返回的数据,前端数据一般是你自己定义的,有就是有,没有就是没有;
后端有时候说好的有,结果没有…/(ㄒoㄒ)/~~
开个玩笑,继续
所以在使用接口返回的数据的时候,要做属性判断,再使用:
if(resp && resp.data) {
this.tableData = resp.data
}
如果属性嵌套很深,就很难受了 ≧ ﹏ ≦
if (person && person.owner && person.owner.permission) {
let usecar = person.owner.permission.usecar
}
第三方工具库像 lodash
等,提供了类似这种快捷的判断取值:
//
_.get(person, ‘owner.permission.usecar’);
也能够解决对应的问题,但不是本文讨论的问题,重点在下面。
⬇
==================================================================
对于复杂的属性判断,使用 可选链 就很棒了。
它使我们能检查一个对象上面的某属性是否为 null
或者 undefined
,如果是,则返回 undefined
,而不会报错。
this.tableData = resp?.data
可选链还可以在数组中使用
let moveName = movie.actors?.[0]?.name
⬇
==========================================================================
-
object?.property
;常见的一种 -
object?.[expression]
;用于访问数组项或访问动态属性 -
object?,[arg1, [arg2, ...]
;用于执行对象的一个方法,有时候不知道这个对象的方法是否存在,也可以用可选链来搞
const object = null
object?.method(‘Some value’) // => undefined
======================================================================================
可选链接运算符的有趣之处在于,只要在左侧 leftHandSide?.rightHandSide
遇到无效值,右侧访问就会停止,这称为短路。
看看例子:
const nothing = null;
let index = 0;
nothing?.[index++]; // => undefined
index; // => 0
===================================================================
对于不存在的属性,可选链返回的是 undefined
,undefined
是不太友好的,在代码中会存在问题;我们希望当属性不存在的时候,给一个默认值。
但是如果使用三目运算符,好像有点僵硬
// name不存在的时候,用 - 代替
let moveName = movie.actors?.[0]?.name ? movie.actors?.[0]?.name : ‘-’
一个新的提议【双问号】 nullish coalescing operator , 处理 undefined
或 null
的时候,可以给它们默认为特定值。
语法: 变量名 ??
const noValue = undefined;
const value = ‘Hello’;
noValue ?? ‘no value’; // => ‘no value’
value ?? ‘no value’; // => ‘Hello’
【细节拉满】
// name不存在的时候,用 - 代替
let moveName = movie.actors?.[0]?.name ?? ‘-’
===================================================================
① 避免过度使用
// 连续多次判断同一属性,不好
console.log(foo?.bar)
console.log(foo?.baz)
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结
-
框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。
-
算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
,不然影响你的工资和成功率😯
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!