1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: Logical OR (||)
slug: Web/JavaScript/Reference/Operators/Logical_OR
translation_of: Web/JavaScript/Reference/Operators/Logical_OR
---
<div>{{jsSidebar("Operators")}}</div>
<p>The logical OR (<code>||</code>) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is 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-or.html", "shorter")}}</div>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><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>1</strong></code>; else, returns <code>expr<strong>2</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 OR expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:</p>
<p><code>(some truthy expression) || <em>expr</em></code> is short-circuit evaluated to the truthy 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">function A(){ console.log('called A'); return false; }
function B(){ console.log('called B'); return true; }
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>&&</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 && 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_OR">Using OR</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>
<div class="note">
<p><strong>备注：</strong> If you use this operator to provide a default value to some variable, be aware that any <em>falsy</em> value will not be used. If you only need to filter out {{jsxref("null")}} or {{jsxref("undefined")}}, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">the nullish coalescing operator</a>.</p>
</div>
<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 && 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 && !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">bCondition1 && (bCondition2 || bCondition3)</pre>
<p>is always equal to:</p>
<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.operators.logical_or")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">The nullish coalescing operator (<code>??</code>)</a></li>
<li>{{jsxref("Boolean")}}</li>
<li>{{Glossary("Truthy")}}</li>
<li>{{Glossary("Falsy")}}</li>
</ul>
|
