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);