path: root/files/zh-cn/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html

---
title: 逻辑运算符
slug: >-
  conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca
tags:
  - JavaScript
  - 操作符
  - 逻辑
translation_of: Web/JavaScript/Reference/Operators
translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators
original_slug: Web/JavaScript/Reference/Operators/Logical_Operators
---
<div>{{jsSidebar("Operators")}}</div>

<p>逻辑运算符通常用于{{jsxref("Boolean","布尔")}}型（逻辑）值。这种情况下，它们返回一个布尔值。然而，<code>&amp;&amp;</code> 和 <code>||</code> 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，它们也就会返回一个非布尔型值。</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div>



<h2 id="描述">描述</h2>

<p>逻辑运算符如下表所示 (其中<code><em>expr</em></code>可能是任何一种<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Data_structure">类型</a>, 不一定是布尔值):</p>

<table class="fullwidth-table syntaxbox">
 <tbody>
  <tr>
   <th>运算符</th>
   <th>语法</th>
   <th>说明</th>
  </tr>
  <tr>
   <td>逻辑与，AND（<code>&amp;&amp;</code>）</td>
   <td><code><em>expr1</em> &amp;&amp; <em>expr2</em></code></td>
   <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>2</strong></code>；否则，返回 <code>expr<strong>1</strong></code>。</td>
  </tr>
  <tr>
   <td>逻辑或，OR（<code>||</code>）</td>
   <td><code><em>expr1</em> || <em>expr2</em></code></td>
   <td>若 <code>expr<strong>1</strong></code> 可转换为 <code>true</code>，则返回 <code>expr<strong>1</strong></code>；否则，返回 <code>expr<strong>2</strong></code>。</td>
  </tr>
  <tr>
   <td>逻辑非，NOT（<code>!</code>）</td>
   <td><code>!<em>expr</em></code></td>
   <td>若 <code>expr</code> 可转换为 <code>true</code>，则返回 <code>false</code>；否则，返回 <code>true</code>。</td>
  </tr>
 </tbody>
</table>

<p>如果一个值可以被转换为 <code>true</code>，那么这个值就是所谓的 {{Glossary("truthy")}}，如果可以被转换为 <code>false</code>，那么这个值就是所谓的 {{Glossary("falsy")}}。</p>

<p>会被转换为 <code>false</code> 的表达式有：</p>

<ul>
 <li><code>null</code>；</li>
 <li><code>NaN</code>；</li>
 <li><code>0</code>；</li>
 <li>空字符串（<code>""</code> or <code>''</code> or <code>``</code>）；</li>
 <li><code>undefined</code>。</li>
</ul>

<p>尽管 <code>&amp;&amp;</code> 和 <code>||</code> 运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符，因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值（或者表达式）转换为布尔值，请使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#%E9%80%BB%E8%BE%91%E9%9D%9E%EF%BC%88!%EF%BC%89">双重非运算符</a>（即<code>!!</code>）或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>构造函数。</p>

<h3 id="短路计算">短路计算</h3>

<p>由于逻辑表达式的运算顺序是从左到右，也可以用以下规则进行"短路"计算：</p>

<ul>
 <li><code>(some falsy expression) &amp;&amp; (<em>expr)</em></code> 短路计算的结果为假。</li>
 <li><code>(some truthy expression) || <em>(expr)</em></code> 短路计算的结果为真。</li>
</ul>

<p>短路意味着上述表达式中的expr部分<strong>不会被执行</strong>，因此expr的任何副作用都不会生效（举个例子，如果expr是一次函数调用，这次调用就不会发生）。造成这种现象的原因是，整个表达式的值在第一个操作数被计算后已经确定了。看一个例子：</p>

<pre class="brush: js">function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }

console.log( A() &amp;&amp; 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)
</pre>

<h3 id="Operators_precedence">Operators precedence</h3>

<p>请注意，由于<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">运算符优先级</a>的存在，下面的表达式的结果却不相同。右侧被小括号括起来的操作变成了独立的表达式。</p>

<pre class="brush: js">false &amp;&amp;  true || true      // 结果为 true
false &amp;&amp; (true || true)     // 结果为 false
</pre>

