diff options
Diffstat (limited to 'files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html')
| -rw-r--r-- | files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..ea1edb506a --- /dev/null +++ b/files/uk/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,253 @@ +--- +title: Логічні оператори +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Оператор + - логічний +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Логічні оператори зазвичай застосовуються до {{jsxref("Boolean", "булевих")}} (логічних) значень. В цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&&</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</div> + + + +<h2 id="Опис">Опис</h2> + +<p>Логічні оператори описані у наведеній нижче таблиці (вирази <code><em>expr</em></code> можуть належати до будь-якого <a href="/uk/docs/Glossary/Data_structure">типу</a>, не лише булевого):</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Оператор</th> + <th>Синтаксис</th> + <th>Опис</th> + </tr> + <tr> + <td>Логічне І (<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>2</strong></code>; інакше, вертає <code>expr<strong>1</strong></code>.</td> + </tr> + <tr> + <td>Логічне АБО (<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>Логічне НЕ (<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>Якщо значення може бути приведене до <code>true</code>, то воно називається {{Glossary("truthy","правдивим")}}. Якщо значення може бути приведене до <code>false</code>, воно називається {{Glossary("falsy","хибним")}}.</p> + +<p>Приклади виразів, які можуть бути приведені до false:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN</code>;</li> + <li><code>0</code>;</li> + <li>порожній рядок (<code>""</code>, або <code>''</code>, або <code>``</code>);</li> + <li><code>undefined</code>.</li> +</ul> + +<p>Хоча оператори <code>&&</code> та <code>||</code> можуть використовуватись з операндами не булевого (логічного) типу, вони все одно можуть вважатися логічними операторами, оскільки значення, які вони повертають, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>.</p> + +<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3> + +<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p> + +<ul> + <li><code>(якийсь хибний вираз) && <em>expr</em></code> обчислюється як хибний вираз;</li> + <li><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</li> +</ul> + +<p>Коротке замикання означає, що наведені вирази <em>expr</em> <strong>не обчислюються</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <em>expr</em> є викликом функції, виклик не відбувається). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p> + +<pre class="brush: js">function A(){ console.log('викликано A'); return false; } +function B(){ console.log('викликано B'); return true; } + +console.log( A() && B() ); +// виводить "викликано A" в результаті виклику функції, +// потім виводить false (що є результатом виклику оператора) + +console.log( B() || A() ); +// виводить "викликано B" в результаті виклику функції, +// потім виводить true (що є результатом виклику оператора) +</pre> + +<h3 id="Пріоритет_операторів">Пріоритет операторів</h3> + +<p>Наступні вирази можуть виглядати еквівалентними, але це не так, оскільки оператор <code>&&</code> виконується перед оператором <code>||</code> (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a>).</p> + +<pre class="brush: js">true || false && false // вертає true, оскільки && виконується першим +(true || false) && false // вертає false, оскільки не можна застосувати пріоритет операторів</pre> + +<h3 id="Логічне_І"><a id="Logical_AND" name="Logical_AND">Логічне І (<code>&&</code>)</a></h3> + +<p>Наступний код наводить приклади оператора <code>&&</code> (логічне І).</p> + +<pre class="brush: js">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 = 'Кіт' && 'Пес' // t && t вертає "Пес" +a6 = false && 'Кіт' // f && t вертає false +a7 = 'Кіт' && false // t && f вертає false +a8 = '' && false // f && f вертає "" +a9 = false && '' // f && f вертає false +</pre> + +<h3 id="Логічне_АБО"><a id="Logical_OR" name="Logical_OR">Логічне АБО (<code>||</code>)</a></h3> + +<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</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 = 'Кіт' || 'Пес' // t || t вертає "Кіт" +o6 = false || 'Кіт' // f || t вертає "Кіт" +o7 = 'Кіт' || false // t || f вертає "Кіт" +o8 = '' || false // f || f вертає false +o9 = false || '' // f || f вертає "" +o10 = false || varObject // f || object вертає varObject +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Якщо ви використовуєте цей оператор для присвоєння значення за замовчуванням якійсь змінній, пам'ятайте, що будь-яке <em>хибне</em> значення не буде використане. Якщо вам потрібно лише відфільтрувати {{jsxref("null")}} або {{jsxref("undefined")}}, розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">оператор null-об'єднання</a> (однак, станом на листопад 2019 ця функціональність ще не була широко реалізована і має вважатися експериментальною, оскільки знаходиться на Стадії 3).</p> +</div> + +<h3 id="Логічне_НЕ_!"><a id="Logical_NOT" name="Logical_NOT">Логічне НЕ (<code>!</code>)</a></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="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p> + +<p>Таке саме перетворення можна виконати функцією {{jsxref("Boolean")}}.</p> + +<pre class="brush: js">n1 = !!true // !!truthy вертає true +n2 = !!{} // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим... +n3 = !!(new Boolean(false)) // ...навіть об'єкти Boolean з false <em>.valueOf()</em>! +n4 = !!false // !!falsy вертає false +n5 = !!"" // !!falsy вертає false +n6 = !!Boolean(false) // !!falsy вертає false +</pre> + +<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3> + +<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js">умова1 && умова2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js">!(!умова1 || !умова2)</pre> + +<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js">умова1 || умова2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js">!(!умова1 && !умова2)</pre> + +<h4 id="Перетворення_НЕ">Перетворення НЕ</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js">!!умова</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js">умова</pre> + +<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3> + +<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись деяких правил.</p> + +<h4 id="Прибирання_вкладеного_І">Прибирання вкладеного І</h4> + +<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js">умова1 || (умова2 && умова3)</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js">умова1 || умова2 && умова3</pre> + +<h4 id="Прибирання_вкладеного_АБО">Прибирання вкладеного АБО</h4> + +<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js">умова1 && (умова2 || умова3)</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js">!(!умова1 || !умова2 && !умова3)</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>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бінарні логічні оператори</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Бінарні логічні оператори</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логічний оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бінарні логічні оператори</a></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітові оператори</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li> + <li>{{jsxref("Boolean")}}</li> + <li><a href="/uk/docs/Glossary/Truthy">Truthy</a></li> + <li><a href="/uk/docs/Glossary/Falsy">Falsy</a></li> +</ul> |