ES2020 系列：可选链 “?.“

最新推荐文章于 2023-05-27 09:51:54 发布
最新推荐文章于 2023-05-27 09:51:54 发布
阅读量169 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26642611/article/details/110239023
版权

可选链操作符（Optional Chaining）
可选链 “?.”
可选链可让我们在查询具有多个层级的对象时，不再需要进行冗余的各种前置校验。
日常开发中，当需要访问嵌套在对象内部好几层的属性时，可能就会得到臭名昭著的错误Uncaught TypeError: Cannot read property…这种错误，让整段程序运行中止。有了可选链式调用 ，可以大量简化类似繁琐的前置校验操作，而且更安全。
可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在，也不会出现错误。
例子:

/*可选链路  ？. */
let  newObj2020 = '';
console.log(newObj2020?.lal?.aa)  //undefine
红孩儿2011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node-v16.16.0-x64
08-13
2. **ES特性支持**：Node.js v16.x系列会支持更多的ECMAScript（ES）新特性，比如Top-Level `await`，可选链（?.）和空合并运算符（??）等。 3. **模块生态**：Node.js v16开始默认启用新的模块系统（'esm'），这...
opengles20-reference-card.pdf
01-14
OpenGL ES命令语法遵循一定的格式，包括返回类型、函数名以及可选的类型标识符，如`i`代表32位整型，`f`代表32位浮点型。函数原型通常显示为：`return-type Name{1234}{if}{v} ([args ,] T arg1 , . . . , T argN [,...
可选链 ?.
叮当的猫猫的博客
10-27 2189
一、可选链三种语法形式 1.obj ?.prop. --------如果obj 存在则返回 obj.prop ,否则返回 undefined。 2.obj ?.[prop] -------如果存在则返回obj[prop] ，否则返回undefined。 3.obj.method?.()------如果obj.method 存在则调用obj.method(),否则返回undefined。 正如我们所看到的，这些语法形式用起来都很简单直接，检查左边部分是否为 null/undefined，如果不是则继续
ES2020之可选链——?.
youhebuke225的博客
11-29 547
前提 可选链，也就是?.与??操作符，他实质上也是一种语法糖，通俗来讲就是 对象.属性1?.属性2??默认值，如果有对象的属性1，那么就继续读取属性2，如果没有则返回默认值。就就相当于一个三元运算符 他一般适用于嵌套对象的读取，链式的安全读取，详细可以参考 MDN，可以用于 对象 数组 函数 例子 const obj = { a:1 } 我们如果直接读取对象中没有的属性，他就会直接报错 console.log(obj.b.c) // Uncaught TypeError: Cannot read
JS可选链操作符 (?.)
潇湘子的博客
06-23 2430
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有
ES11中的可选链等语法
Programmer小卫
12-18 1374
我们介绍ES11新特性 这个新特性在判断空值的方面非常简单,相关语法如下。 1、可选链语法(?.) obj?.prop // 如果存在prop则返回属性 obj?.[prop] // 根据obj是否存在prop来执行[]内的表达式 arr?.[index] // 获取arr中的元素当index对应元素存在 func?.(args) // func存在调用 可选链相关语法 //当函数存在时候调用函数 var func=(x)=>{ console.log(x); }; func?
ES2020新语法：可选链操作符
m0_72383454的博客
05-27 1100
可选链操作符
新版Android开发教程.rar
12-14
----------------------------...• 优化的图形库 包括定制的 2D 图形库， 3D 图形库基于 OpenGL ES 1.0 （硬件加速可选） • SQLite SQLite SQLite SQLite 用作结构化的数据存储 • 多媒体支持 包括常见的音频、视频和...
JavaScript：JavaScript存储区和ECMAScript
03-04
6. **ES11（ECMAScript 2020）**：引入了BigInt类型，用于处理大整数，以及可选链操作符（?.）和空合并运算符（??）。 7. **ES12（ECMAScript 2021）**：添加了逻辑赋值运算符（&&=, ||=, ??=），以及矩阵解构赋值...
基于vue的一款本地记账APP源码.zip
06-25
- **Vuex**：可选状态管理库，用于管理组件间的共享状态，实现数据流动的一致性。 - **Axios**：可能用于处理HTTP请求，获取或发送数据到服务器。 4. **开发流程** - **安装Vue CLI**：通过npm全局安装Vue CLI。...
ES6+ 可选链操作符
很酷的站长的博客
01-02 464
上面的代码中，obj 是一个对象，在获取 obj 对象的属性 a 时，属性 a 没有被定义所以返回 undefined，第 3 行获取 obj 对象 a 下的 b，由于 obj 上没有 a 属性，再获取 a 上的 b 属性就会报错。一般这样的情况，在程序中需要做前置验证，大部分情况会借助&&来完成。上面的代码中第 2 行首先会判断obj.a的值，如果不为空则继续执行obj.a.b否则返回undefined。
（26）es6——es11新增可选链式调用?.
浪头的博客
04-25 910
文章结构链式调用属性的痛点没有链式调用怎么解决痛点链式调用解决痛点链式调用的好处链式不只是用来调用对象属性调用函数调用动态属性可选链式有三个属性短路堆叠可选删除 链式调用属性的痛点 当我们读取比较深的对象属性时可能会编写出下面的代码 console.log(person.hobby.category); // 读取人的爱好中的类别属性 前置知识： 1、我们知道js去读取一个对象不存在的属性时，返回值为undefined。 2、js去读取undefined的xxx属性时会报错。 那么此时consol
ES6——可选链（链判断运算符 ）and 空值合并操作符（??）
weixin_43551242的博客
10-28 536
?.
ES6~ES12——Array Includes、Object values、Object entries、Object fromEntries、flat、flatMap、空值合并运算符、可选链等
zep
03-10 1354
一、ES7 - Array Includes 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。 二、ES7 –指数(乘方) exponentiation运算符 在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。 在ES7中，增加了 ** 运算符，可以对数字来计算乘方。 三、E
JS-ES2020可选链?.理解
weixin_46254175的博客
11-17 460
在实际场景中，总会有下面这种代码的场景 if (this.data.$ab_user) { this.data.$ab_user.ab_topic_ad_chaping === 2 && this.data.showScreenAd && this.initAD(); } 使用?.可简化成下面： this.data.$ab_user?.ab_topic_ad_chaping === 2 &&
ES11中的globalThis和可选链
q709971076的博客
07-31 335
小编今天更新的这两个新特性主要是编码可以更方便，同时也增加了兼容性，globalThis主要是提供了一个标准的方式去获取不同环境下的全局对象。可选链主要是增加了对象中获取内容的安全性。 一、globalThis 对于WEB(浏览器)环境下，js中的全局变量是window/self，相信大家对于window了解的比较多，也比较熟悉，小编也是今天才知道self的这个对象，从目前来看，可以认为是一样的。下面是延时实例 setTimeout(() => { console.log('lil
jsES6新语法可选链
G0000227的博客
12-23 1884
语法: obj?.prop //变量 obj?.[expr] //对象 arr?.[index] //数组 func?.[argu] //函数 如果在你不确定某个值是否为undefined或null时,可以使用?.可选链 举个例子 let obj={a:1,b:2} 这时候直接输出obj.c那么这个值为undefined,如果这时候继续输出一个obj.c.d那么这段代码就会报错 console.log(obj.c.d) ...
可选链路操作符(?.)在数组上的运用
imkaifan的博客
01-10 1340
可选链路操作符(?.)在数组上的运用
ES2020新语法：可选链操作符 `?.`
weixin_43487782的博客
12-03 4107
下面有个例子，cat 属性可能不存在。 const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; 如果想要访问 cat 的 name 属性，像下面这样可能会报错： const name = adventurer.cat.name Uncaught TypeError: Cannot read property ‘name’ of undefined 如果 cat 属性不存在，那么 adventurer.cat 的值
可选链(?.) You may need an additional loader to handle the result of these loaders.
最新发布
09-23
可选链操作符(?.)是ES2020中引入的新语法，它允许我们在访问对象的属性时，不需要手动校验每个属性是否存在，而是直接使用可选链操作符(?.)来进行链式访问。当属性不存在时，可选链操作符(?.)会返回undefined，而不会抛出错误。 对于你提到的编译报错，是因为在Vue项目中使用可选链操作符语法时，需要安装babel依赖@babel/plugin-proposal-optional-chaining，并将其添加到babel.config.js配置文件中。这样才能使得可选链操作符在编译时能够正确转换。 如果你遇到了编译报错，你可以按照以下步骤来解决： 1. 确保你的项目中已经安装了@babel/plugin-proposal-optional-chaining依赖。如果没有安装，你可以使用npm或者yarn来安装它：npm install @babel/plugin-proposal-optional-chaining 或者 yarn add @babel/plugin-proposal-optional-chaining。 2. 打开你的项目中的babel.config.js文件，在plugins数组中添加@babel/plugin-proposal-optional-chaining插件。你可以像下面这样添加它： ``` javascript module.exports = { plugins: [ '@babel/plugin-proposal-optional-chaining' ] } ``` 3. 保存修改并重新编译你的项目。此时，你应该能够使用可选链操作符(?.)而不再遇到编译报错的问题了。 希望以上解决方法对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值