可选链运算符(?.)的使用
  rWRQK7tE41pz 2023年11月01日 55 0

作用:读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空  (nill 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

使用:

var obj = { a: 1, b: 0 };
console.log(obj.a, obj.b)
console.log(obj?.a) // 1
console.log(obj?.[b]) // 0
console.log(obj?.c) // undefined
console.log(obj?.b || '') // ""
console.log(obj?.b ?? '') // 0

具体场景:

1、使用ref调用vue组件函数,但组件v-if时,使用?.运算符可以进行代码简化;

2、多层对象(Object)嵌套时使用链式操作符(.)进行获取值时使用 ?. 可以确保获取的数据不会报错(Cannot read properties of undefined)

遇到的问题:

在一般情况下要设置默认值做法是 undefined || "xxx";

在可选链运算符时 应该使用 ?? 而不是 || 原因是  

console.log(obj?.b || '') // ""
console.log(obj?.b ?? '') // 0
在 || 的判断中 0会被转换为 false,输出后面的空字符串,所有需要使用 ??(空值合并运算符 null,undefined)
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  f18CFixvrKz8   2024年05月20日   93   0   0 JavaScript
  fxrR9b8fJ5Wh   2024年05月17日   53   0   0 JavaScript
  2xk0JyO908yA   2024年04月28日   41   0   0 JavaScript
rWRQK7tE41pz
作者其他文章 更多