ES11新特性_可选链操作符---JavaScript_ECMAScript_ES6-ES11新特性工作笔记064

最新推荐文章于 2025-05-27 08:11:14 发布
最新推荐文章于 2025-05-27 08:11:14 发布
阅读量744 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/113564388
本文介绍了JavaScript ES11中引入的可选链操作符（?.），通过示例展示了如何使用该操作符安全地访问深层对象属性，避免因中间层级不存在而导致的错误。在没有可选链操作符时，通常需要使用多个逻辑与运算符（&&）进行链式判断。使用可选链操作符，即使对象路径中某一层不存在，也不会抛出错误，而是返回undefined。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

然后我们去看一下es11提供的这个可选链操作符 

可以看到如果我们有个main方法,然后有个config参数

然后我们调用这个main方法

然后写入,db和cache,传入这个对象.

然后我们之前调用的时候,我们都是

先config && config.db && config.db.host

就是我们先判断config存在不存在,存在就再去盘窜config.db存在不存在,存在就再去

获取config.db.host

 

这样的话可以正常的获取到这个host值.

但是如果我们上面这样写的话,

正常调用main方法,有这个config.db.host的值的时候没问题.正常输出了.

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ES6-ES13学习笔记
IIIIIAN
08-14 1795
ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Proxy如其名， 它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器”在一般情况下，对象的引用是强引用的，这意味着只要持有对象的引用，它就不会被垃圾回收。
JavaScript 笔记1 ES6 新特性 | 解构赋值、模板字符串、Symbol数据类型、Promise、模块化
希望每天都能进步一点点
08-16 663
本篇文章记录了 JavaScript 遵循的 ECMA规范系列中版本变化最大的 ES6 ，通过这些内容可以更好的理解JS的高阶用法，同时进一步熟悉JavaScript 的解构赋值、模板字符串、Symbol数据类型、Promise、模块化等内容，ES6是2015年提出的规范，而最新的规范已达到了 ES12，每年都会更新一次，现在暂时学习 ES6，就可以满足大部分的开发需求。.........
ES11可选链操作符
daisy
02-18 567
想要拿到host需要判断 config是否存在再判断config.db最后才能拿到config.db.host 非常难受 function main(config) { let dbHost = config && config.db && config.db.host console.log(dbHost); //127.0.0.1 } main({ db:{ hos.
Es11 可选链操作符
前端开发小白9527
04-11 404
什么是可选链操作符 语法格式: ?. 适用场景 读取对象深度的属性 我们可以简化判断，不再需要层层判断 含义就是: 如果a 不是undefined <script> // ?. function main(config){ // 正常写法 层层判断 const ballName = config&&config.person&&config.person.hobby&&config.per
全面解析 ES6 新增特性及详细介绍
最新发布
sinat_37775891的博客
05-27 847
本文全面介绍ES6的核心新特性及其应用实例，包括：1）块级作用域变量let/const；2）箭头函数及其this绑定规则；3）模板字符串的多行与插值功能；4）数组/对象解构赋值；5）函数默认参数；6）扩展运算符的数组/对象操作；7）类的定义与继承语法；8）Promise异步处理机制。每个特性都配有典型代码示例，如箭头函数解决this问题、模板字符串插值、Promise链式调用等，帮助开发者快速掌握ES6核心语法提升开发效率。
JS可选链操作符 (?.)
逍湘子
06-23 2626
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有
【ES11(2020)】可选链操作符和空值合并运算符
张营的技术博客
05-13 1015
可选链操作符 Optional chaining 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish) (null或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确
javascript: ES6中的可选链操作符，空值合并运算符等
mosowe
10-08 640
文章目录获取object所有键的值：ES6中的可选链操作符: ?ES6中新出的空值合并运算符: ??Promise并发请求 获取object所有键的值： let obj = { a:1, b:2, c:3 } Object.values(obj) //[1, 2, 3] ES6中的可选链操作符: ? // es5 const name = obj && obj.name; // es6 const name = obj?.name; // obj是已经声明过的 E
ES6+新特性学习笔记与ES2016至ES2020更新概览
在探讨ES6（ECMAScript 2015）以及后续版本ES2016、ES2017、ES2018、ES2019和ES2020等的新特性和改进时，本学习笔记详细记录了ECMAScript标准的演进过程以及其中包含的重要特性。ES6是JavaScript开发中一个重要的...
fe-notes::ledger: 找实习的八股文前端笔记
04-17
这包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔、对象、数组、null和undefined）、作用域（全局和局部）、操作符（赋值、比较、逻辑、三元运算符）以及流程控制（条件语句、循环结构）。...
ES11-可选链和其他知识补充
小余的前端博客
04-11 295
在ES11中，对其进行了标准化，for…循环用于迭代可迭代对象（如数组）的元素。循环用于枚举对象的属性，
ES11中的可选链等语法
Programmer小卫
12-18 1442
我们介绍ES11新特性 这个新特性在判断空值的方面非常简单,相关语法如下。 1、可选链语法(?.) obj?.prop // 如果存在prop则返回属性 obj?.[prop] // 根据obj是否存在prop来执行[]内的表达式 arr?.[index] // 获取arr中的元素当index对应元素存在 func?.(args) // func存在调用 可选链相关语法 //当函数存在时候调用函数 var func=(x)=>{ console.log(x); }; func?
jsES6新语法可选链
G0000227的博客
12-23 1981
语法: 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) ...
ES2020 新语法：可选链操作符( ?. )
棠樾的博客
08-25 966
可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish)(null或者undefined) 的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很...
ES6—55：可选链操作符
Always-Learning
03-10 716
基础用法
ES6-可选链式操作符（?.）
weixin_46479909的博客
03-28 441
可以判断操作符之前属性是否有效，从而链式读取对象的属性或返回 undefined,如果它的上一层是undifiend 则不会去取它的点下面的东西。
【ES2020】ES11新增特性-可选链运算符、空值合并运算符、BigInt
ColdCoder的博客
11-19 847
1. 新增的运算符 1.1 可选链运算符 ?. 可选链运算符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 ?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。 const adventurer = {
ES6 可选链操作符
一尾流莺 半世情缘
12-08 1251
可选链操作符(  ?.  )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 es6可选链 ?. 语法 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值