现代Javascript教程 - 可选链'?' & 空值合并运算符 '??'

Tomorrowed
148 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

学习链接

简介

可选链 ？

可选链作用：

  • 如果访问的内容为undefined，会报错
  • 给该值添加一个 ？，可以避免这个错误，返回undefined

可选链使用场景

  • 从后台获取数据，写入dom 中，比如图片的url
  • dom是先加载的，这时候，后台数据还没有加载到 - 当前值就是undefined
  • 也有可能后台没有当前值（没有当前图片的url） - 也是undefined
  • 这样会报错
  • 就可以用可选链进行判断了。（可选链，还可以三元运算，||，&& 来判断）

可选链实际使用

  • 写在变量后面
  • 如果参数不存在，也不会报错，返回undefined
  • 短路运算，如果左边的不存在，也不会往后面走了！
  • 可以用于（获取参数，获取dom，使用方法）
  • 如果不存在，不会报错 - （不可以滥用，不然不知道错误在哪里。。）
// 可选链 获取参数 - 对象
let user = {}
alert( user?.address?.street ); // 返回undefined
alert( user?.[key])


// 可选链 获取dom
// 如果没有该dom， 返回undefined
let html = document.querySelector('.elem')?.innerHTML;

// 可选链 使用方法
let userGuest = {}
userAdmin.admin?.() // 没有该方法的话，啥也不发生。

可选链使用前提

  • ? 问号前面的变量必须存在，

image.png

可选链和 &&，三元的比较

  • 都能用于判断 是否为undefined。。
  • 可选链更优雅
  • 写的代码更少
  • 低版本浏览器，可能不兼容。。。
// 如果值不存在的判断 - 为什么要判断，因为读取undefined的数据会报错。。。

let user = {}

user?.address?.street // undefined

user && user.address && user.address.street // undefined（不报错）

user ? user.address ? user.address.street : null : null // null

空值合并运算符 ？？

空值运算符作用

  • 用于判断数据
  • 可选链 - 判断当前值是否存在（undefined）- 避免报错
  • 空值运算符 - 判断真假 - （null 或 undefined 为假，其他都是真）

image.png

空置运算符使用场景

  • 提供默认值
let user
alert(user ?? '111') // 111

let user = 'FFFFFF'
alert(user ?? '111') // FFFFF

和 || 的区别

  • || 不能区分 （false， 0，"", null / undefined）
  • || 找的的第一个有值的
  • 使用 ?? 的话，false，0，""都能返回到了！(空字符串，也有值！返回空字符串。。。)

image.png

空值运算符优先级

  • 优先级较低，要加（）

空值合并运算符在 = 和 ? 运算前计算，但在大多数其他运算（例如 + 和 *）之后计算。

image.png

  • 和 && ，|| 一起使用
  • 要加（）

image.png

总结

最近获取后台数据的时候，用到了！就是没想到可以用可选链，还有，问题出在，后台数据还是空的的时候，基础要多看看。。。。

  • 可选链 - 如果值不存在 - 不报错 - 使用后台数据的时候用到了，这个不存在，指的是，有可能数据为空，也有可能是数据还没来。。。
  • 空置合并运算符，主要是可以判断 false，0，空字符串。如果需要这些值，可以判断。。一般都是转成字符串处理的。。

趁年少 别今朝 启程踏遍荒草 告别平凡 寻觅逍遥

avatar
文章
阅读
粉丝