ES2020 空值合并操作符??和可选链操作符?.

在之前的开发中，由于很多时候后台接口对数据库没有的值，直接就不会返回对应的字段，于是js里写了很多let result = resp.data || """或者三元运算符?:之类的。

对于查询接口，后端有时候会说，如果查询默认值或者全选，你就传个null或者空呗，于是又写了params.id = params.id || null。显然这样不严谨的写法会引出很多问题，比如id为0时。

针对这一问题，ES2020引入了新的操作符——空值合并操作符（??），很简单，类似于或操作符 || ，它只判断 x ?? y，当x为null 或者 undefined的时候，返回y；否则返回x。

于是let a = 0 ?? 1的时候，a就为0；let b = "" ?? "呵呵"，b值为""。避免了尴尬的if(x === null || typeOf(x) === "undefined")这种拉跨写法。

---

另一个场景，对深层嵌套的对象，很多人都写过类似：

let result = resp && resp.data && resp.data.item;

这里就要感谢一下ES2020新增的另一个操作符——可选链操作符（?.），其作用就是为了避免直接取对象值时造成的引用无效问题。它与 . 操作符其实一样，只是当引用为空的时候不会抛出错误，而是将结果返回为undefined，比较友好。

语法：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

所以上面的例子就可以变为：

let result = resp?.data?.item;

---

呼呼，在代码里是不是试了一下，发现vscode报错了，说"??"是unexpected token，emmmm，现在ts 3.7支持这俩操作符，想在vue2.0里用啊，要安装babel插件。

@babel/plugin-proposal-optional-chaining

@babel/plugin-proposal-nullish-coalescing-operator

然后在babel的配置文件里加：

{  "plugins":

[  "@babel/plugin-proposal-nullish-coalescing-operator",  

  "@babel/plugin-proposal-optional-chaining"  

]

}

可能会碰到启动项目时报错说babel/core找不到，这里要保证babel loader版本号是8.x并且babel core版本号是7.x，如果babel-core还是6.x依旧不能用，需要升级babel：

npx babel-upgrade --write

然后再启动会说babel loader不知道应该加载core的6.x还是7.x，所以更新一下环境：

cnpm i babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

最后再启动项目，可以了。

---

顺便一提，在ES2021里，还增加了一些赋值运算符：&&=、||= 和 ??=

1、&&= ：相当于 x=x && y，即if (x) { x = y }；

2、||= ：相当于 x = x || y，即if (!x) { x = y };

3、??= ：相当于x = x ?? y，即 if (x==null || x == undefined) { x = y };