typescript使用 ?. ?? ??= 运算符的方法步骤

 更新时间:2024年01月04日 16:14:23   作者:겐호 3  
本文主要介绍了typescript使用 ?. ?? ??= 运算符的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

可选链运算符 (?.)

用于访问可能为 null 或 undefined 的属性或方法,以避免出现异常错误。如果使用 . 运算符来访问一个可能为 null 或 undefined 的值,会导致运行时错误。而使用 ?. 运算符,如果该值为 null 或 undefined,则表达式会短路,返回 undefined,而不会抛出异常。
例如:

let obj = { foo: { bar: 42 } };
let value = obj?.foo?.bar; // 如果 obj 或 obj.foo 或 obj.foo.bar 为 null 或 undefined,value 将为 undefined,否则为 42

空值合并运算符 (??)

用于给定一个默认值,当一个表达式的值为 null 或 undefined 时,返回默认值。如果一个变量或表达式的值为 null 或 undefined,使用 ?? 运算符可以提供一个备选值。
例如:

let x = null;
let y = x ?? 5; // 如果 x 为 null 或 undefined,y 将为 5,否则为 x 的值

空值合并赋值运算符 (??=)

用于将默认值赋给一个变量,当该变量的值为 null 或 undefined 时。如果一个变量的值为 null 或 undefined,可以使用 ??= 运算符将一个默认值赋给该变量。
例如:

let x = null;
x ??= 5; // 如果 x 为 null 或 undefined,将把 5 赋给 x

??和 ||比较相似

?? 和 || 区别

假值:false、0、空字符串、null、undefined 等
?? 判断左侧操作数为null或undefined时,返回右侧操作数
|| 判断左侧操作数为’假值'时,返回右侧操作数

let a:any;
let b = '1111';
let c = null;
let d:any = 0;
let e;
e ??= a?.b ?? c ?? d?.a ?? b;

a?.b:这是可选链运算符 ?. 的使用,它尝试访问变量 a 的属性 b。如果 a 为 null 或 undefined,则表达式返回 undefined。
a?.b ?? c:这是空值合并运算符 ?? 的使用,它判断左侧操作数 a?.b 是否为 null 或 undefined。如果是,则返回右侧操作数 c 的值。否则,返回左侧操作数 a?.b 的值。
a?.b ?? c ?? d?.a:继续使用空值合并运算符 ??,判断前一个表达式的结果 a?.b ?? c 是否为 null 或 undefined。如果是,则返回右侧操作数 d?.a 的值。否则,返回前一个表达式的结果。
a?.b ?? c ?? d?.a ?? b:再次使用空值合并运算符 ??,判断前一个表达式的结果 a?.b ?? c ?? d?.a 是否为 null 或 undefined。如果是,则返回右侧操作数 b 的值。否则,返回前一个表达式的结果。
根据上述表达式的逻辑,以下是对应的执行过程:

a 的值为 undefined。
a?.b 的结果为 undefined。
a?.b ?? c 的结果为 null,因为左侧操作数为 undefined,右侧操作数为 null。
a?.b ?? c ?? d?.a 的结果为 0,因为左侧操作数为 null,右侧操作数为 d?.a,而 d 的值为 0。
a?.b ?? c ?? d?.a ?? b 的结果为 '1111',因为左侧操作数为 0,右侧操作数为 '1111'。
最终,变量 e 的值被赋为 '1111'。

到此这篇关于typescript使用 ?. ?? ??= 运算符的方法步骤的文章就介绍到这了,更多相关typescript运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • js模块加载方式浅析

    js模块加载方式浅析

    这篇文章主要为大家详细介绍了js模块加载方式的初级学习资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript 数组基本操作全解

    JavaScript 数组基本操作全解

    今天这篇文章就是来和大家详细聊聊JavaScript中数组的基本操作,很多语言都是在数组这有个分水岭。听懂了接下来就很容易,听不懂就难办了,大家要认真看哟。希望大家读完有所收获,那我辛苦码字也就值了
    2022-02-02
  • 完美实现js焦点轮播效果(一)

    完美实现js焦点轮播效果(一)

    这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript 程序编码规范

    JavaScript 程序编码规范

    这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。
    2010-11-11
  • JS图片定时翻滚效果实现方法

    JS图片定时翻滚效果实现方法

    这篇文章主要介绍了JS图片定时翻滚效果实现方法,涉及javascript结合时间函数实现页面元素动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • uni-app实现点赞评论功能

    uni-app实现点赞评论功能

    这篇文章主要介绍了uni-app实现点赞评论功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JS实现下拉菜单赋值到文本框的方法

    JS实现下拉菜单赋值到文本框的方法

    这篇文章主要介绍了JS下拉菜单赋值到文本框的方法,涉及javascript页面元素的选择与赋值的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js动态删除div元素基本思路及实现代码

    js动态删除div元素基本思路及实现代码

    这篇文章主要介绍了js动态删除div元素基本思路及实现代码,需要的朋友可以参考下
    2014-05-05
  • JavaScript判断是否为数组的3种方法及效率比较

    JavaScript判断是否为数组的3种方法及效率比较

    这篇文章主要介绍了JavaScript判断是否为数组的3种方法及效率比较,本文直接给出运行效果和实现代码,需要的朋友可以参考下
    2015-04-04
  • JS实现的Unicode编码转换操作示例

    JS实现的Unicode编码转换操作示例

    这篇文章主要介绍了JS实现的Unicode编码转换操作,结合完整实例形式分析了javascript实现Unicode编码转换的具体操作技巧,需要的朋友可以参考下
    2017-04-04

最新评论