<h3 id="逻辑与（）">逻辑与（<code>&amp;&amp;</code>）</h3>

<p>下面的代码是 &amp;&amp; (逻辑与) 运算符的示例.</p>

<pre class="brush: js">a1 = true  &amp;&amp; true      // t &amp;&amp; t 返回 true
a2 = true  &amp;&amp; false     // t &amp;&amp; f 返回 false
a3 = false &amp;&amp; true      // f &amp;&amp; t 返回 false
a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f 返回 false
a5 = "Cat" &amp;&amp; "Dog"     // t &amp;&amp; t 返回 "Dog"
a6 = false &amp;&amp; "Cat"     // f &amp;&amp; t 返回 false
a7 = "Cat" &amp;&amp; false     // t &amp;&amp; f 返回 false
a8 = ''    &amp;&amp; false     // f &amp;&amp; f 返回 ""
a9 = false &amp;&amp; ''        // f &amp;&amp; f 返回 false
</pre>

<h3 id="逻辑或（）">逻辑或（<code>||</code>）</h3>

<p>下面的代码是 || (逻辑或) 运算符的示例。</p>

<pre class="brush: js">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 返回 ""
</pre>

<h3 id="逻辑非（!）">逻辑非（<code>!</code>）</h3>

<p>下面的代码是 <code>!</code> (逻辑非) 运算符的示例.</p>

<pre class="brush: js">n1 = !true              // !t 返回 false
n2 = !false             // !f 返回 true
n3 = !''                // !f 返回 true
n4 = !'Cat'             // !t 返回 false
</pre>

<h4 id="双重非（!!）运算符">双重非（<code>!!</code>）运算符</h4>

<p>可能使用双重非运算符的一个场景，是显式地将任意值强制转换为其对应的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#%E5%B8%83%E5%B0%94%E7%B1%BB%E5%9E%8B">布尔值</a>。这种转换是基于被转换值的 "truthyness" 和 "falsyness"的（参见 {{Glossary("truthy")}} 和 {{Glossary("falsy")}}）。</p>

<p>同样的转换可以通过 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 函数完成。</p>

<pre class="brush: js syntaxbox">n1 = !!true                   // !!truthy 返回 true
n2 = !!{}                     // !!truthy 返回 true: <strong>任何</strong> 对象都是 truthy 的…
n3 = !!(new Boolean(false))   // …甚至 <em>.valueOf()</em> 返回 false 的布尔值对象也是！
n4 = !!false                  // !!falsy 返回 false
n5 = !!""                     // !!falsy 返回 false
n6 = !!Boolean(false)         // !!falsy 返回 false
</pre>

<h3 id="布尔值转换规则">布尔值转换规则</h3>

<h4 id="将_AND_转换为_OR">将 AND 转换为 OR</h4>

<p>以下涉及<strong>布尔</strong>运算的操作：</p>

<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>

<p>总是等于：</p>

<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre>

<h4 id="将_OR_转换为_AND">将 OR 转换为 AND</h4>

<p>以下涉及<strong>布尔</strong>运算的操作：</p>

<pre class="brush: js">bCondition1 || bCondition2</pre>

<p>总是等于：</p>

<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>

<h3 id="删除嵌套的小括号">删除嵌套的小括号</h3>

<p>由于逻辑表达式是从左往右计算的，所以，通常可以按照下面的规则删除小括号。</p>

<h4 id="删除嵌套的_AND">删除嵌套的 AND</h4>

<p>以下涉及<strong>布尔</strong>运算的操作：</p>

<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>

<p>总是等于：</p>

<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>

<h4 id="删除嵌套的_OR">删除嵌套的 OR</h4>

<p>以下涉及<strong>布尔</strong>运算的操作：</p>

<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>

<p>总是等于：</p>

<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("javascript.operators.logical")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">按位操作符</a></li>
 <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">布尔值</a></li>
 <li><a href="/zh-CN/docs/Glossary/Truthy">Truthy</a></li>
 <li><a href="/zh-CN/docs/Glossary/Falsy">Falsy</a></li>
</ul>