从零开始学习typescript系列5: typescript特殊符号之感叹号、问号、双问号

snowDreamzzz

于 2024-03-20 09:58:09 发布

阅读量508

点赞数 10

分类专栏： typescript 文章标签： typescript 学习 javascript

本文链接：https://blog.csdn.net/qubes/article/details/136867140

版权

typescript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

感叹号

感叹号：强制链式调用

表示：这个字段一定要存在
实际：如果不存在 =》会运行时报错

function logFun(p: any): void {
    // 真实情况: p.fruite是存在的
    console.log('fruit name:', p.fruit!.name);  // fruit name: banana
    // 真实情况: p是存在的
    console.log('dog:', p!.dog);  // dog: undefined
    // 真实情况: p.dog是不存在的
    console.log('dog name:', p.dog!.name);  // Cannot read property 'name' of undefined
}
const food = {
    fruit: { name: 'banana'}
}
logFun(food);

问号

问号：安全链式调用

表示：这个字段是否存在不确定，如果不存在则提前返回
实际：如果不存在 =》会返回空

function logFun(p: any): void{
    // 真实情况: p.fruite是存在的
    console.log('fruit name:', p.fruit?.name);  // fruit name: banana
    // 真实情况: p是存在的
    console.log('dog:', p?.dog);  // dog: undefined
    // 真实情况: p.dog是不存在的，发现不存在返回undefined. 
    // p.dog?.name 相当于 p.dog && p.dog.name;
    console.log('dog name:', p.dog?.name);  // dog name: undefined
    
}
const food = {
    fruit: { name: 'banana'}
}
logFun(food);

双问号

用途：为空值指定默认值
区别：

|| 操作符: 如果前面变量是 null undefined 0 false，继续执行后面的赋值
?? 操作符: 如果前面变量只有 null undefined, 后面才会继续执行
总结: ?? 更符合后端返回字段为空的情况

(function f1(){
    let a;
    let b = a || '1'; 
    let c = a ?? '1';
    console.log(`f1: a=${a}`); // "f1: a=undefined" 
    console.log(`f1: b=${b} c=${c}`); // "f1: b=1 c=1" 
})();

(function f2(){
    let a=0;
    let b = a || '1';
    let c = a ?? '1';
    console.log(`f2: a=${a}`); // "f2: a=0" 
    console.log(`f2: b=${b} c=${c}`); // "f2: b=1 c=0" 
})();