可选链的使用和其他补充

最新推荐文章于 2022-09-28 17:15:43 发布
最新推荐文章于 2022-09-28 17:15:43 发布
阅读量137 收藏
点赞数
分类专栏： TypeScript 文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51614564/article/details/125785667
版权
这篇博客介绍了JavaScript ES11中的可选链操作符?.，该操作符允许开发者在访问深层嵌套的对象属性时，如果路径中的某一部分不存在，会返回undefined，而不会抛出错误。通过示例`console.log(info.aaa?.name)`，解释了如何安全地获取可能不存在的属性，使得代码更加健壮。
摘要由CSDN通过智能技术生成

可选链事实上并不是TypeScript 独有的特性，他是ES11 中增加的特性：

  • 可选链使用可选链操作符 ?.  ；
  • 它的作用是当对象的属性不存在时，会短路，直接返回undefind,如果存在，才会继续执行 
    consolo.log(info.aaa?.name) // aaa 如果有值就取,没有值就不取

要成为光的女人
关注
专栏目录
【云原生】Prometheus整合Alertmanager告警规则使用详解
congge
07-14 6637
Prometheus整合Alertmanager配置告警规则使用详解
ts踩坑！使用可选链 ?.处理可能遇到的 undefined 或 null 值的情况，但是仍然收到一个关于可能为 undefined 的警告！
最新发布
MtangEr的博客
07-25 439
使用可选链 ?.处理可能遇到的 undefined 或 null 值的情况，但是仍然收到一个关于可能为 undefined 的警告！
JS 查漏补缺之可选链——?.
sSurene的博客
06-30 101
引入 举个例子，假设我们有很多个user对象，其中存储了我们的用户数据。 我们大多数用户的地址都存储在user.address中，街道地址存储在user.address.street中，但有些用户没有提供这些信息。 在这种情况下，当我们尝试获取user.address.street，而该用户恰好没提供地址信息，我们则会收到一个错误： let user = {}; // 一个没有 "address" 属性的 user 对象 alert(user.address.st...
ts基础教程(四)
冷月心的博客
03-11 2440
ts基础教程(四)
ts 类型体操 Chainable Options 可链式选项
老司机的后备箱
09-28 786
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
TypeScript基础之非空断言操作符、可选链运算符、空值合并运算符
zxl1990_ok的博客
06-10 4062
先看以下代码： 对于以上代码， TypeScript编译器会提示以下错误信息： 要解决以上问题，我们可以加个条件判断： 此外， 可以使用TypeScript2.0中提供的非空断言操作符()。 语法非空断言操作符操作符 可以用于断言操作对象是非 null 和非 undefined 类型。即： 将从 值域中排除 和 。所以以上代码可以改造为： 看下编译结果： 可以看出非空断言操作符从编译生成的JS代码中移除掉了， 如果handler函数调用时传入或时，会出现以下运行时错误： 所以在实际使用时需要注意。
js代码-可选异常捕获绑定示例
07-14
.()` 使用了可选链操作符（`?.`）。如果`somePropertyThatDoesNotExist`不存在，表达式会立即停止执行，并返回`undefined`，而不是抛出错误。然后，由于没有错误被抛出，`catch`块不会执行，程序将继续正常运行。 ...
cs61a:可选练习
03-15
【标题】"cs61a:可选练习" 指的是加州大学伯克利分校计算机科学课程CS61A的补充练习。这门课程主要关注编程和计算思维，使用Python语言作为教学工具。"可选练习"意味着这些是额外的、非强制性的练习题目，旨在帮助...
新能源汽车行业投资策略：行业持续景气高企，产业链分化优中选优.pdf
08-01
新能源汽车行业投资策略可概述为行业持续景气、产业链优中选优。投资要点涵盖双碳背景下全球新能源汽车迎来历史机遇、智能电动驱动的新一轮投资机会、全球共振供需两旺导致龙头溢价等。以下是新能源汽车行业投资策略...
C/C++的编译和链接过程
u012138730的专栏
06-03 8272
cl.exe和link.exe分别是visual studio 中的编译器和链接器 配置属性中的【c/c++】（设置编译的一些选项） 和 【链接器】选项页中，最后的那个命令行汇总了所有生效的设置，就是最终执行的命令行 配置属性中的VC++ 目录用于设置各个路径，相当于设置环境变量PATH（搜可执行文件的路径）： INCLUDE（搜include中文件的路径） LIBPATH（搜使用usin...
vue2+TS项目运行和打包错误
lyn1772671980的博客
06-24 1514
vue2.0+TS项目运行和打包突然报如下问题，感觉像是babel不支持TS可选链的写法，百度了半天没有找到解决方案。最后查了一下babel的插件库，在项目配置文件：babel.config。js中加上对象的插件库就行:"@babel/plugin-proposal-optional-chaining"...
TypeScript 可选链初体验
weixin_38854950的博客
05-31 365
TypeScript 3.7的新功能中，最受关注的就是可选链 (Optional Chaining)了，可以说是彻底解决了多层级嵌套对象的属性访问时的判断苦恼，赶快来尝尝看香不香。 下面是开发中会碰到的一个典型场景，我们从后端接口拿到一个返回对象： const apiResult = { data: { Response: { code: 0, total: 0, List: null, }, }, }; 这是一个列表的接口，但我们看到..
TypeScript 3.7附带可选的链接
cxu0262的博客
05-20 542
TypeScript 3.7是Microsoft类型化JavaScript的超集的最新版本，现已普遍提供。 新的生产版本具有可选的链接，ECMAScript功能使开发人员可以在遇到null或undefined值时停止运行表达式。 可选链接使用新的?. 用于可选属性访问的运算符。 还包括其他两个操作：可选元素访问，用于访问非标识符属性（例如数字和任意字符串），以及可选调用，用于在条件表达式不...
使用可选链？和双问号？？
weixin_43623017的博客
04-28 1924
Babel为我们提供了语法转化的能力，使我们能够体验到超前的语法！ 什么是可选链? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 当访问多层对象属性(如o.a.b)时，如果属性a为空，则会报引用错误 为此我们不得不这么处理： const c = o.a &a...
javascript Optional chaining：可选链操作符（?.）的介绍与使用
一枚不断学习的小码农一枚~
04-26 1289
javascript可选链接操作符(?.)，检查属性链中是否存在某个成员，为预防访问不存在或者为空的变量时程序报错，可使程序更短更简洁。 例：有如下对象 let person = { name: 'joy', age: 18, address: { // country: 'CHINA', // city: { // city: 'beijing', // area: 'chaoyang' }, }, getInfo: function() { return `${th
可选链操作符的使用
weixin_48969871的博客
11-01 699
官网定义： 可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish)(null或者undefined) 的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。 优点：当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定...
js中可选链的使用
weixin_45238152的博客
03-08 2271
可选链(.?) 相信大家应该都写过类似的代码： 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")
巧用可选链
maogugu0319的博客
05-06 392
可选链操作符?.能够去读取一个被连接对象的深层次的属性的值而无需明确校验链条上每一个引用的有效性。?.运算符功能类似于.运算符，不同之处在于如果链条上的一个引用是nullish(null或undefined)，.操作符会引起一个错误，?.操作符取而代之的是会按照短路计算的方式返回一个undefined。当?.操作符用于函数调用时，如果该函数不存在也将会返回undefined。 当访问链条上...
快速掌握ES2020新特性：可选链与空位合并操作符
而使用可选链操作符，我们可以简化为： ```javascript let nestedProp = obj?.first?.second; ``` 如果obj、obj.first中的任何一项为null或undefined，表达式将立即停止并返回undefined，避免了程序异常。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值