JS 中的 ?. 和 ??
2024-09-28
10
1. 可选链操作符 (?.)2. 空值合并操作符 (??)
1. 可选链操作符 (?.)
可选链操作符 允许读取位于连接对象链深处的属性值,而不必明确验证链中的每个引用是否有效
?.
可选链操作符的功能类似于 .
链式操作符,不同之处在于引用为空的情况下不会引起错误,该表达式短路返回值
下面代码运行有错误,原因很简单, user.age
的值是 undefined
,从 undefined
中读取 num
属性当然会报错
const user = { name: 'liang' }
// liang
console.log(user.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'num')
console.log(user.age.num);
上面代码抛出的错误会导致后面的程序无法执行,有种场景,即使 num
读取不到,也要让程序正常执行,应该怎么做 ?
我们可以使用 ?.
操作符解决这个问题:
此时 user.age.num
有值的话会正常输出,找不到时返回 undefined
而不是直接抛出错误异常
console.log(user.age?.num);
当找不到 num
时,我们想要设置个默认值,可以配合 ??
使用
console.log(user.age?.num ?? 18);
2. 空值合并操作符 (??)
在实际开发中,??
遇到的次数也不是太多,但还是非常有必要知道这个东西用法的
空值合并操作符(??): 只有当左侧为 null
或 undefined
时,才会返回右侧的数
与逻辑或操作符(||
)不同,逻辑或操作符左侧的值为假值时返回右侧操作符。也就是说,如果使用 ||
来为某些变量设置默认值,可能会遇到意料之外的问题,比如遇到假值 ''
、0
、false
通过以下代码可验证区别,当 user 对象中没有 sex 属性时默认值为 2(0 女 1 男 2 未知)
const user = { name: 'maria', sex: 0 }
console.log(user.sex ?? 2); // 0
console.log(user.sex || 2);// 2
空值合并操作符 (??) 和 可选链操作符 (?.) 配合使用就非常美妙
console.log(user.age?.num ?? 18);
更新于:5天前赞一波!
相关文章
- JS 的 apply 方法
- JS 字符串和数组相互转换
- JS 数组去重的多种方法
- JS 函数中的 arguments 类数组对象
- 介绍Js简单的递归排列组合
- Node.js 软件包管理工具 (npm)
- JS 性能优化之防抖
- JS 性能优化之节流
- JS 数组方法 every 和 some 的区别
- JS 正则表达式常用方法
- JS 数组详解【编程笔记】
- 一款轻量级前端框架Avalon.Js
- js判断浏览器类型
- JS ES6 模块化开发入门
- 常用js图表插件推荐
- js正则验证url格式
- JS实现类似文本contains的方法,用indexOf实现
- js如何获取urlrefer
- js对象自动属性绑定html模版插件
- 常用js表单验证插件推荐
文章评论
评论问答