从零开始学习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);

问号

问号:安全链式调用

  • 表示:这个字段是否存在不确定,如果不存在则提前返回
  • 实际:如果不存在 =》会返回空
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" 
})();
  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值