React 知识汲取篇 —— 可选链以及双问号 (?. 和 ??)

双问号

最近在学习React的时候 发现了一个非常好用的东西 可选链

有什么用呢 就是当我们在不知道一个对象的属性是否存在或者函数是否存在的时候(左边的运算为null或者是undefined) 如果一个对象的属性比较多 那就会出现下面这种情况

res && res.data && res.data.user && res.data.user.xxxx

会写很多很多的 && 来一级一级的进行判断 这样在我们完美的代码中看着就会很不爽
然后ES提供了一种语法糖 就是使用 ?. 的方式 上面这行语句就会变成

res?.data?.user?.xxxx

看这就会舒服许多

这里记录一下他的用法

安装

第一步肯定是先下载
npm:

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

配置

然后在我们的配置文件中添加上
如果是.babel文件或者

{
 "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",//双问号
    "@babel/plugin-proposal-optional-chaining" //可选链
  ]
}

如果是在config-overriders.js文件中

config = injectBabelPlugin(['@babel/plugin-proposal-optional-chaining'],config);
config = injectBabelPlugin(['@babel/plugin-proposal-nullish-coalescing-operator'], config);

然后就可以在项目中使用啦
可选链不仅仅支持对象的属性判断 它还可以与其 () 和 [] 一起使用
可选链是一种的语法结构 不是操作符

案例

举个🌰

res?.data?.user?.run?.()
或者
res?.data?.arr?.[1]

---

?.[] 允许从一个可能不存在的对象上安全地读取属性。

参考：可选链介绍

---

注意点

• 不要滥用
  我们只需要在可能不存在的地方使用可选链 一些已经确定必定会存在的属性 就不需要使用
  比如

  res.data.user?.xxx
  

  现在已经确定res.data已经存在了 到那时不确定user是否存在 就可以这样在前面两个中减少使用
  并且可选链也有一个弊端就是 使用了可选链后就减少了报错 这样排查问题就比较难了 所有也需要慎重使用

双问号

双问号就是如果??左面的表达式为null或者undefined的时候 就会返回??右边的值
和|| 不一样的地方就在于||是左边的值null或者undefined或者false或者0的时候 就会返回右边的值
这样我们可以和配合可选链一起来使用

res.data?.user?.xxxx ?? "此属性已消失在地球"

如果user或者xxx没有的话 就会返回"此属性已消失在地球"