JS和TS中常用特殊字符

JS特殊运算符

链判断运算符(安全导航符，可选链)（?.）

var res = {
    }
console.log(res && res.data && res.data.name);  //undefined
//判断属性的下层对象是否存在，以上写法可以，但是一旦读取的属性太多，写起来繁琐。
console.log(res ?. data ?. name ) ;  //undefined

原理：判断左侧对象是否为null或undefined，如果是就返回undefined
res?.data相当于：res == null ? undefined : res.data

<img [src]="pictureDatas[0]?.pictureUrl" useImg [spinner]="true"></img>

如果pictureDatas[0]有值pictureUrl，就会取到里面的pictureUrl。
如果pictureDatas[0]为null或undefined，页面渲染加载的时候也不会报错。

空值判断运算符(??)

console.log(value ? value : ‘空值’)  // ’ ’和0也会算成空
console.log(value ?? ‘空值’)
let a = '';
console.log(a ?? '空')  // ''

只有运算符左侧的值为null或undefined时，才会返回右侧的值。否则返回左侧的值。

TS特殊运算符

非空断言操作符（!.）

可以用于断言操作对象是非 null 和非 undefined 类型.

console.log(config!.name)   //name
如果name在config里面一定存在，那么ts就不会报错。

可选参数(?: )

在ts中，它可以把某个属性声明为可选的。（可选参数与默认参数一定要放在必选参数之后声明。）

Interface Person {
    
	id: number;
	name: string;
	age?: number;   //可选属性
}

空值判断运算符(??)

同JS

强制转化为bool值(!!)

!!是将表达式强制转化为bool值的运算，运算结果为true或false，表达式是什么值，结果就是对应的bool值，不再像！取非。

if(!!a){
       //相当于if(a!=null && typeof(a)!=undefined && a!=’’)
	//a有内容才执行的代码... 
}
!!false=false;    //要注意false和“false” 的区别
!!"false"=true;
!!true=true;
!!(NaN || undefined || null || 0 || ' ')=false;
var o={
    flag:true}; var test=!!o.flag;//等效于var test=o.flag||false; alert(test);