增加页面和代码健壮性（二）

增加页面和代码健壮性（二）

1. 使用背景

   • 当我们在项目中想要访问深层结构数据的某一个值得时候，一般都是通过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
   

2. ES2020新特性----可选链运算符?.增加代码健壮性

   • 使用这个可选链运算符，可以很好得避免一些程序和页面的崩溃问题，如果test或test.classes是null/undefined，表达式将会短路计算直接返回undefined，我们把上面的代码改一下

   // 获取属性得方法
   let language = test ?. classes ?. chinese
   

   有木有简单很多，不用在重复写一些单词啦~~~///(^v)\~~~

3. Can I Use上这个可选属性的支持情况

当然并不是只有这一种方式来增加页面健壮性，之前我也有写过一篇通过npm包get-value来实现页面和代码的健壮，欢迎感兴趣的小伙伴去看看哦