【JavaScript 11】布尔运算符 取反运算符! 且运算符&& 或运算符|| 三元条件运算符?:

概述

四个布尔运算符用于将表达式转为布尔值

1. 取反运算符：!
2. 且运算符：&&
3. 或运算符：||
4. 三元运算符：?:

取反运算符 !

取反运算符是一个感叹号，用于将布尔值变为相反值
对于非布尔值，取反运算符会将其转为布尔值

!true // false
!false // true

对于下面六个值取反后为true，其他皆为false

• undefined
• null
• false
• 0
• NaN
• ‘’

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

!54 // false
!'hello' // false
![] // false
!{} // false

上面代码中，不管什么类型的值，经过取反运算后，都变成了布尔值

如果对一个值连续做两次取反运算，等于将其转为对应的布尔值，与Boolean函数的作用相同
这是一种常用的类型转换的写法

!!x
// 等价于
Boolean(x)

且运算符 &&

且运算符（&&）往往用于多个表达式的求值

运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）
如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值

't' && '' // ""
't' && 'f' // "f"
't' && (1 + 2) // 3
'' && 'f' // ""
'' && '' // ""

var x = 1;
(1 - 1) && ( x += 1 ) // 0
x // 1

上面代码的最后一个例子，由于且运算符的第一个运算子的布尔值为false
则直接返回它的值0
而不再对第二个运算子求值，所以变量x的值没变

此种跳过第二个运算子的机制被称为短路
甚至可以用于取代if结构

if (i) {
	doSomething();
}

// 等价于

i && doSomething();

上面代码的两种写法是等价的，但是后一种不容易看出目的，也不容易除错，建议谨慎使用

且运算符可以多个连用，这时返回第一个布尔值为false的表达式的值
如果所有表达式的布尔值都为true，则返回最后一个表达式的值

true && 'foo' && '' && 4 && 'foo' && true
// ''

1 && 2 && 3
// 3

或运算符 ||

用于多个表达式的求值
运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值
如果第一个运算子的布尔值为false，则返回第二个运算子的值

't' || '' // "t"
't' || 'f' // "t"
'' || 'f' // "f"
'' || '' // ""

var x = 1;
true || (x = 2) // true
x // 1

同样适用短路规则
上面代码中，或运算符的第一个运算子为true，所以直接返回true，不再运行第二个运算子
这种只通过第一个表达式的值，控制是否运行第二个表达式的机制，就称为短路（short-cut）

或运算符可以多个连用，这时返回第一个布尔值为true的表达式的值
如果所有表达式都为false，则返回最后一个表达式的值

false || 0 || '' || 4 || 'foo' || true
// 4

false || 0 || ''
// ''

或运算符常用于为一个变量设置默认值

function saveText(text) {
	text = text || '';
	// ...
}

// 或者写成
saveText(this.text || '')

上面代码表示，如果函数调用时，没有提供参数，则该参数默认设置为空字符串

三元条件运算符

't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"

上面代码的t和0的布尔值分别为true和false，所以分别返回第二个和第三个表达式的值

if…else是语句，没有返回值
三元条件表达式是表达式，具有返回值