ES2020新特性?? ?.

专心搞前端的第9天

今天遇到一题让我一脸懵逼的面试题。

var obj = {};
var x = +obj.yideng?.name ?? '京程一灯'
console.log(x);

完全看不懂怎么办，怎么那么多奇怪的???
网上搜了好久都没找到，后来灵机一动，想到这会不会是es2020的东西。网上找了下es2020，果然如此。
在对象具有多层级属性时，以前都使用.来连接。如

var a = {}
console.log(a.b)
//如果a不存在b属性，则输出undefined

但如果层级多余2个的情况。如上述判断a.b.c是否存在

var a = {}
console.log(a.b.c)
//则会报a.b undefined的错误。
//这种情况很常见，以前常用做法是用短路语法一层层过滤下去
a && a.b && a.b.c

现在有了?.可选链操作符后就方便多了。可直接写

a?.b?.c
//如果不存在a.b.c就会返回undefined，不会报错（写成a.b?.c不会报错，因为a.b返回undefined）

至于题目中的??是es2020新增的空位合并操作符。

a??b
//如果a为null或undefined，则返回b，否则返回a。与||的区别在于??只对null和undefined返回b，对于‘’ 0 false之类的返回a
null ?? 1   // 1
undefined ?? 1 //1
NaN ?? 1 //NaN
0 ?? 1 //0
'' ?? 1 // ''

null || 1 //1
undefined || 1 //1
NaN || 1  //1
0 || 1  //1
'' || 1 //1