聊聊JavaScript中的可选 (?.)操作符


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍一下JavaScript中的可选 (?.)操作符。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

如何使用null (nullundefined)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。

可以使用嵌套的三元运算符 :

1

const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;

或者使用 if 进行空值检查:

1

2

3

4

let userName = null;

if(response && response.data && response.data.user){

  userName = response.data.user.name;

}

或者更好的方法是使它成为一个单行链接的&&条件,像这样:

1

const userName = response && response.data && response.data.user && response.data.user.name;

上述代码的共同之处在于,链接有时会非常冗长,并且变得更难格式化和阅读。这就是 ?.操作符被提出来的原因,我们改下 ?. 重构上面的代码:

1

const userName = response?.data?.user?.name;

很 nice 呀。

语法

?. 语法在ES2020 中被引入,用法如下:

1

2

3

4

5

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 对象:

1

2

3

4

5

6

7

8

9

10

11

const user = {

  name: "前端小智",

  age: 21,

  homeaddress: {

    country: "中国"

  },

  hobbies: [{name: "敲代码"}, {name: "洗碗"}],

  getFirstName: function(){

    return this.name;

  }

}

属性

访问存在的属性:

阅读剩余部分

相关阅读 >>

关于http前端存储的总结

javascript添加事件的三种方式

javascript引用类型的详细介绍(附示例)

javascript中函数的调用和this的指向介绍(代码)

javascript中什么是字符串

javascript是java语言的脚本形式?

javascript使用alert函数为什么中文会乱码

javascript也属于编程吗

浏览器的事件循环详解

javaweb与javascript区别是什么

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...