diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/logical_and/index.html')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/operators/logical_and/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/operators/logical_and/index.html b/files/zh-cn/web/javascript/reference/operators/logical_and/index.html new file mode 100644 index 0000000000..78c4eee070 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/operators/logical_and/index.html @@ -0,0 +1,138 @@ +--- +title: 逻辑与(&&) +slug: Web/JavaScript/Reference/Operators/Logical_AND +translation_of: Web/JavaScript/Reference/Operators/Logical_AND +original_slug: Web/JavaScript/Reference/Operators/逻辑和 +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>The logical AND (<code>&&</code>) operator (logical conjunction) for a set of operands is true if and only if all of its operands are true. It is typically used with {{jsxref("Boolean")}} (logical) values. When it is, it returns a Boolean value. However, the <code>&&</code> operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}</div> + +<div class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><em>expr1</em> && <em>expr2</em> +</pre> + +<h2 id="Description">Description</h2> + +<p>If <code>expr<strong>1</strong></code> can be converted to <code>true</code>, returns <code>expr<strong>2</strong></code>; else, returns <code>expr<strong>1</strong></code>.</p> + +<p>If a value can be converted to <code>true</code>, the value is so-called {{Glossary("truthy")}}. If a value can be converted to <code>false</code>, the value is so-called {{Glossary("falsy")}}.</p> + +<p>Examples of expressions that can be converted to false are:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN</code>;</li> + <li><code>0</code>;</li> + <li>empty string (<code>""</code> or <code>''</code> or <code>``</code>);</li> + <li><code>undefined</code>.</li> +</ul> + +<p>Even though the <code>&&</code> operator can be used with operands that are not Boolean values, it can still be considered a boolean operator since its return value can always be converted to a <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitive</a>. To explicitly convert its return value (or any expression in general) to the corresponding boolean value, use a double <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">NOT operator</a> or the {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} constructor.</p> + +<h3 id="Short-circuit_evaluation">Short-circuit evaluation</h3> + +<p>The logical AND expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:</p> + +<p><code>(some falsy expression) && <em>expr</em></code> is short-circuit evaluated to the falsy expression;</p> + +<p>Short circuit means that the <code><em>expr</em></code> part above is <strong>not evaluated</strong>, hence any side effects of doing so do not take effect (e.g., if <code><em>expr</em></code> is a function call, the calling never takes place). This happens because the value of the operator is already determined after the evaluation of the first operand. See example:</p> + +<pre class="brush: js notranslate">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) +</pre> + +<h3 id="Operator_precedence">Operator precedence</h3> + +<p>The following expressions might seem equivalent, but they are not, because the <code>&&</code> operator is executed before the <code>||</code> operator (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>).</p> + +<pre class="brush: js notranslate">true || false && false // returns true, because && is executed first +(true || false) && false // returns false, because operator precedence cannot apply</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_AND">Using AND</h3> + +<p>The following code shows examples of the <code>&&</code> (logical AND) operator.</p> + +<pre class="brush: js notranslate">a1 = true && true // t && t returns true +a2 = true && false // t && f returns false +a3 = false && true // f && t returns false +a4 = false && (3 == 4) // f && f returns false +a5 = 'Cat' && 'Dog' // t && t returns "Dog" +a6 = false && 'Cat' // f && t returns false +a7 = 'Cat' && false // t && f returns false +a8 = '' && false // f && f returns "" +a9 = false && '' // f && f returns false</pre> + +<h3 id="Conversion_rules_for_booleans">Conversion rules for booleans</h3> + +<h4 id="Converting_AND_to_OR">Converting AND to OR</h4> + +<p>The following operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 && bCondition2</pre> + +<p>is always equal to:</p> + +<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Converting_OR_to_AND">Converting OR to AND</h4> + +<p>The following operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 || bCondition2</pre> + +<p>is always equal to:</p> + +<pre class="brush: js notranslate">!(!bCondition1 && !bCondition2)</pre> + +<h3 id="Removing_nested_parentheses">Removing nested parentheses</h3> + +<p>As logical expressions are evaluated left to right, it is always possible to remove parentheses from a complex expression following some rules.</p> + +<p>The following composite operation involving <strong>booleans</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>is always equal to:</p> + +<pre class="brush: js notranslate">bCondition1 || bCondition2 && bCondition3</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.logical_and")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Falsy")}}</li> +</ul> |