增加页面和代码健壮性(二)
-
使用背景
- 当我们在项目中想要访问深层结构数据的某一个值得时候,一般都是通过
xxx.xx.x
得形式来获取,当然这样的获取方式并不安全,很有可能会遇到错误提示Uncaught TypeError: Cannot read property...
从而导致程序被迫中止 - 当然如果加上对每一层数据得前置校验检查,前面得代码会变成
xxx && xxx.xx && xxx.xx.x
,这样得代码显得既坠余又不美观
// 例子 let test = { 'name':'ymx', 'age':24, 'sex':'woman', 'job': null, 'country':undefined, 'likes':['eat','shopping','music'], 'classes':{ 'chinese':1, 'us':null, 'PE':undefined }, } // 获取属性得方法 let language = test && test.classes && test.classes.chinese
- 当我们在项目中想要访问深层结构数据的某一个值得时候,一般都是通过
-
ES2020
新特性----可选链运算符?.增加代码健壮性- 使用这个可选链运算符,可以很好得避免一些程序和页面的崩溃问题,如果
test
或test.classes
是null/undefined
,表达式将会短路计算直接返回undefined
,我们把上面的代码改一下
// 获取属性得方法 let language = test ?. classes ?. chinese
有木有简单很多,不用在重复写一些单词啦~~~///(v)\~~~
- 使用这个可选链运算符,可以很好得避免一些程序和页面的崩溃问题,如果
-
Can I Use
上这个可选属性的支持情况
当然并不是只有这一种方式来增加页面健壮性,之前我也有写过一篇通过npm
包get-value
来实现页面和代码的健壮,欢迎感兴趣的小伙伴去看看哦