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

感叹号

感叹号：强制链式调用

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

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);
1
2
3
4
5
6
7
8
9
10
11
12

问号

问号：安全链式调用

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

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

双问号

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

• || 操作符: 如果前面变量是 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" 
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15