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

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

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

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

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

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

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

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

最直接的表达方式：

1
2
3
4
5
6
7
8

//声明变量
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:有兴趣的小伙伴可以了解一下 ?? 和 || 的不同点在哪！！！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//常见
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相关方法与位运算性能无异）