&&运算符||运算符?.可选链运算符? ?空位合并运算符

Posted 2022-05-27 前端More

&&运算符
两边条件都为true时，结果才为true；
如果有一个为false，结果就为false；
当第一个条件为false时，就不再判断后面的条件
注意：当数值参与逻辑与运算时，结果为true，那么会返回的会是第二个为真的值；如果结果为false，返回的会是第一个为假的值。
表达式a && 表达式b
计算表达式a的运算结果:True, 执行表达式b，并返回b的结果； False，返回a的结果；

||运算符
只要有一个条件为true时，结果就为true；
当两个条件都为false时，结果才为false；
一个条件为true时，后面的条件不再判断
注意：当数值参与逻辑或运算时，结果为true，会返回第一个为真的值；如果结果为false，会返回第二个为假的值；
表达式a || 表达式b
计算表达式a的运算结果， Fasle, 执行表达式b，并返回b的结果； True，返回a的结果；

?.可选链运算符

可选链操作符?.允许读取位于链接对象链身处的属性的值,而不必明确验证链中的每个引用是否有效.

const list =null;
//判断list是否有值,list存在并且list的长度存在
//传统方式
if(list && list.length)

//可选链.?方式
//先判断?.可选链前是否存在,不存在返回undefined,若存在判断可选链后的是否存在,一层一层往下找,最后返回最终值
if(list?.length)

??空位合并运算符
??空位合并运算符:当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。

const a = 0 || 'X'   // X
const b = '' || 'X'   // X
const c = false || 'X'   // X
const d = undefined || 'X'   // X
const e = null || 'X'   // X

//若想使||前的 0 ''  false 均为真 则需要使用空位合并运算符 ?? 
//空位合并运算符 ??
const a = 0 ?? 'X' // 0
const b = '' ?? 'X' // ''
const c = false ?? 'X' // false
const d = undefined ?? 'X' // X
const e = null ?? 'X' // X