JS 可选链操作符?. 空值合并运算符?? 详解，更精简的安全取值与默认值设置小技巧

壹 ❀ 引

说来也比较惭愧，可选链操作符?.在公司项目中使用特别频繁，而我在之前一直以为是类似奇技淫巧的写法，所以也没去查阅相关文档，直到在学习typescript时碰巧看到了可选链操作符与空值合并操作符两个概念，才知道原来是ECMAScript官方提出的新语法。因为本人觉得确实非常好用，所以这里做个简单科普，本文开始。

贰 ❀ 可选链操作符?.

贰 ❀ 壹 基本用法

在接近一年的各类bug修复工作中，我发现安全取值问题是bug产生的高频原因之一，或许大家对于数据来源过于自信（或者粗心大意），认为这份数据一定符合代码预期，它一定是个数组或者它一个是个对象，然而在某种未知情况下，你用于遍历的数组报错了，用于获取属性的对象也报错了，恭喜你，不幸解锁成就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;//28

OK，空值合并运算符相对而言简单不少，那么就介绍到这里。

PS：由于ECMAScript2020概念相对来说还比较新，部分浏览器低版本并不支持，请确认项目中有使用babel做类似ES5转义，不然大概率会出现浏览器不兼容的语法报错，那么到这里两个JS小技巧介绍完毕，本文结束。

参考

Optional Chaining for JavaScript

Nullish Coalescing for JavaScript

可选链操作符 - JavaScript | MDN

空值合并运算符 - JavaScript | MDN