#Ts篇：符号`?.` 、`??` 、 `!` 、 `?: `的用法和区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了#Ts篇：符号`?.` 、`??` 、 `!` 、 `?: `的用法和区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

?.

定义
可选属性操作符
例如：obj?.prop。
如果 obj = null || undefined ====> undefined，

interface Person {
  name: string;
  age?: number;
}
const person1: Person = { name: 'Alice', age: 20 };
const person2: Person = { name: 'Bob' };
console.log(person1.age); // 20
console.log(person2.age); // undefined
console.log(person1.job?.title); // undefined
console.log(person2.job?.title); // undefined

在上面的示例中，
person1.age 和 person2.age 都可能为 undefined，
因为 age 属性是可选的。
而在访问 job.title 属性时，我们使用了可选属性访问操作符 ?.，
如果 person1.job 或 person2.job 为 null 或 undefined，
那么整个表达式的值就是 undefined。
需要注意的是，可选属性访问操作符 ?. 只能用于访问属性，不能用于调用方法。

??

定义
空值合并操作符
作用
这个操作符可以用于判断一个变量是否为 null 或 undefined，
如果是，
则返回一个默认值，
否则返回该变量的值。
返回
可以将两个表达式用??连接起来，
例如：a ?? b。
这样，
如果 a 为 null 或 undefined，
那么整个表达式的值就是 b，
否则表达式的值就是 a。
示例：

const a = null;
const b = 10;
const c = a ?? b;
console.log(c); // 10

在上面的示例中，
a 的值为 null，
因此 c 的值为 b，即 10。
需要注意的是，空值合并操作符 ?? 仅判断变量是否为 null 或 undefined，
对于其他假值（例如 0、‘’、false 等），仍然会被视为真值。
如果需要判断其他假值，
可以使用逻辑或操作符 ||：

const a = '';
const b = 'default';
const c = a || b;
console.log(c); // 'default'

在上面的示例中，
由于 a 的值为 ‘’，被视为假值，
因此表达式 a || b 的值为 b，即 ‘default’。

!

定义
非空断言操作符
作用
这个操作符可以用于断言一个变量
一定
不为 null 或 undefined，
从而避免出现类型错误。

function printLength(str?: string) {
  console.log(str!.length); // 断言 str 一定不为 null 或 undefined
}
printLength('hello'); // 输出 5
printLength(); // 抛出 TypeError 异常

在上面的示例中，
printLength 函数接受一个可选的字符串参数 str，
如果 str 不为 null 或 undefined，
则输出其长度，否则会抛出 TypeError 异常。
由于使用了非空断言操作符 !，因此在访问 str.length 时不会出现编译错误。
需要注意的是，
非空断言操作符 ! 可能会隐藏潜在的错误，因此应该谨慎使用。
如果不能确定一个变量或属性是否为 null 或 undefined，
最好使用安全访问操作符 ?. 或 nullish 合并操作符 ?? 来进行判断，从而避免出现运行时异常。

?：

定义
条件运算符
作用
这个操作符可以用于根据一个条件来返回不同的值。
返回

	interface Person {   
		name: string;   
		age?: number; 
	} 
	let p1: Person = { name: 'Tom' }; 
	// age是可选属性 let p2: Person = { name: 'Jerry', age: 20 }; // age是可选属性

在上面的示例中，
我们定义了一个 Person 接口，
它有两个属性 name 和 age。
其中 age 属性使用 ?: 定义为可选属性。
在使用时，我们可以不传入 age 属性，
或者传入一个数字类型的 age 属性。文章来源地址https://www.toymoban.com/news/detail-474922.html

到了这里，关于#Ts篇：符号`?.` 、`??` 、 `!` 、 `?: `的用法和区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！