JS非常方便的新特性——可选链和空值合并运算符

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第36天，点击查看活动详情

当你要调用一个不确定是否存在的对象的属性时，是否会遇到这样的情况？

var obj = null;
obj.a; //Uncaught TypeError: Cannot read properties of null (reading 'a')

于是需要进行判断：

var obj = null;
obj != null ? obj.a: null; //null
obj = {a:1};
obj != null ? obj.a: null; //1

那么如果有obj有两层呢？

obj ? (obj.a ? obj.a.b: null): null

三层？

obj ? (obj.a ? (obj.a.b ? obj.a.b.c: null): null): null

已经超越人类可以理解的范畴了……于是，为了解决这一问题，可选链横空出世了！

obj?.a?.b?.c //undefined

成功避开了报错问题！

去caniuse上看一下可选链的兼容性：

在Chrome80版本以上全部都兼容（不会吧不会吧，2022年了，还有人在用80以下版本的Chrome吗？）

那么，如果真的要支持80以下版本怎么办呢，那就要借助webpack来帮忙了，首先安装插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining

之后在webpack项目的根目录下的.babelrc.js文件（如果没有就创建一个）中引入这个插件:

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

webpack即可帮你做好旧版本的兼容了~

但可选链在使用的过程中，可能会遇到这样一个问题：当左侧的可选链“断链”时，会返回undefined，一般这个时候我们就需要在取值中设定一个缺省值了，你可能会想到使用||，可是，这样一来，如果左侧返回的是0或者空字符串""，但这两个值却正好是我们想要的，||因为将左侧进行类型转换判断成了false依然会取值右边我们的缺省值：

var obj = {a:0}
obj?.a || "default" //"default"

这时候我们想要得到这个0，该怎么办？于是空值合并运算符??就派上用场了，空值合并运算符当且仅当左侧值为null或undefined时才会取右边的值，于是：

var obj = {a:0}
obj?.a ?? "default" //0

我们顺利的拿到了0，兼容性也一起看一下：

跟可选链兼容性差不多，也是80版本以上的Chrome，要使用webpack对过往版本进行兼容，也是同样使用插件并引入：

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

// 根目录下的.babelrc.js文件
{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}