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验证器目前并不能识别?.操作符,所以会有错误警告:

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

标签:JavaScript,可选链操作符
0
投稿

猜你喜欢

  • 如何编写一个基于WEB的文件查询系统?

    2009-11-08 18:55:00
  • Mootools 1.2教程(19)——Tooltips

    2008-12-25 13:26:00
  • 一个ASP记录集分页显示的例子

    2007-09-14 10:57:00
  • W3C优质网页小贴士(四)

    2008-04-17 13:34:00
  • Frontpage轻松下载网页或站点

    2007-10-22 13:14:00
  • JavaScript能判定两个function等价吗?

    2009-08-13 14:45:00
  • asp使用XMLHTTP下载远程数据输出到浏览器

    2007-11-04 10:34:00
  • Doctype之谜

    2009-07-22 20:48:00
  • javascript面向对象编程(三)

    2008-03-07 13:19:00
  • 编写安全的SQL Server扩展存储过程

    2008-11-25 11:16:00
  • MySQL中SQL的单字节注入与宽字节注入

    2009-03-25 14:49:00
  • MySQL的root帐户密码重置方法

    2007-08-24 15:53:00
  • Flask 使用类组织配置详情

    2023-06-15 02:31:30
  • XHTML与HTML之间的7个区别

    2009-05-20 10:13:00
  • “语法错误 (逗号) 在查询表达式id=20, 21”,怎么处理这个逗号?

    2009-09-18 14:52:00
  • Javascript DOM 编程实例讲解--仿LightBox效果提示框

    2008-05-01 13:25:00
  • 用CSS设计多种文本框与按钮样式风格

    2007-08-10 13:11:00
  • Oracle时间日期操作方法小结

    2010-11-25 18:04:00
  • focus 进 textarea 元素后光标位置的修复

    2008-09-27 13:27:00
  • ASP怎么谈到应用到类的?

    2008-03-10 11:21:00
  • asp之家 网络编程 m.aspxhome.com