JS 可选链操作符?. 空值合并运算符??

可选链操作符与空值合并操作符,是ECMAScript官方提出的新语法,更精简的安全取值与默认值设置小技巧

1.JS 可选链操作符?.

?.的含义也很好理解,判断左侧是否为真(是否有数据),为真再进行右边的操作。

凡是数据来源带有查找性质,我们做安全取值判断会减少Bug,过去我们用if()或者&&来进行判断数据

// arr来源是通过其它查找行为所生成,可能是数组也可能是null
arr && arr.forEach((e)=>console.log(e))
// obj来源也是查找,可能是null
let name = obj && obj.name
// fn通过props传递,可能没传
fn && fn(...rest);
// 判断obj是否存在
if(obj){
  let name = obj.name;
};

现在我们有了?.来进行代替,它会进一步简化我们的写法,而且可读性更加友好,比如:

arr?.forEach((e)=>console.log(e));
let name = obj?.name;
fn?.(...rest);

面对在开发中常常遇到属性多层级的获取场景,比如下面这样的一个对象,我们需要获取color字段:

let o = {
  user:{
    color:'lala'
  }
};
// 保险做法
let color= o.user && o.user.color;
// 换成?.
let color= o.user?.color;

?的含义也很好理解,o.user是真值吗?是那就通过.获取color字段。
?.除了简化代码量提升语义化外,其实更重要的一点是提升了代码的健壮性,一定程度上减少了安全取值类的低级错误,比如一个对象的值意外的是null或者undefined,我们在获取name时:

let o = null;//或者undefined都行
// 犯错的写法
let name = o.name;// 报错,告诉你不能从null上读取name属性
// 换成?.
let name = o?.name;
console.log(name);//undefined

总结来说,当引用为空(null或者undefined)的情况下不会引起错误,且表达式短路返回值是 undefined。
?.支持如下几种语法:

obj?.prop//读取对象某个属性
obj?.[expr]//读取某个属性,且这个属性名还是个变量
arr?.[index]//读取数组下标
fn?.(args)// 调用一个可能没传递函数

猜猜此时a是多少?

let a = 1?.3:2;
a//?

.3其实是0.3,这就是一个三元运算符

let a = 1?(.3):2;

所以a是0.3
专门提出这个例子是想告诉大家不要对于此场景有所疑惑,javascript还是能够正确解析的,当然,为了可读性,大家也可以通过圆括号进行范围划分。

2.空值合并运算符??

它就是用两个英文??表示,概念上也非常简单,当一个表达式左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
我想以前大家都写过这样的代码

let user = {};
let name = user.name || 'echo';

这段代码的本意的是,当user.name不存在时,我们期望给name设置一个默认值,便于后续程序能正常运行。但实际开发中往往会遇到如下类似的情况,比如:

// 用户传递的就是0
let num = 0;
let num_ = num || 1;
// 用户传递的就是空字符串
let str = '';
let str_ = str || 'echo';

这样就会报错,我们可以用??解决它

// 用户传递的就是0
let num = 0;
let num_ = num ?? 1;
// 用户传递的就是空字符串
let str = '';
let str_ = str ?? 'hello';
console.log(num_, str_);// 0 ''

只有当左侧为undefined或者null时,右边的值才会生效。
要注意的是,空值合并运算符不能与&&或者||直接共用,如下写法都是错误的:

null || undefined ?? "echo";// 报错
true && undefined ?? "echo";// 报错

对于javascript而言,它根本不知道应该怎么读取这段代码,比较好的做法还是通过圆括号进行范围划分,这样解析器才知道那一小块是一个整体,比如:

let name = (null || undefined) ?? "echo";
let age = (true && undefined) ?? 28;//28

写在后面:由于ECMAScript2020概念相对来说还比较新,部分浏览器低版本并不支持,请确认项目中有使用babel做类似ES5转义,不然大概率会出现浏览器不兼容的语法报错。

你可能感兴趣的:(javascript,typescript)