JS 可选链的三种形式浅谈

最新推荐文章于 2024-06-05 13:49:17 发布
最新推荐文章于 2024-06-05 13:49:17 发布
阅读量322 收藏
点赞数 1
分类专栏： 编程语言 JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45707610/article/details/130902755
版权

可选链的三种形式

咱们可以使用以下3种形式的可选链。

第一种： object?.property 用于访问静态属性：

1

2

const object = null;

object?.property; // => undefined

第二种：object?.[expression] 用于访问动态属性或数组项：

1

2

3

4

5

6

7

// 其一

const object = null;

const name = 'property';

object?.[name]; // => undefined

// 其二

const array = null;

array?.[0]; // => undefined

第三种:object?.([arg1, [arg2, ...]]) 执行一个对象方法

1

2

const object = null;

object?.method('Some value'); // => undefined

将这三种组合起来创建一个可选链：

1

const value = object.maybeUndefinedProp?.maybeNull()?.[propName];

来源：微点阅读  https://www.weidianyuedu.com

xiaoweids
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 可选链的三种形势及好处
xiaoweids的博客
06-16 154
JS的一些特性极大地改变了咱们的编码方式。从ES6年开始，对咱们代码影响最大的特性的解 、箭头函数、类和模块系统。到2019年8月，一个新的可选链提案已经进入第三阶段，这是一个很好的改进。可选链接改变了从深层对象结构访问属性的方式。来看看这是又是什么骚操作。
Javascript 可选链
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
08-22 1916
可选链非常有用，并且得到广泛支持（不包括 Internet Explorer）。它几乎可以与属性、数组或函数的任意组合一起使用，具体取决于返回类型。obj?obj[index]?.property。
JavaScript中的可选链——通过示例解释
晓风晓浪
02-23 1268
可选链是在ECMAScript 2020中引入的一项功能，它简化了在中间属性可能为null或undefined时访问嵌套对象或数组的属性和方法的过程。可选链运算符（?.）允许您在不需要显式null或undefined检查的情况下访问属性或方法。如果链中的任何中间属性为null或undefined，则表达式会短路，并将结果设置为undefined。在编程中，“短路”是指当沿着正在访问的属性或方法链遇到null或undefined值时，表达式的评估会立即停止的行为。
JavaScript 的可选链（Optional Chaining）|可选链运算符?.
最新发布
开心杨的个人博客
06-05 312
JavaScript 的可选链（Optional Chaining）是 ES2020 引入的一种语法特性，用于简化深层嵌套对象属性的访问。使用可选链可以避免在访问对象的嵌套属性时遇到undefined或null导致的错误。具体来说，可选链运算符（?）允许你在访问对象的属性或调用对象的方法时，如果对象的某个部分是null或undefined，运算会短路并返回undefined而不会继续访问后续属性以及抛出错误。
JavaScript学习-可选链 (Optional Chaining)“?“
thq_kuqi的博客
01-27 568
JavaScript学习-可选链 (Optional Chaining)"?
js中可选链的使用
weixin_45238152的博客
03-08 2224
可选链(.?) 相信大家应该都写过类似的代码： let arr = res && res.data && res.data.list 可选链写法 let arr = res?.data?.list 总结 可选链 这种写法就是防止报错 判断值是否为null或者undefined 空值合并运算符?? console.log(1 || "xx") //1 console.log(0 || "xx") //xx console.log(null || "xx")
浅谈js promise看这篇足够了
10-18
`.then()`接受两个参数，第一个是成功回调，第二个是可选的错误回调： ```javascript promiseInstance .then(result => { // 处理成功情况 }) .catch(error => { // 处理错误情况 }); ``` `.then()`方法返回...
浅谈js中的in-for循环
11-22
在JavaScript中，`for...in`循环是一种遍历对象属性的机制，而非传统的数组循环方式。这个循环结构常用于迭代对象的所有可枚举属性，包括从原型链继承的属性。在给定的描述中，虽然没有直接使用`for...in`循环，但...
浅谈JavaScript异步编程
11-26
在padInOut函数中，作者添加了一个可选的回调函数参数，当padInOut的异步操作完成时，如果存在回调函数，就会调用它。这样，通过在调用padInOut时传入allPads，可以确保在padInOut执行完毕后调用allPads，实现了预期...
浅谈JS日期(Date)处理函数
10-25
4. `setHours(hour, [minute], [second], [millisecond])`：设置小时数，可选地设置分钟、秒和毫秒。 5. `setMinutes(minute, [second], [millisecond])`：设置分钟，可选地设置秒和毫秒。 6. `setSeconds(second, ...
JS 特性：可选链（?.）
MYG_G
04-14 5002
可选链操作符 参考文献： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining https://blog.csdn.net/qq_45534034/article/details/104273131 什么是可选链 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为
手机端js联动选择插件，界面美观，可连接数据库
11-22
最近做手机端项目用到的选择插件，分享给大家，特别好用的手机端js联动选择插件，支持单项，多项，双项，以及级联。界面美观，代码易懂，不像市面上那死板的插件，可连数据库直接套用。
JS中的可选链操作符（?.）、空值合并运算符（??）
m0_60312580的博客
04-13 1101
注意：可选链操作符只能在运行时检查对象是否为 null 或 undefined ，并在对象为 null 或 undefined 时返回 undefined，而不会报错。它与或运算符（||）有所不同，或运算符在变量值为 false 时也会返回默认值，而?js中的可选链接操作符?. 是ECMAScript2020 引入的一种语法，用于简化对可能为 null 或 undefined 的对象属性或方法的访问。只有在变量的值为 null 或 undefined 时才返回默认值，对于其他为 false 的值，?
【前端】JavaScript 中强大的可选链
m0_60721584的博客
03-18 984
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-4FC2Jteu-1710706143253)]
可选链操作符.?
qq_45237335的博客
11-11 494
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有
JavaScript - 可选链、空值合并运算符
Moon Star
10-30 542
可选链操作符 可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。 通过连接的对象的引用或函数可能是undefined或null时，可选链操作符提供了一种方法来简化被连接对象的值访问。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。 Example： let nestedProp = obj.first && obj.first.second; 为了避免报错，在访问obj.first.second...
JS可选链操作符 (?.)
潇湘子的博客
06-23 2430
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有
js的【可选链(.?)】，【空值合并运算符(??)】，【空值赋值运算符(??=)】用法和含义
态度决定一切
07-11 285
js中可选链，空值合并运算符，空值赋值运算符，用法和含义
js 可选链操作符
05-25
JavaScript 的可选链操作符（Optional Chaining Operator）是一种新的语言特性，它可以让我们在访问对象的属性或方法时，不必担心访问的对象是否为 null 或 undefined。这个操作符是一个问号（?）和一个点号（.）组成的。它的语法形式如下： ``` obj?.prop // 访问 obj.prop，如果 obj 为 null 或 undefined，则返回 undefined obj?.[expr] // 访问 obj[expr]，如果 obj 为 null 或 undefined，则返回 undefined arr?.[index] // 访问 arr[index]，如果 arr 为 null 或 undefined，则返回 undefined func?.(args) // 调用 func(args)，如果 func 为 null 或 undefined，则返回 undefined ``` 下面是一个例子： ``` const user = { name: 'Alice', address: { city: 'Shanghai', street: 'Nanjing Road' } }; console.log(user?.address?.city); // 'Shanghai' const user2 = null; console.log(user2?.address?.city); // undefined ``` 在上面的例子中，我们使用可选链操作符来访问 user 对象的 address 对象的 city 属性。即使 user 对象为 null 或 undefined，也不会抛出异常，而是返回 undefined。 需要注意的是，可选链操作符是 ES2020（也称为 ES11）引入的新特性，因此在一些老的浏览器和 Node.js 版本中可能不支持。如果要使用可选链操作符，需要确保你的运行环境支持它。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值