js逻辑或(||)和且(&&)

200 阅读2分钟

|| -- 找真

||:只要有一个表达式为真(truthy),整个表达式就为真

逻辑或||运算符可以用来连接两个或多个表达式。如果第一个表达式为真,那么会直接返回第一个表达式的值,不再执行第二个表达式。如果第一个表达式为假,那么会返回第二个表达式的值

  • 应用1:用于条件判断
a = 1
b = ''
if (a || b) {
    console.log('a || b')
}
// true || false = true   打印出a || b

a = 1
b = ''
if (a == 2 || b == 1) {
    console.log('a || b')
}
// false || false = false   打印不出结果
  • 应用2:提供默认值
a = ''
b = 0
c = a || b
console.log(c)

// 打印出 0

// 给变量设置默认值(如果data不存在,就会将datas赋值为第二个操作数作为默认值)
let datas = data ? data : {}
let datas = data || {} // 有一定缺陷:当data为0或false时,也会走到{}
let datas = data ?? {} // 空值合并操作符,只有??左边为null或undefined时才返回右边的值

  • 应用3:简化条件表达式
let a = ''
a = a ? a : 0
简化后:
let a = ''
a = a || 0

如果a转换为布尔值为true,则a赋值等于a,如果a转换为布尔值为false,则将a赋值为0。它既是简化三元表达式,又为a提供默认值

&& 找假

&&:所有表达式都为真(truthy)时,整个表达式就为真

逻辑与&&运算符可以用来连接两个或多个表达式。如果第一个表达式为真,那么会返回第一个表达式的值。如果第一个表达式为假,那么会直接返回第一个表达式的值,不再执行第二个表达式。

  • 应用1:用于条件判断
a = 1
b = 2
if (a && b) {
    console.log('a && b')
}
// true && true = true    打印出 a && b

a = 1
b = ''
if (a == 2 && b == 1) {
    console.log('a && b')
}
// false && false = false   打印不出结果

// 优化代码
if(data) {
    setData(data)
}
// 改写后:
data && setData(data) // 当data为真时,也就是存在时,才会执行setData方法,代码就精简了很多
  • 应用2:提供默认值
a = ''
b = 0
c = a && b
console.log(c)

// 打印出 ''

  • 应用3:简化条件表达式
function b() {}
let a = 2
let c = a ? b() : ''
//简化后:
let a = 2
let c = a && b()

如果a转换后为true,则执行b函数;如果a为false,则不执行,在开发中很常用