雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

JS 中的 ?. 和 ??

2024-09-28 10

1. 可选链操作符 (?.)2. 空值合并操作符 (??)

1. 可选链操作符 (?.)


可选链操作符 允许读取位于连接对象链深处的属性值,而不必明确验证链中的每个引用是否有效

?. 可选链操作符的功能类似于 . 链式操作符,不同之处在于引用为空的情况下不会引起错误,该表达式短路返回值

下面代码运行有错误,原因很简单, user.age 的值是 undefined,从 undefined 中读取 num 属性当然会报错

const user = { name: 'liang' }// liangconsole.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. 空值合并操作符 (??)


在实际开发中,?? 遇到的次数也不是太多,但还是非常有必要知道这个东西用法的

空值合并操作符(??): 只有当左侧为 nullundefined 时,才会返回右侧的数

与逻辑或操作符(||)不同,逻辑或操作符左侧的值为假值时返回右侧操作符。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的问题,比如遇到假值 ''0false

通过以下代码可验证区别,当 user 对象中没有 sex 属性时默认值为 2(0 女 1 男 2 未知)

const user = { name: 'maria', sex: 0 }console.log(user.sex ?? 2); // 0console.log(user.sex || 2);// 2

空值合并操作符 (??)可选链操作符 (?.) 配合使用就非常美妙

console.log(user.age?.num ?? 18);
更新于:5天前
赞一波!

文章评论

评论问答