Typescript中的问号点(?.)是什么意思？

最新推荐文章于 2024-12-09 10:42:46 发布

原创最新推荐文章于 2024-12-09 10:42:46 发布 · 9.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端 #html #react #全栈

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍TypeScript中问号点(?.)操作符的使用方法及其优势。通过示例对比展示了当处理可能为null或undefined的对象属性时，问号点如何简化代码并提高可读性。

问题

Typescript中的感叹号点、问号点是什么意思？我刚入坑react项目的时候看别人代码就看到这样的写法，以开始是懵逼的哈哈哈哈，毕竟是个小白，然后吭哧吭哧的百度查资料，最后发现了问号点(?.)奥义哈哈哈。

例子

data入参可能为null,undefined，通常我们的写法是直接上if判断啥的，然后再取data中的属性，但是有了问号点(?.)写法就简单很多了，看下面例子：

1.typescript写法：

//1.data可能为null,undefined , row也可能为null,undefined
//2.假设data完整结构 {row:{name:'aaa'}}
function getData(data: any){
	let name = data?.row?.name
}

2.普通写法

//1.data可能为null,undefined , row也可能为null,undefined
//2.假设data完整结构 {row:{name:'aaa'}}
function getData(data: any){
	let name;
	if (data && data.row) {
		name = data.row.name
	}
}

从上面写法可以看出来问号点(?.)的写法其实等价于例2的if判断、三元运算符（let a = b == null ? null : b.a）