逻辑运算符

逻辑运算符通常用于布尔型(逻辑)值。这种情况下,它们返回一个布尔值。然而,&&|| 运算符会返回一个指定操作数的值,因此,这些运算符也用于非布尔值。这时,它们也就会返回一个非布尔型值。

描述

逻辑运算符如下表所示 (其中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

浏览器兼容性

Update compatibility data on GitHub
Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
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

参见