js 可选链操作符的使用
作者:FruitBro 时间:2023-08-18 16:04:57
前言
可选链操作符(?.)允许读取位于链接对象链身处的属性的值,而不必明确验证链中的每个引用是否有效。不同之处在于,在引用为空(null或者undefined)的情况下不会引起错误,该表达式短路返回值是undefined。与函数调用一起使用时,如果给定的函数不存在,则返回undefined。
当尝试访问可能不存在的对象属性时,可选链操作符将会使表达式根更短、更简明。在探索一个对象的内容时,如果不能确定哪些属性必定存在,可选链操作符也是很有帮助的。
可选链操作符(?.)
语法
obj?.prop
obj?.[expr]
func?.(args)
描述
通过连接的对象的引用或函数可能是 undefined 或 null 时,可选链操作符提供了一种方法来简化被连接对象的值访问。
比如,思考一个存在嵌套结构的对象 obj。不使用可选链的话,查找一个深度嵌套的子属性时,需要验证之间的引用,例如:
let nestedProp = obj.first && obj.first.second
为了避免报错,在访问obj.first.second之前,要保证 obj.first 的值既不是 null,也不是 undefined。如果只是直接访问 obj.first.second,而不对 obj.first 进行校验,则有可能抛出错误。
有了可选链操作符(?.),在访问 obj.first.second 之前,不再需要明确地校验 obj.first 的状态,再并用短路计算获取最终结果:
let nestedProp = obj.first?.second
通过使用 ?. 操作符取代 . 操作符,JavaScript 会在尝试访问 obj.first.second 之前,先隐式地检查并确定 obj.first 既不是 null 也不是 undefined。如果obj.first 是 null 或者 undefined,表达式将会短路计算直接返回 undefined。
这等价于以下表达式,但实际上没有创建临时变量:
let temp = obj.first
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second)
使用
我们可以通过babel编译器来使用可以链操作符。
babel
yarn add @babel/plugin-proposal-optional-chaining --dev
添加.babelrc文件
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
在create-react-app使用
默认情况下create-react-app,不允许修改babel配置,这里我们需要安装两个附加模块以允许补充默认配置。
yarn add customize-cra react-app-rewired --dev
添加config-overrides.js文件
const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());
修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
eslint
安 * abel编译器后,就可以使用?.操作符了。但是如果你使用eslint的话,你就需要安 * abel-eslint来识别这种新语法。
yarn add babel-eslint --dev
添加.eslintrc文件
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
在vscode中使用
vscode的js验证器目前并不能识别?.操作符,所以会有错误警告:
解决错误警告:
安装vscode扩展ESLint,在扩展商店搜素并安装ESLint。
修改vscode配置(.vscode/settings.json):
{
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"javascript.validate.enable": false, // 主要是这个,关闭vscode的js验证器
"[javascript]": {
"editor.formatOnSave": false,
},
"[javascriptreact]": {
"editor.formatOnSave": false,
},
}
来源: 可选链操作符
来源:https://juejin.cn/post/6968654120316043277
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python环境配置实现pip加速过程解析
![](https://img.aspxhome.com/file/2023/2/83842_0s.jpg)
C#获取微信小程序的云数据库中数据的示例代码
python中time.ctime()实例用法
javascript模拟鼠标自动点击链接
GoLang bytes.Buffer基础使用方法详解
Python常问的100个面试问题汇总(下篇)
深入理解python多进程编程
![](https://img.aspxhome.com/file/2023/1/96941_0s.jpg)
Quester解读17条广告效果测定
python实现自动化群控的步骤
![](https://img.aspxhome.com/file/2023/1/105701_0s.png)
Java利用套接字实现应用程序对数据库的访问
![](https://img.aspxhome.com/file/2023/5/99755_0s.png)
分享一个超好用的php header下载函数
python PyAUtoGUI库实现自动化控制鼠标键盘
![](https://img.aspxhome.com/file/2023/8/110208_0s.png)