前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:

??符号用于判断左侧值是否为undefined或null, 若值为undefined或null则将右侧值赋值给左侧变量。

const name = obj.name?? 'mx'; // 若obj中存在name则name为obj.name的值否则则为mx。

?.符号用于判断某个对象的某个属性是否存在,若存在则返回该属性值,若不存在则返回undefined。防止引用对象为undefined或null时报错

let obj; // 此时obj未赋值,故为undefined
const name = obj?.name // name为undefined而不会报错。 

?.可以在对象不存在时返回undefined,而??可以在左侧值为undefined时返回右侧的值,因此两者可以结合使用如下

let obj;
const name = obj?.name ?? 'mx'; //由于obj为undefined,因此左侧值为undefined,故返回mx赋值给name

const name = obj?.name || 'mx'; //当然此处使用||也可达成同样效果

!就是将右侧值先转化为bool值后在进行取反,因此对于空对象或者空数组的取反取值为false,因为空对象或空数组转化为bool值为true。

!!则为在一个!将右侧值转化为bool值取反后再取反。

||该运算符取值逻辑为判断时将值转化为bool值判断左侧值为true or false,左侧值为true则直接取左侧值,为false再判断右侧为true则返回右侧值都为false则返回false。

&&该运算符取值逻辑为判断时转化为bool值判断左侧值为true or false,左侧值为false则直接返回false,左侧值为true再判断右侧,右侧为false则仍为false,为true则返回右侧值。

console.log(1 && 2) // 返回2

console.log(1 || 2) // 返回1

?:该运算符通过判断?前面的值为true or false 来决定返回:左右的值。

const name = true ? 'mx' : 'mxa' // 返回mx,若前面值为false则返回mxa

顺便记录一下一些true或false的转换判断。

空对象与空数组在进行bool类型转换时是转化为true值,但在进行number类型转换时转换为0。y因此会有以下现象

console.log(!{} == true); // 判断为false,!{},{}首先转换为true,再取反为false
console.log({} == true);  // 判断也为false,{}转换为0,true转换为1,因此为false

null==undefined比较为true,null以及undefined任意一个单独与true或false==比较取值都为false。

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买