逻辑运算符通常用于布尔
型(逻辑)值。这种情况下,它们返回一个布尔值。然而,&&
和 ||
运算符会返回一个指定操作数的值,因此,这些运算符也用于非布尔值。这时,它们也就会返回一个非布尔型值。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
描述
逻辑运算符如下表所示 (其中expr
可能是任何一种类型, 不一定是布尔值):
运算符 | 语法 | 说明 |
---|---|---|
逻辑与,AND(&& ) |
expr1 && expr2 |
若 expr1 可转换为 true ,则返回 expr2 ;否则,返回 expr1 。 |
逻辑或,OR(|| ) |
expr1 || expr2 |
若 expr1 可转换为 true ,则返回 expr1 ;否则,返回 expr2 。 |
逻辑非,NOT(! ) |
!expr |
若 expr 可转换为 true ,则返回 false ;否则,返回 true 。 |
如果一个值可以被转换为 true
,那么这个值就是所谓的 truthy,如果可以被转换为 false
,那么这个值就是所谓的 falsy。
会被转换为 false
的表达式有:
null
;NaN
;0
;- 空字符串(
""
or''
or``
); undefined
。
尽管 &&
和 ||
运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符,因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值(或者表达式)转换为布尔值,请使用双重非运算符(即!!
)或者Boolean构造函数。
短路计算
由于逻辑表达式的运算顺序是从左到右,也可以用以下规则进行"短路"计算:
(some falsy expression) && (expr)
短路计算的结果为假。(some truthy expression) || (expr)
短路计算的结果为真。
短路意味着上述表达式中的expr部分不会被执行,因此expr的任何副作用都不会生效(举个例子,如果expr是一次函数调用,这次调用就不会发生)。造成这种现象的原因是,整个表达式的值在第一个操作数被计算后已经确定了。看一个例子:
function A(){ console.log('called A'); return false; } function B(){ console.log('called B'); return true; } console.log( A() && B() ); // logs "called A" due to the function call, // then logs false (which is the resulting value of the operator) console.log( B() || A() ); // logs "called B" due to the function call, // then logs true (which is the resulting value of the operator)
Operators precedence
请注意,由于运算符优先级的存在,下面的表达式的结果却不相同。右侧被小括号括起来的操作变成了独立的表达式。
false && true || true // 结果为 true false && (true || true) // 结果为 false
逻辑与(&&
)
下面的代码是 && (逻辑与) 运算符的示例.
a1 = true && true // t && t 返回 true a2 = true && false // t && f 返回 false a3 = false && true // f && t 返回 false a4 = false && (3 == 4) // f && f 返回 false a5 = "Cat" && "Dog" // t && t 返回 "Dog" a6 = false && "Cat" // f && t 返回 false a7 = "Cat" && false // t && f 返回 false a8 = '' && false // f && f 返回 "" a9 = false && '' // f && f 返回 false
逻辑或(||
)
下面的代码是 || (逻辑或) 运算符的示例。
o1 = true || true // t || t 返回 true o2 = false || true // f || t 返回 true o3 = true || false // t || f 返回 true o4 = false || (3 == 4) // f || f 返回 false o5 = "Cat" || "Dog" // t || t 返回 "Cat" o6 = false || "Cat" // f || t 返回 "Cat" o7 = "Cat" || false // t || f 返回 "Cat" o8 = '' || false // f || f 返回 false o9 = false || '' // f || f 返回 ""
逻辑非(!
)
下面的代码是 !
(逻辑非) 运算符的示例.
n1 = !true // !t 返回 false n2 = !false // !f 返回 true n3 = !'' // !f 返回 true n4 = !'Cat' // !t 返回 false
双重非(!!
)运算符
可能使用双重非运算符的一个场景,是显式地将任意值强制转换为其对应的falsy)。
同样的转换可以通过 Boolean 函数完成。
n1 = !!true // !!truthy 返回 true n2 = !!{} // !!truthy 返回 true: 任何 对象都是 truthy 的… n3 = !!(new Boolean(false)) // …甚至 .valueOf() 返回 false 的布尔值对象也是! n4 = !!false // !!falsy 返回 false n5 = !!"" // !!falsy 返回 false n6 = !!Boolean(false) // !!falsy 返回 false
布尔值转换规则
将 AND 转换为 OR
以下涉及布尔运算的操作:
bCondition1 && bCondition2
总是等于:
!(!bCondition1 || !bCondition2)
将 OR 转换为 AND
以下涉及布尔运算的操作:
bCondition1 || bCondition2
总是等于:
!(!bCondition1 && !bCondition2)
删除嵌套的小括号
由于逻辑表达式是从左往右计算的,所以,通常可以按照下面的规则删除小括号。
删除嵌套的 AND
以下涉及布尔运算的操作:
bCondition1 || (bCondition2 && bCondition3)
总是等于:
bCondition1 || bCondition2 && bCondition3
删除嵌套的 OR
以下涉及布尔运算的操作:
bCondition1 && (bCondition2 || bCondition3)
总是等于:
!(!bCondition1 || !bCondition2 && !bCondition3)
规范
规范 | 状态 | 备注 |
---|---|---|
ECMAScript 1st Edition (ECMA-262) | Standard | Initial definition. |
ECMAScript 5.1 (ECMA-262) | Standard | Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators |
ECMAScript 2015 (6th Edition, ECMA-262) | Standard | Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators |
ECMAScript Latest Draft (ECMA-262) | Draft | Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators |
浏览器兼容性
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Logical AND (&& ) |
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Logical OR (|| ) |
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Logical NOT (! ) |
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Legend
- Full support
- Full support