前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TS/JS中的特殊符号用法(?/!)、?.、??、??

TS/JS中的特殊符号用法(?/!)、?.、??、??

原创
作者头像
周陆军博客
发布2023-05-07 23:19:54
1.8K0
发布2023-05-07 23:19:54
举报
文章被收录于专栏:前端博客前端博客

之前在学习C#的时候(7年的事情了),依稀记得有????、 ?、 ?: 、?.、?[ ] 一堆符号,记得脑壳疼,没有想到现在js ts 也带上了

C#中 ??、 ?、 ?.、?[ ]

空合并运算符(??)?

用于定义可空类型和引用类型的默认值。

a??b 当a为null时则返回b,a不为null时则返回a本身。 空合并运算符为右结合运算符,即操作时从右向左进行组合的。 如,“a??b??c”的形式按“a??(b??c)”计算。?

NULL检查运算符(?.)

如果对象为NULL,则不进行后面的获取成员的运算

在C# 6.0中,引入了一个 ?. 的运算符,需要注意的是,由于"?.“运算符返回的可以是NULL,当返回的成员类型是struct类型的时候,”?.“和”."运算符的返回值类型是不一样的。

代码语言:javascript
复制
Point?p?=?new?Point(3,?2);
Console.WriteLine(p.X.GetType()?==?typeof(int));?//true
Console.WriteLine(p?.X.GetType()?==?typeof(int?));?//true

"?[]"运算符:

如果数组customers为null,则表达式返回null;否则返回数组访问结果。

代码语言:javascript
复制
int??first?=?customers?[0].Orders.Count();

C# 与typescript 一家亲,这些语法TS也是有的——ES6---4个强大JavaScript运算符(??、??=、?.、?:)

ES6 特殊符号用法

??. 可选运算符

javascript中如果一个值为null、?developer/article/2281762/undefined,而直接访问?会报 Uncaught TypeError: Cannot read properties of ?developer/article/2281762/undefined 异常错误。

可能有的小伙伴会说用三元运算符、或者if判断,但是这种也是可以的,但是在特定情况下会很复杂(如obj.data.person.name)

而.?则完美解决这个问题

代码语言:javascript
复制
obj?.data?.person?.name

?. 可以无限链下去,不论有多少属性,只要有最后可以访问到属性,就会直接赋值最后的属性值。否则当任何一个链出现问题,立刻停止,而后赋值?developer/article/2281762/undefined。

??? 空值合并运算符/非空运算符

?? 双问号后面是默认值(可常量、可变量),?? 是忽视 null ,?developer/article/2281762/undefined 等错误的值

?? 运算符被称为非空运算符。如果第一个参数不是 null/?developer/article/2281762/undefined,将返回第一个参数,否则返回第二个参数

在 ?? 前面没有值得时候会默认 ?? 后边的值(类似于三木运算符中的:后面赋值)。

代码语言:javascript
复制
let?obj?=?{age:?0,?name:?'',?sex:?null};
obj.age????'111';?//?0
obj.name????'111';?//?''
obj.sex????'111';?????//?111
obj.addr????'111';?????//?111

当然是在没有值得时候会默认 ?? 后边的值,但是有了默认值 ,那么 ?? 后的值也就不会在去默认了,也就是变成了 赋默认值。就跟三木运算(let x = 6,y = 2;

z = x>y ? x-y : x+y; )一样,不满足会执行 : 后边的。

给变量设置默认值时,以前常用 ||逻辑或运算符,例如,

代码语言:javascript
复制
let?a?=?obj.a?||?'demo'
let?b?=?obj.a??'demo'

区别在于:??? 运算符允许我们在忽略错误值(如 0 和空字符串)的同时指定默认值

??= 空值赋值运算符

和空值合并运算符??类似(可常量、可变量)

当??=左侧的值为null、?developer/article/2281762/undefined的时候,会将右侧的值赋值给左侧变量。

代码语言:javascript
复制
let?obj?=?{age:?0,?name:?'',?sex:?null,?addr:??developer/article/2281762/undefined};
obj.age???=?'111';?????//?0
obj.name???=?'111';?????//?''
obj.sex???=?'111';?????//?111
obj.addr???=?'111'?;?????//?111

仅当值为 null 或 ?developer/article/2281762/undefined 时,此赋值运算符才会赋值(与上面的非空运算符相关)。

TS特殊符号用法

属性或参数中使用 ?

表示该属性或参数为可选项

代码语言:javascript
复制
function?test(a:string,b?:string){
????//?TODO
}
interface?Test?{
????a:string
????b?:string
}
class?Demo?implements?Test{
????a?=?''
????b?:string
????c?:string
}

作用就是判断这个对象(this.element)下的(Object)下的(value)下的(length)是否为null或者?developer/article/2281762/undefined,

(如果没有加 ?. ,有的时候会报length是null 的错误,或者说 null length 没有定义,然有了?. 就省去了好多麻烦)

当其中一链为null或者?developer/article/2281762/undefined时就返回?developer/article/2281762/undefined,这样即使中间缺少一个属性也不会报错,

变量后使用 !:

表示类型推断排除null、?developer/article/2281762/undefined

代码语言:javascript
复制
let?a:Record<string,?any>?=?{}
let?b:string?=?a['m']!

属性或参数中使用 !:

表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop

参考文章:

ts 特殊符号用法?https://blog.csdn.net/qq_33576343/article/details/84206225

C#中 ??、 ?、 ?: 、?.、?[ ] 问号 https://www.bilibili.com/read/cv14801567

js中?.、??、??=的用法 https://www.jianshu.com/p/5a7adf4f29fa

js语法中 ?. 和 ?? 的含义以及用法说明 https://blog.csdn.net/lzfengquan/article/details/120302244

转载本站文章《TS/JS中的特殊符号用法(?/!)、?.、??、??》, 请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/typescript/2022_0616_8843.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • C#中 ??、 ?、 ?.、?[ ]
    • 空合并运算符(??)?
      • NULL检查运算符(?.)
        • "?[]"运算符:
          • ES6 特殊符号用法
            • ??. 可选运算符
            • ??? 空值合并运算符/非空运算符
            • ??= 空值赋值运算符
          • TS特殊符号用法
            • 属性或参数中使用 ?
            • 变量后使用 !:
            • 属性或参数中使用 !:
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
        http://www.vxiaotou.com