initial commit

1 files changed, 243 insertions, 0 deletions

diff --git a/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html b/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html
new file mode 100644
index 0000000000..9a7138244c
--- /dev/null
+++ b/files/zh-tw/web/javascript/reference/operators/logical_operators/index.html
@@ -0,0 +1,243 @@
+---
+title: Logical operators
+slug: Web/JavaScript/Reference/Operators/Logical_Operators
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>邏輯運算子通常會搭配 {{jsxref("Boolean")}} (logical) 值。若是，則回傳布林值。然而， <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="/en-US/docs/Glossary/Data_structure">type</a>，不只是布林值)：</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Operator</th>
+   <th>Syntax</th>
+   <th>Description</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>false</code> 若它的單一運算元可被轉換成 <code>true</code>; 否則回傳 <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>&amp;&amp;</code> and <code>||</code> operators can be used with operands that are not Boolean values, they can still be considered boolean operators since their return values can always be converted to <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitives</a>. To explicitly convert their 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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> constructor.</p>
+
+<h3 id="Short-circuit_evaluation">Short-circuit evaluation</h3>
+
+<p>As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:</p>
+
+<ul>
+ <li><code>(some falsy expression) &amp;&amp; <em>expr</em></code> is short-circuit evaluated to the falsy expression;</li>
+ <li><code>(some truthy expression) || <em>expr</em></code> is short-circuit evaluated to the truthy expression.</li>
+</ul>
+
+<p>Short circuit means that the <em>expr</em> parts above are <strong>not evaluated</strong>, hence any side effects of doing so do not take effect (e.g., if <em>expr</em> 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">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="Operator_precedence">Operator precedence</h3>
+
+<p>The following expressions might seem equivalent, but they are not, because the <code>&amp;&amp;</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">true || false &amp;&amp; false      // returns true, because &amp;&amp; is executed first
+(true || false) &amp;&amp; false    // returns false, because operator precedence cannot apply</pre>
+
+<h3 id="Logical_AND_()"><a name="Logical_AND">Logical AND (<code>&amp;&amp;</code>)</a></h3>
+
+<p>The following code shows examples of the <code>&amp;&amp;</code> (logical AND) operator.</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t returns true
+a2 = true  &amp;&amp; false      // t &amp;&amp; f returns false
+a3 = false &amp;&amp; true       // f &amp;&amp; t returns false
+a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f returns false
+a5 = 'Cat' &amp;&amp; 'Dog'      // t &amp;&amp; t returns "Dog"
+a6 = false &amp;&amp; 'Cat'      // f &amp;&amp; t returns false
+a7 = 'Cat' &amp;&amp; false      // t &amp;&amp; f returns false
+a8 = ''    &amp;&amp; false      // f &amp;&amp; f returns ""
+a9 = false &amp;&amp; ''         // f &amp;&amp; f returns false
+</pre>
+
+<h3 id="Logical_OR_()"><a name="Logical_OR">Logical OR (<code>||</code>)</a></h3>
+
+<p>The following code shows examples of the <code>||</code> (logical OR) operator.</p>
+
+<pre class="brush: js">o1 = true  || true       // t || t returns true
+o2 = false || true       // f || t returns true
+o3 = true  || false      // t || f returns true
+o4 = false || (3 == 4)   // f || f returns false
+o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
+o6 = false || 'Cat'      // f || t returns "Cat"
+o7 = 'Cat' || false      // t || f returns "Cat"
+o8 = ''    || false      // f || f returns false
+o9 = false || ''         // f || f returns ""
+o10 = false || varObject // f || object returns varObject
+</pre>
+
+<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3>
+
+<p>The following code shows examples of the <code>!</code> (logical NOT) operator.</p>
+
+<pre class="brush: js">n1 = !true               // !t returns false
+n2 = !false              // !f returns true
+n3 = !''                 // !f returns true
+n4 = !'Cat'              // !t returns false
+</pre>
+
+<h4 id="Double_NOT_(!!)">Double NOT (<code>!!</code>)</h4>
+
+<p>It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding <a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">boolean primitive</a>. The conversion is based on the "truthyness" or "falsyness" of the value (see {{Glossary("truthy")}} and {{Glossary("falsy")}}).</p>
+
+<p>The same conversion can be done through the {{jsxref("Boolean")}} function.</p>
+
+<pre class="brush: js">n1 = !!true                   // !!truthy returns true
+n2 = !!{}                     // !!truthy returns true: <strong>any</strong> object is truthy...
+n3 = !!(new Boolean(false))   // ...even Boolean objects with a false <em>.valueOf()</em>!
+n4 = !!false                  // !!falsy returns false
+n5 = !!""                     // !!falsy returns false
+n6 = !!Boolean(false)         // !!falsy 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">bCondition1 &amp;&amp; bCondition2</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!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">bCondition1 || bCondition2</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!bCondition1 &amp;&amp; !bCondition2)</pre>
+
+<h4 id="Converting_between_NOTs">Converting between NOTs</h4>
+
+<p>The following operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">!!bCondition</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">bCondition</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>
+
+<h4 id="Removing_nested_AND">Removing nested AND</h4>
+
+<p>The following composite operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 || (bCondition2 &amp;&amp; bCondition3)</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="Removing_nested_OR">Removing nested OR</h4>
+
+<p>The following composite operation involving <strong>booleans</strong>:</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)</pre>
+
+<p>is always equal to:</p>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li><a href="/en-US/docs/Glossary/Truthy">Truthy</a></li>
+ <li><a href="/en-US/docs/Glossary/Falsy">Falsy</a></li>
+</ul>