您现在的位置是:首页 > Javascript
当前栏目
巩固一下 JS 可选 (?.)操作符号,原来函数也可以用可选写法,又学到了!
2023-03-09 22:07:00 时间
可选的链接?.操作符用于使用隐式空检查访问嵌套对象属性。
概述
如何使用null (null和undefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。
可以使用嵌套的三元运算符 :
- const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;
或者使用 if 进行空值检查:
- let userName = null;
- if(response && response.data && response.data.user){
- userName = response.data.user.name;
- }
或者更好的方法是使它成为一个单行链接的&&条件,像这样:
- const userName = response && response.data && response.data.user && response.data.user.name;
上述代码的共同之处在于,链接有时会非常冗长,并且变得更难格式化和阅读。这就是 ?.操作符被提出来的原因,我们改下 ?. 重构上面的代码:
- const userName = response?.data?.user?.name;
很 nice 呀。
语法
?. 语法在ES2020 中被引入,用法如下:
- obj.val?.pro // 如果`val`存在,则返回`obj.val.prop`,否则返回 `undefined`。
- obj.func?.(args) // 如果 obj.func 存在,则返回 `obj.func?.(args)`,否则返回 `undefined`。
- obj.arr?.[index] // 如果 obj.arr 存在,则返回 `obj.arr?.[index]`,否则返回 `undefined`。
使用?.操作符
假设我们有一个 user 对象:
- const user = {
- name: "前端小智",
- age: 21,
- homeaddress: {
- country: "中国"
- },
- hobbies: [{name: "敲代码"}, {name: "洗碗"}],
- getFirstName: function(){
- return this.name;
- }
- }
属性
访问存在的属性:
- console.log(user.homeaddress.country);
- // 中国
访问不存在的属性:
- console.log(user.officeaddress.country);
- // throws error "Uncaught TypeError: Cannot read property 'country' of undefined"
改用 ?. 访问不存在的属性:
- console.log(user.officeaddress?.country);
- // undefined
方法
访问存在的方法:
- console.log(user.getFirstName());
- // 前端小智
访问不存在的方法:
- console.log(user.getLastName());
- // throws error "Uncaught TypeError: user.getLastName is not a function";
改用 ?. 访问不存在的方法:
- console.log(user.getLastName?.());
- // "undefined"
数组
访问存在的数组:
- console.log(user.hobbies[0].name);
- // "敲代码"
访问不存在的方法:
- console.log(user.hobbies[3].name);
- // throws error "Uncaught TypeError: Cannot read property 'name' of undefined"
改用 ?. 访问不存在的数组:
- console.log(user.dislikes?.[0]?.name);
- // "undefined"
?? 操作符
我们知道 ?. 操作符号如果对象不存在,刚返回 undefined,开发中可能不返回 undefined 而是返回一个默认值,这时我们可以使用双问题 ?? 操作符。
有点抽象,直接来一个例子:
- const country = user.officeaddress?.country;
- console.log(country);
- // undefined
需要返回默认值:
- const country = user.officeaddress?.country ?? "中国";
- console.log(country);
- // 中国
~完,我是刷碗智,SPA走起来,下期见!
作者:Ashish Lahoti 译者:前端小智 来源:CSS-Tricket
原文:https://codingncoepts.com/javascript/optional-chaining-opeator-javascript/
本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?