壹 ? 引
说来也比较惭愧,可选链操作符?.
在公司项目中使用特别频繁,而我在之前一直以为是类似奇技淫巧的写法,所以也没去查阅相关文档,直到在学习typescript
时碰巧看到了可选链操作符与空值合并操作符两个概念,才知道原来是ECMAScript官方提出的新语法。因为本人觉得确实非常好用,所以这里做个简单科普,本文开始。
贰 ? 可选链操作符?.
贰 ? 壹 基本用法
在接近一年的各类bug修复工作中,我发现安全取值问题是bu*生的高频原因之一,或许大家对于数据来源过于自信(或者粗心大意),认为这份数据一定符合代码预期,它一定是个数组或者它一个是个对象,然而在某种未知情况下,你用于遍历的数组报错了,用于获取属性的对象也报错了,恭喜你,不幸的解锁新成就Uncaught TypeError: Cannot read property ‘XX‘ of null
。
因此在一次公司前端月会上,我提了一个小意见,凡是数据来源带有查找性质,建议做安全取值判断,比如:
// arr来源是通过其它查找行为所生成,可能是数组也可能是null
arr && arr.forEach((e)=>console.log(e))
// obj来源也是查找,可能是null
let name = obj && obj.name
// fn通过props传递,可能没传
fn && fn(...rest);
上述代码应该特别好理解,对于a && b
来说,只有a
为真时逻辑才会走到b
,上述逻辑等同于:
if(obj){
let name = obj.name;
};
而可选链操作符?.
的出现会进一步简化我们的写法,而且可读性更加友好,比如:
arr?.forEach((e)=>console.log(e));
let name = obj?.name;
fn?.(...rest);
事实上,我们在开发中常常遇到属性多层级的获取场景,比如下面这样的一个对象,我们需要获取name
字段:
let o = {
user:{
name:‘echo‘
}
};
// 保险做法
let name = o.user && o.user.name;
// 换成?.
let name = o.user?.name;
你看,原本臃肿的判断逻辑我们现在直接简化成了一小段,?
的含义也很好理解,o.user
是真值吗?是那就通过.
获取name
字段。
贰 ? 更强的代码健壮性
?.
除了简化代码量提升语义化外,其实更重要的一点是提升了代码的健壮性,一定程度上减少了安全取值类的低级错误,比如一个对象的值意外的是null
或者undefined
,我们在获取name
时:
let o = null;//或者undefined都行
// 犯错的写法
let name = o.name;// 报错,告诉你不能从null上读书name属性
// 换成?.
let name = o?.name;
console.log(name);//undefined
当换成?.
这段代码并不会,而且当我们访问name
时就像单纯声明了一个name
变量未赋值,它输出undefined
。
同样,当我们希望将一个方法(此方法执行后还会返回一个值)作为props
传递给下层组件调用时,可能有这两种场景:
let fn = function(a){
return a;
};
// 假设传递了
let a = fn?.(1);
console.log(a);//1
// 假设没传
let func = undefined;
let b = func?.(1);
console.log(b);// undefined
你会发现使用?.
调用一个可能传递的方法也非常简单,而假设这个方法没传递,函数的返回值也是undefined
,这一点与上面对象属性获取的例子结果保持一致,总结来说,当引用为空(null或者undefined
)的情况下不会引起错误,且表达式短路返回值是 undefined
。
叁 ? 四种常用语法
?.
支持如下几种语法:
obj?.prop//读取对象某个属性
obj?.[expr]//读取某个属性,且这个属性名还是个变量
arr?.[index]//读取数组下标
fn?.(args)// 调用一个可能没传递函数
我们来给几个例子感受下:
// 读取某个对象的属性
let echo = {name:‘听风是风‘};
let name = echo?.name;
// 读取某个对象的属性,属性是个变量
let n = ‘name‘;
let name1 = echo?.[n];
// 读取数组下标
let arr = [‘echo‘, ‘时间跳跃‘, ‘听风是风‘];
let name2 = arr?.[2];
// 执行某个可能不存在的函数
let fn = a => a;
let name3 = fn?.(‘听风是风‘);
另外,官方给了一个比较特殊的例子,猜猜此时a
是多少?
let a = 1?.3:2;
a//?
我们知道,常规小数比如0.1
可以简写成.1
,其实上述代码格式化一下就是一个三元运算符:
let a = 1 ? .3 : 2;
由于1为真,所以a
最终复制是0.3
,专门提出这个例子是想告诉大家不要对于场景有所疑惑,javascript
还是能够正确解析的,当然,保险起见,大家也可以通过圆括号进行范围划分:
let a = 1?(.3):2;
叁 ? 空值合并运算符??
叁 ? 壹 概念与用法
在日常聊天中,对于表示惊叹,无语,反问,大家可能会回复多个问号作为万能的答复,比如:
而在javascript
世界中,它的含义不仅限于如此,在ECMAScript2020
中除了推出可选链操作符外还有一个也非常好用的空值合并运算符,它就是用两个英文??
表示,概念上也非常简单,当一个表达式左侧的操作数为 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或者一个空字符,但对于短路逻辑||
而言左侧是一个假值,这会导致最终复制会以右边为准,从而产生了一个bug。
而空值合并运算符??
正是用于解决这一问题场景,让我换个写法:
// 用户传递的就是0
let num = 0;
let num_ = num ?? 1;
// 用户传递的就是空字符串
let str = ‘‘;
let str_ = str ?? ‘echo‘;
console.log(num_, str_);// 0 ‘‘
你看,只有当左侧为undefined
或者null
时,右边的值才会生效。
贰 ? 注意事项
需要注意的是,空值合并运算符不能与&&
或者||
公用,比如如下写法都是错误的:
null || undefined ?? "echo";// 报错
true && undefined ?? "echo";// 报错
对于javascript
而言,它根本不知道应该怎么读取这段代码,比较好的做法还是通过圆括号进行范围划分,这样解析器才知道那一小块是一个整体,比如:
let name = (null || undefined) ?? "echo";
let age = (true && undefined) ?? 28;//
OK,空值合并运算符相对而言简单不少,那么就介绍到这里。
PS:由于ECMAScript2020
概念相对来说还比较新,部分浏览器低版本并不支持,请确认项目中有使用babel做类似ES5转义,不然大概率会出现浏览器不兼容的语法报错,那么到这里两个JS小技巧介绍完毕,本文结束。
参考
Optional Chaining for JavaScript
Nullish Coalescing for JavaScript
[空值合并运算符 - JavaScript | MDN](