前端常用判断符号??，?.?，!?，!!?，||?，&&，?:用法示例

??符号用于判断左侧值是否为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。

?. 和 ?? 的区别

• ?. 是可选链运算符，用于访问一个可能为空或者未定义的对象的属性，如果对象为空或者未定义，它会返回 undefined，而不会抛出错误。 例如，如果 obj 是一个对象，那么 obj?.name 会返回 obj 的 name 属性，如果 obj 是 null 或者 undefined，那么 obj?.name 会返回 undefined。
• ?? 是空值合并运算符，它用于提供一个默认值，当左边的表达式为 null 或者 undefined 时，它会返回右边的表达式的值，否则返回左边的表达式的值。例如，如果 x 是一个变量，那么 x ?? 0 会返回 x 的值，如果 x 是 null 或者 undefined，那么 x ?? 0 会返回 0。

?? 和 || 的区别

• ?? 只会在左边的表达式为 null 或者 undefined 时，返回右边的表达式的值，否则返回左边的表达式的值。这意味着，如果左边的表达式是一个假值，例如 false、0、"" 等，它仍然会被返回。
• || 会在左边的表达式为任何假值时，返回右边的表达式的值，否则返回左边的表达式的值。这意味着，如果左边的表达式是一个真值，例如 true、1、"hello" 等，它会被返回。

总结

到此这篇关于前端常用判断符号??，?. ，! ，!! ，|| ，&&，?:的文章就介绍到这了,更多相关前端常用判断符号内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

最新评论