diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/javascript/reference/operators | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/uk/web/javascript/reference/operators')
78 files changed, 11317 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/operators/addition/index.html b/files/uk/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..92f1e1c48f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,81 @@ +--- +title: Додавання (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор додавання (<code>+</code>) повертає суму числових операндів або об'єднання рядків.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Додавання_чисел">Додавання чисел</h3> + +<pre class="brush: js notranslate">// Number + Number -> додавання +1 + 2 // 3 + +// Boolean + Number -> додавання +true + 1 // 2 + +// Boolean + Boolean -> додавання +false + false // 0 +</pre> + +<h3 id="Обєднання_рядків">Об'єднання рядків</h3> + +<pre class="brush: js notranslate">// String + String -> об'єднання +'бал' + 'кон' // "балкон" + +// Number + String -> об'єднання +5 + 'кон' // "5кон" + +// String + Boolean -> об'єднання +'бал' + false // "балfalse"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/addition_assignment/index.html b/files/uk/web/javascript/reference/operators/addition_assignment/index.html new file mode 100644 index 0000000000..2b5431a652 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/addition_assignment/index.html @@ -0,0 +1,77 @@ +--- +title: Присвоєння з додаванням (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з додаванням (<code>+=</code>) додає значення правого операнда до змінної та присвоює результат цій змінній. Типи двох операндів визначають поведінку оператора присвоєння з додаванням. Можливе або додавання, або об'єднання.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y +<strong>Значення:</strong> x = x + y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_додавання_з_присвоєнням">Використання додавання з присвоєнням</h3> + +<pre class="brush: js notranslate">// Розглянемо такі змінні +// foo = 'foo' +// bar = 5 +// baz = true + +// Число + Число -> додавання +bar += 2 // 7 + +// Булеве значення + Число -> додавання +baz += 1 // 2 + +// Булеве значення + Булеве значення -> додавання +baz += false // 1 + +// Число + Рядок -> об'єднання +bar += 'foo' // "5foo" + +// Рядок + Булеве значення -> об'єднання +foo += false // "foofalse" + +// Рядок + Рядок -> об'єднання +foo += 'bar' // "foobar"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.addition_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Оператори_присвоєння">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..6adc641eb6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,313 @@ +--- +title: Арифметичні оператори +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Арифметичні оператори</strong> приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення. Стандартними арифметичними операторами є додавання (+), віднімання (-), множення (*) та ділення (/).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="Addition" name="Addition">Додавання (+)</h2> + +<p>Оператор додавання повертає суму числових операндів або об'єднання рядків.</p> + +<h3 id="Синтаксис">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x + y +</pre> + +<h3 id="Приклади">Приклади</h3> + +<pre class="brush: js">// Number + Number -> сума +1 + 2 // 3 + +// Boolean + Number -> сума +true + 1 // 2 + +// Boolean + Boolean -> сума +false + false // 0 + +// Number + String -> об'єднання +5 + 'foo' // "5foo" + +// String + Boolean -> об'єднання +'foo' + false // "foofalse" + +// String + String -> об'єднання +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Subtraction" name="Subtraction">Віднімання (-)</h2> + +<p>Оператор віднімання проводить операцію віднімання між двома операндами, повертаючи різницю між ними.</p> + +<h3 id="Синтаксис_2">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x - y +</pre> + +<h3 id="Приклади_2">Приклади</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN</pre> + +<h2 id="Division" name="Division">Ділення (/)</h2> + +<p>Оператор ділення повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.</p> + +<h3 id="Синтаксис_3">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x / y +</pre> + +<h3 id="Приклади_3">Приклади</h3> + +<pre class="brush: js">1 / 2 // повертає 0.5 у JavaScript +1 / 2 // повертає 0 у Java +// (жодне з чисел не є явно числом з рухомою комою) + +1.0 / 2.0 // повертає 0.5 у JavaScript та Java + +2.0 / 0 // повертає Infinity у JavaScript +2.0 / 0.0 // також повертає Infinity +2.0 / -0.0 // повертає -Infinity у JavaScript</pre> + +<h2 id="Multiplication" name="Multiplication">Множення (*)</h2> + +<p>Оператор множення повертає добуток операндів.</p> + +<h3 id="Синтаксис_4">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x * y +</pre> + +<h3 id="Приклади_4">Приклади</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +'foo' * 2 // NaN +</pre> + +<h2 id="Remainder" name="Remainder">Остача (%)</h2> + +<p>Оператор остачі повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.</p> + +<h3 id="Синтаксис_5">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2 +</pre> + +<h3 id="Приклади_5">Приклади</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="Exponentiation" name="Exponentiation">Піднесення до степеня (**)</h2> + +<p>Оператор піднесення до степеня повертає результат піднесення першого операнду до показника степеня другого операнду. Тобто, <code>var1</code><sup><code>var2</code></sup> у наведеній інструкції, де <code>var1</code> та <code>var2</code> є змінними. Оператор піднесення до степеня правоасоціативний. <code>a ** b ** c</code> дорівнює <code>a ** (b ** c)</code>.</p> + +<h3 id="Синтаксис_6">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2 +</pre> + +<h3 id="Примітки">Примітки</h3> + +<p>У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (**), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний + та унарний -, але існує кілька винятків. Наприклад, у Bash оператор ** має нижчий пріоритет, ніж унарні оператори. У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (<code>+/-/~/!/delete/void/typeof</code>) одразу перед числом основи степеня.</p> + +<pre class="brush: js">-2 ** 2; +// 4 у Bash, -4 у інших мовах. +// Це помилка у JavaScript, оскільки операція неоднозначна. + + +-(2 ** 2); +// -4 у JavaScript, а наміри автора однозначні. +</pre> + +<h3 id="Приклади_6">Приклади</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>Щоб поміняти знак результату виразу піднесення до степеня:</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>Щоб зробити основу степеня у виразі від'ємним числом:</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Заувага:</strong> JavaScript також має <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">бітовий оператор ^ (логічний XOR)</a>. <code>**</code> та <code>^</code> відрізняються (наприклад: <code>2 ** 3 === 8</code>, тоді як <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Increment" name="Increment">Інкремент (++)</h2> + +<p>Оператор інкременту збільшує свій операнд (додає одиницю) та повертає його значення.</p> + +<ul> + <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x++), тоді він збільшує значення та повертає його до збільшення.</li> + <li>Якщо оператор використовується префіксно, перед операндом (наприклад, ++x), тоді він збільшує значення та повертає його після збільшення.</li> +</ul> + +<h3 id="Синтаксис_7">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x++ або ++x +</pre> + +<h3 id="Приклади_7">Приклади</h3> + +<pre class="brush: js">// Постфіксний +var x = 3; +y = x++; // y = 3, x = 4 + +// Префіксний +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decrement" name="Decrement">Декремент (--)</h2> + +<p>Оператор декременту зменшує свій операнд (віднімає одиницю) та повертає його значення.</p> + +<ul> + <li>Якщо оператор використовується постфіксно, після операнду (наприклад, x--), тоді він зменшує значення та повертає його до зменшення.</li> + <li>Якщо оператор використовується префіксно, перед операндом (наприклад, --x), тоді він зменшує значення та повертає його після зменшення.</li> +</ul> + +<h3 id="Синтаксис_8">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x-- або --x +</pre> + +<h3 id="Приклади_8">Приклади</h3> + +<pre class="brush: js">// Постфіксний +var x = 3; +y = x--; // y = 3, x = 2 + +// Префіксний +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Unary_negation" name="Unary_negation">Унарний мінус (-)</h2> + +<p>Унарний мінус ставиться перед своїм операндом та міняє його знак на протилежний.</p> + +<h3 id="Синтаксис_9">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> -x +</pre> + +<h3 id="Приклади_9">Приклади</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// Унарний мінус може перетворити нечислове значення на число +var x = "4"; +y = -x; // y = -4 +</pre> + +<h2 id="Унарний_плюс"><a id="Unary_plus" name="Unary_plus">Унарний плюс (+)</a></h2> + +<p>Унарний плюс ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом. Хоча унарний мінус (-) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення <code>true</code>, <code>false</code> та <code>null</code>. Підтримуються цілі числа у десятковому та шістнадцятковому форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.</p> + +<h3 id="Синтаксис_10">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> +x +</pre> + +<h3 id="Приклади_10">Приклади</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Доданий <a href="https://github.com/rwaldron/exponentiation-operator">Оператор піднесення до степеня</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">унарні оператори</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Адитивні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">мультиплікативні оператори</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">постфіксні вирази</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">унарні оператори</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператори присвоєння</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/array_comprehensions/index.html b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html new file mode 100644 index 0000000000..ebd2425ae2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html @@ -0,0 +1,198 @@ +--- +title: Заповнення масивів +slug: Web/JavaScript/Reference/Operators/Array_comprehensions +tags: + - JavaScript + - Оператор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<div>{{jsSidebar("Operators")}} +<div class="warning"><strong>Нестандартний. Не використовуйте!</strong><br> +Синтаксис заповнення масивів є нестандартним та був прибраний, починаючи з Firefox 58. Для варіантів використання в майбутьому розгляньте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Стрілкові_функції", "стрілкові функції", "", 1)}} та {{jsxref("Operators/Spread_syntax", "оператор розпакування", "", 1)}}.</div> +{{Obsolete_Header(58)}}</div> + +<p>Синтаксис <strong>заповнення масивів</strong> (array comprehension) був виразом JavaScript, який дозволяв швидко збирати новий масив, базуючись на вже існуючому масиві. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[for (x of iterable) x] +[for (x of iterable) if (condition) x] +[for (x of iterable) for (y of iterable) x + y] +</pre> + +<h2 id="Опис">Опис</h2> + +<p>У заповненнях масивів дозволені наступні два види компонентів:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} та</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>Перебір for-of завжди є першим компонентом. Можна використовувати більше одного перебору for-of чи if-конструкцій.</p> + +<p>Заповнення масивів були попередньо запропоновані для стандартизації у ECMAScript 2016, вони надають корисне скорочення запису для конструювання нового масиву на основі змісту іншого масиву. Заповнення часто можуть використовуватись замість викликів {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}}, або як засіб їх об'єднати.</p> + +<p>Наступне заповнення бере масив чисел та створює новий масив, де кожне з цих чисел подвоюється.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4]; +var doubled = [for (i of numbers) i * 2]; +console.log(doubled); // виводить 2,4,6,8 +</pre> + +<p>Це еквівалентно наступній операції {{jsxref("Array.prototype.map", "map()")}}:</p> + +<pre class="brush: js">var doubled = numbers.map(i => i * 2); +</pre> + +<p>Заповнення також можуть використовуватись для відбору елементів, які відповідають певному виразу. Ось заповнення, яке обирає лише парні числа:</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; +var evens = [for (i of numbers) if (i % 2 === 0) i]; +console.log(evens); // виводить 2,22,30 +</pre> + +<p>Метод {{jsxref("Array.prototype.filter", "filter()")}} може використовуватись для тієї ж самої мети:</p> + +<pre class="brush: js">var evens = numbers.filter(i => i % 2 === 0); +</pre> + +<p>Операції з {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}} можна об'єднати у єдине заповнення масиву. Ось таке, що відфільтровує лише парні числа, а потім створює масив, де вони подвоєні:</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30]; +var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2]; +console.log(doubledEvens); // виводить 4,44,60 +</pre> + +<p>Квадратні дужки заповнення масиву створюють неявний блок для області видимості. Нові змінні (такі, як i у прикладі) поводяться так, ніби вони були оголошені за допомогою {{jsxref("Statements/let","let")}}. Це означає, що вони не будуть доступні за межами заповнення.</p> + +<p>Вхідні дані для заповнення масиву не обов'язково самі мають бути масивом; <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">ітератори та генератори</a> також підійдуть.</p> + +<p>Навіть рядки можна використовувати як вхідні дані; щоб виконати наведені вище функції filter та map (на подібних до масиву об'єктах):</p> + +<pre class="brush: js">var str = 'abcdef'; +var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf' +var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0' +</pre> + +<p>Знову ж таки, початкова форма не зберігається, тому нам доведеться скористатись методом {{jsxref("Array.prototype.join", "join()")}}, щоб повернутись до рядка.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Прості_заповнення_масивів">Прості заповнення масивів</h3> + +<pre class="brush:js">[for (i of [1, 2, 3]) i * i ]; +// [1, 4, 9] + +var abc = ['А', 'Б', 'В']; +[for (letters of abc) letters.toLowerCase()]; +// ["а", "б", "в"]</pre> + +<h3 id="Заповнення_масивів_з_оператором_if">Заповнення масивів з оператором if</h3> + +<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014]; +[for (year of years) if (year > 2000) year]; +// [2006, 2010, 2014] +[for (year of years) if (year > 2000) if (year < 2010) year]; +// [2006], те саме, що й нижче: +[for (year of years) if (year > 2000 && year < 2010) year]; +// [2006] +</pre> + +<h3 id="Заповнення_масивів_у_порівнянні_з_map_та_filter">Заповнення масивів у порівнянні з <code>map</code> та <code>filter</code></h3> + +<p>Легко зрозуміти синтаксис заповнення масивів, порівнявши його з методами масиву {{jsxref("Array.map", "map")}} та {{jsxref("Array.filter", "filter")}}:</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +numbers.map(function (i) { return i * i }); +numbers.map(i => i * i); +[for (i of numbers) i * i]; +// усі дорівнюють [1, 4, 9] + +numbers.filter(function (i) { return i < 3 }); +numbers.filter(i => i < 3); +[for (i of numbers) if (i < 3) i]; +// усі дорівнюють [1, 2] +</pre> + +<h3 id="Заповнення_масивів_з_двома_масивами">Заповнення масивів з двома масивами</h3> + +<p>Використання двох переборів for-of для роботи з двома масивами:</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; +var letters = ['а', 'б', 'в']; + +var cross = [for (i of numbers) for (j of letters) i + j]; +// ["1а", "1б", "1в", "2а", "2б", "2в", "3а", "3б", "3в"] + +var grid = [for (i of numbers) [for (j of letters) i + j]]; +// [ +// ["1а", "1б", "1в"], +// ["2а", "2б", "2в"], +// ["3а", "3б", "3в"] +// ] + +[for (i of numbers) if (i > 1) for (j of letters) if(j > 'а') i + j] +// ["2б", "2в", "3б", "3в"], те саме, що й наведене нижче: + +[for (i of numbers) for (j of letters) if (i > 1) if(j > 'а') i + j] +// ["2б", "2в", "3б", "3в"] + +[for (i of numbers) if (i > 1) [for (j of letters) if(j > 'а') i + j]] +// [["2б", "2в"], ["3б", "3в"]], не те саме, що наведене нижче: + +[for (i of numbers) [for (j of letters) if (i > 1) if(j > 'а') i + j]] +// [[], ["2б", "2в"], ["3б", "3в"]] +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Початково синтаксис був присутній у чорнетці ECMAScript 2015, але був видалений у ревізії 27 (серпень 2014). Будь ласка, дивіться семантику специфікації у старших ревізіях ES2015.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.array_comprehensions")}}</p> + +<h2 id="Відмінності_від_заповнень_у_JS1.7JS1.8">Відмінності від заповнень у JS1.7/JS1.8</h2> + +<div class="warning">Заповнення JS1.7/JS1.8 були прибрані з Gecko, починаючи з версії 46 ({{bug(1220564)}}).</div> + +<p><strong>Старий синтаксис заповнень (більше не використовується!):</strong></p> + +<pre class="brush: js example-bad">[X for (Y in Z)] +[X for each (Y in Z)] +[X for (Y of Z)] +</pre> + +<p>Відмінності:</p> + +<ul> + <li>Заповнення ESNext створюють область видимості для кожного блоку "for", а не для всього заповнення. + <ul> + <li>Старе: <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>Нове: <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, кожна ітерація створює свіже зв'язування для x. </code></li> + </ul> + </li> + <li>Заповнення ESNext починаються з "for", а не з виразу присвоювання. + <ul> + <li>Старе: <code>[i * 2 for (i of numbers)]</code></li> + <li>Нове: <code>[for (i of numbers) i * 2]</code></li> + </ul> + </li> + <li>Заповнення ESNext можуть мати декілька компонентів <code>if</code> та <code>for</code>.</li> + <li>Заповнення ESNext працюють тільки з переборами <code>{{jsxref("Statements/for...of", "for...of")}}</code>, а не з <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li> +</ul> + +<p>Дивіться пропозиції щодо змін у коді у <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, коментар 42</a>.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Generator_comprehensions", "Заповнення генераторів", "" ,1)}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/assignment/index.html b/files/uk/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..a974d94382 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Простий оператор присвоєння (<code>=</code>) використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоєнь, щоб присвоїти одне значення декільком змінним.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Просте_присвоєння_та_ланцюжок_присвоєнь">Просте присвоєння та ланцюжок присвоєнь</h3> + +<pre class="brush: js notranslate">// Розглянемо наступні змінні +// x = 5 +// y = 10 +// z = 25 + +x = y // x дорівнює 10 +x = y = z // x, y та z усі дорівнюють 25</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Оператори_присвоєння">Оператори присвоєння у посібнику JS</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/async_function/index.html b/files/uk/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..a0ff272054 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,115 @@ +--- +title: Вираз асинхронної функції +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - JavaScript + - Оператор + - Функція +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключове слово <strong><code>async function</code></strong> може використовуватись для визначення асинхронних функцій всередині виразів.</p> + +<p>Ви також можете визначати асинхронні функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function">оголошення async function</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<p>Починаючи з ES2015 ви також можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>.</p> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції. Його можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише всередині тіла функції.</dd> + <dt><code>paramN</code></dt> + <dd>Ім'я аргумента, що передається у функцію.</dd> + <dt><code>statements</code></dt> + <dd>Інструкції, які складають тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Вираз <code>async function</code> дуже схожий, та має майже такий самий синтаксис, як {{jsxref('Statements/async_function', 'оголошення async function')}}. Головною відмінністю між виразом асинхронної функції та оголошенням асинхронної функції є <em>ім'я функції,</em> яке можна пропустити у виразі <code>async function</code>, щоб створити <em>анонімну</em> функцію. Вираз <code>async function</code> може використовуватись як {{Glossary("IIFE","НВФВ")}} (негайно виконуваний функціональний вираз), який виконується одразу після визначення. Більше інформації дивіться у главі про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Простий_приклад">Простий приклад</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + + +var add = async function(x) { // вираз асинхронної функції присвоюється змінній + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // виводить 60 через 4 секунди. +}); + + +(async function(x) { // вираз асинхронної функції використовується як НВФВ + var p_a = resolveAfter2Seconds(20); + var p_b = resolveAfter2Seconds(30); + return x + await p_a + await p_b; +})(10).then(v => { + console.log(v); // виводить 60 через 2 секунди. +}); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.operators.async_function_expression")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>Об'єкт {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/await/index.html b/files/uk/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..ed8041347d --- /dev/null +++ b/files/uk/web/javascript/reference/operators/await/index.html @@ -0,0 +1,126 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - JavaScript + - Оператор + - Функція +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <code>await</code> використовується для очікування на {{jsxref("Promise","проміс")}}. Він може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>{{jsxref("Promise","Проміс")}} чи будь-яке інше значення, якого треба дочекатись.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Повертає значення виконаного проміса, або саме значення, якщо це не об'єкт <code>Promise</code>.</p> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Вираз <code>await</code> спричиняє призупинення виконання асинхронної функції до встановлення об'єкта <code>Promise</code> (проміс) (тобто, до його вирішення або відхилення), а також відновлює виконання асинхронної функції після його завершення. Після відновлення, значенням виразу <code>await</code> є значення виконаного проміса.</p> + +<p>Якщо проміс відхилено, вираз <code>await</code> викидає значення відхилення.</p> + +<p>Якщо значення <em>виразу</em>, що стоїть після оператора <code>await</code>, не є об'єктом <code>Promise</code>, воно перетворюється на <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">вирішений проміс</a>.</p> + +<p>Оператор <code>await</code> може розбивати хід виконання, дозволяючи коду, що викликав функцію з <code>await</code>, відновити виконання ще до того, як буде продовжене відкладене виконання функції з <code>await</code>. Після того, як <code>await</code> відкладає продовження своєї функції, якщо це перший оператор <code>await</code>, що виконується функцією, негайне виконання також продовжується поверненням у код, що викликав функцію, проміса у стані очікування для завершення виконання функції з <code>await</code> та для відновлення виконання коду, що її викликав.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Якщо у вираз <code>await</code> був переданий проміс, то вираз чекає на виконання проміса та повертає значення, що є результатом виконання.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} + +f1(); +</pre> + +<p>{{jsxref("Global_Objects/Promise/then", "Промісоподібні об'єкти")}} виконуватимуться так само.</p> + +<pre class="brush: js">async function f2() { + const thenable = { + then: function(resolve, _reject) { + resolve('вирішений!') + } + }; + console.log(await thenable); // вирішений! +} + +f2();</pre> + +<p>Якщо значенням є не проміс, він перетворює його на вирішений проміс та чекає на нього.</p> + +<pre class="brush: js">async function f3() { + var y = await 20; + console.log(y); // 20 +} + +f3();</pre> + +<p>Якщо проміс відхилено, викидається значення відхилення.</p> + +<pre class="brush: js">async function f4() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} + +f4();</pre> + +<p>Обробити відхилений проміс без блока try.</p> + +<pre class="brush: js">var response = await promisedFunction().catch((err) => { console.log(err); }); +// якщо проміс відхилено, значенням response буде undefined +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.operators.await")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "вираз async function")}}</li> + <li>Об'єкт {{jsxref("AsyncFunction")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_and/index.html b/files/uk/web/javascript/reference/operators/bitwise_and/index.html new file mode 100644 index 0000000000..0ac51e7d41 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_and/index.html @@ -0,0 +1,111 @@ +--- +title: Побітове І (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор побітового І (AND) <code>&</code> вертає <code>1</code> для кожної бітової позиції, де відповідні біти обох операндів дорівнюють <code>1</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p> + +<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + +<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p> + +<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p> + +<p>Таблиця істинності для операції І наступна:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">b</th> + <th class="header" scope="col">a AND b</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10) +</pre> + +<p>Побітове І над будь-яким числом <code><var>x</var></code> та <code>0</code> дає <code>0</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_побітового_І">Використання побітового І</h3> + +<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +5 & 2; // 0</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_and")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Бітові_оператори">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Оператор присвоєння з побітовим І</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html new file mode 100644 index 0000000000..2af7f2fac5 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з побітовим І (&=) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з побітовим І (<code>&=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x &= y +<strong>Значення:</strong> x = x & y +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_побітовим_І">Використання присвоєння з побітовим І</h3> + +<pre class="brush: js notranslate">let a = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +a &= 2; // 0</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_and_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">Оператор побітового І</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_not/index.html b/files/uk/web/javascript/reference/operators/bitwise_not/index.html new file mode 100644 index 0000000000..5c83741948 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_not/index.html @@ -0,0 +1,99 @@ +--- +title: Побітове НЕ (~) +slug: Web/JavaScript/Reference/Operators/Bitwise_NOT +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор побітового НЕ (<code>~</code>) інвертує біти свого операнда.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>~a</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p> + +<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + +<p>Оператор застосовується до кожного біта.</p> + +<p>Таблиця істинності для операції <code>НЕ</code> (NOT) наступна</p> + + + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">NOT a</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate"> 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + -------------------------------- +~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10) +</pre> + +<p>Побітове НЕ над будь-яким числом <code>x</code> дає <code>-(x + 1)</code>. Наприклад, <code>~-5</code> повертає <code>4</code>.</p> + +<p>Зауважте, що через використання 32-бітного представлення чисел і <code>~-1</code>, і <code>~4294967295</code> (2<sup>32</sup>-1) повернуть <code>0</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_побітового_НЕ">Використання побітового НЕ</h3> + +<pre class="brush: js notranslate">~0; // -1 +~-1; // 0 +~1; // -2 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-unary-operators', 'Unary NOT expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_not")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори#Бітові_оператори">Бітові оператори у посібнику JS</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_operators/index.html b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html new file mode 100644 index 0000000000..4db007fb3e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_operators/index.html @@ -0,0 +1,559 @@ +--- +title: Бітові оператори +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Бітові оператори</strong> опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові чи вісімкові <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + + + +<p>Наступна таблиця наводить перелік бітових операторів JavaScript:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Оператор</th> + <th>Застосування</th> + <th>Опис</th> + </tr> + <tr> + <td><a href="#Побітове_І">Побітове І (AND)</a></td> + <td><code>a & b</code></td> + <td>Повертає <code>1</code> на кожній позиції, де відповідні біти обох операндів дорівнюють <code>1</code>.</td> + </tr> + <tr> + <td><a href="#Побітове_АБО">Побітове АБО (OR)</a></td> + <td><code>a | b</code></td> + <td>Повертає <code>1</code> на кожній позиції, де відповідні біти одного чи обох операндів дорівнюють <code>1</code>.</td> + </tr> + <tr> + <td><a href="#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td> + <td><code>a ^ b</code></td> + <td>Повертає <code>1</code> на кожній позиції, де відповідний біт одного з двох, але не обох, операндів дорівнює <code>1</code>.</td> + </tr> + <tr> + <td><a href="#Побітове_НЕ">Побітове НЕ (NOT)</a></td> + <td><code>~ a</code></td> + <td>Виконує інверсію бітів операнду.</td> + </tr> + <tr> + <td><a href="#<<_Лівий_зсув">Лівий зсув</a></td> + <td><code>a << b</code></td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів ліворуч, заповнюючи позиції справа нулями.</td> + </tr> + <tr> + <td><a href="#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td> + <td><code>a >> b</code></td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів праворуч, відкидаючи зсунуті біти.</td> + </tr> + <tr> + <td><a href="#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td> + <td><code>a >>> b</code> </td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> (< 32) бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td> + </tr> + </tbody> +</table> + +<h2 id="32-бітні_цілі_числа_зі_знаком">32-бітні цілі числа зі знаком</h2> + +<p>Операнди усіх бітових операторів перетворюються на 32-бітні цілі числа зі знаком у <a href="https://uk.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%B2%D0%BD%D1%8F%D0%BB%D1%8C%D0%BD%D0%B8%D0%B9_%D0%BA%D0%BE%D0%B4">форматі доповняльного коду</a>, окрім оператора правого зсуву із заповненням нулями, який повертає беззнакове ціле 32-бітне число. Формат доповняльного коду означає, що від'ємний еквівалент числа (наприклад, 5 та -5) - це інвертовані біти числа (побітове НЕ, або обернений код числа) плюс один. Для прикладу, наступний код представляє ціле число 314:</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>Наступний код представляє <code>~314</code>, тобто, обернений код числа <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p>Нарешті, наступний код представляє доповняльний код числа <code>-314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>Доповняльний код гарантує, що лівий біт дорівнює 0, коли число є додатним, і 1, коли число є від'ємним. Тому він відомий як <em>знаковий біт</em>.</p> + +<p>Число <code>0</code> є цілим числом, усі біти якого дорівнюють 0.</p> + +<pre class="brush: js">0 (основа 10) = 00000000000000000000000000000000 (основа 2) +</pre> + +<p>Число <code>-1</code> є цілим числом, усі біти якого дорівнюють 1.</p> + +<pre class="brush: js">-1 (основа 10) = 11111111111111111111111111111111 (основа 2) +</pre> + +<p>Число <code>-2147483648</code> (шістнадцяткове представлення: <code>-0x80000000</code>) є цілим числом, усі біти якого дорівнюють 0, окрім першого (старшого) біта.</p> + +<pre class="brush: js">-2147483648 (основа 10) = 10000000000000000000000000000000 (основа 2) +</pre> + +<p>Число <code>2147483647</code> (шістнадцяткове представлення: <code>0x7fffffff</code>) є цілим числом, усі біти якого дорівнюють 1, окрім першого (старшого) біта.</p> + +<pre class="brush: js">2147483647 (основа 10) = 01111111111111111111111111111111 (основа 2) +</pre> + +<p>Числа <code>-2147483648</code> та <code>2147483647</code> є мінімальним та максимальним цілими числами, які можуть бути представлені 32-бітним знаковим числом.</p> + +<h2 id="Побітові_логічні_оператори">Побітові логічні оператори</h2> + +<p>Концептуально побітові логічні оператори працюють наступним чином:</p> + +<ul> + <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число: + <pre class="brush: js">До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + </li> + <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li> + <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li> +</ul> + +<h3 id="Побітове_І"><a id="Bitwise_AND" name="Bitwise_AND">& (Побітове І)</a></h3> + +<p>Виконує операцію І (AND) над кожною парою бітів. <code>a</code> І <code>b</code> дає 1 тільки якщо обидва, <code>a</code> та <code>b</code>, дорівнюють <code>1</code>. Таблиця істинності для операції <code>І</code> наступна:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 & 9 (основа 10) = 00000000000000000000000000001000 (основа 2) = 8 (основа 10) +</pre> + +<p>Побітове І над будь-яким числом <code>x</code> та <code>0</code> дає <code>0</code>.</p> + +<h3 id="Побітове_АБО"><a id="Bitwise_OR" name="Bitwise_OR">| (Побітове АБО)</a></h3> + +<p>Виконує операцію АБО (OR) над кожною парою бітів. <code>a</code> АБО <code>b</code> дає 1, якщо або <code>a</code>, або <code>b</code> дорівнює <code>1</code>. Таблиця істинності для операції <code>АБО</code> наступна:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10) +</pre> + +<p>Побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає <code>x</code>.</p> + +<h3 id="Виключне_побітове_АБО"><a id="Bitwise_XOR" name="Bitwise_XOR">^ (Виключне побітове АБО)</a></h3> + +<p>Виконує операцію виключного АБО (XOR) над кожною парою бітів. <code>a</code> викл. АБО <code>b</code> дає 1, якщо <code>a</code> та <code>b</code> є різними. Таблиця істинності для операції <code>XOR</code> наступна:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10) +</pre> + +<p>Виключне побітове АБО над будь-яким числом <code>x</code> та <code>0</code> дає x.</p> + +<h3 id="Побітове_НЕ"><a id="Bitwise_NOT" name="Bitwise_NOT">~ (Побітове НЕ)</a></h3> + +<p>Виконує операцію НЕ над кожним бітом. НЕ <code>a</code> повертає інвертоване значення (або обернений код) операнду <code>a</code>. Таблиця істинності для операції <code>НЕ</code> наступна:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + -------------------------------- +~9 (основа 10) = 11111111111111111111111111110110 (основа 2) = -10 (основа 10) +</pre> + +<p>Побітове НЕ над будь-яким числом <code>x</code> дає <code>-(x + 1)</code>. Наприклад, <code>~-5</code> дорівнює <code>4</code>.</p> + +<p>Зауважте, що через використання 32-бітного представлення чисел і <code>~-1</code>, і <code>~4294967295</code> (2<sup>32</sup>-1) повернуть <code>0</code>.</p> + +<h2 id="Оператори_бітового_зсуву">Оператори бітового зсуву</h2> + +<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p> + +<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа у порядку від старшого до молодшого байту та повертають результат того самого типу, до якого належить лівий операнд. Лише молодші п'ять бітів правого операнду будуть використані.</p> + +<h3 id="<<_Лівий_зсув"><a id="Left_shift" name="Left_shift"><< (Лівий зсув)</a></h3> + +<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p> + +<p>Наприклад, <code>9 << 2</code> дорівнює 36:</p> + +<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10) +</pre> + +<p>Бітовий зсув будь-якого числа <code>x</code> ліворуч на <code>y</code> бітів дорівнює <code>x * 2 ** y</code>.<br> + Отже, для прикладу: <code>9 << 3</code> можна перекласти як: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p> + +<h3 id=">>_Правий_зсув_з_розширенням_знаку"><a id="Right_shift" name="Right_shift">>> (Правий зсув з розширенням знаку)</a></h3> + +<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".</p> + +<p>Наприклад, <code>9 >> 2</code> дорівнює 2:</p> + +<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10) +</pre> + +<p>Аналогічно, <code>-9 >> 2</code> дорівнює <code>-3</code>, оскільки знак зберігається:</p> + +<pre class="brush: js">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) + -------------------------------- +-9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (основа 10) +</pre> + +<h3 id=">>>_Правий_зсув_із_заповненням_нулями"><a id="Unsigned_right_shift" name="Unsigned_right_shift">>>> (Правий зсув із заповненням нулями)</a></h3> + +<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення 0, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p> + +<p>Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, <code>9 >>> 2</code> дорівнює 2, так само, як <code>9 >> 2</code>:</p> + +<pre class="brush: js">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10) +</pre> + +<p>Однак, це не одне й те саме для від'ємних чисел. Наприклад, <code>-9 >>> 2</code> поверне 1073741821, що відрізняється від <code>-9 >> 2</code> (що дорівнює <code>-3</code>):</p> + +<pre class="brush: js">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) + -------------------------------- +-9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10) +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Прапори_та_бітові_маски">Прапори та бітові маски</h3> + +<p>Побітові логічні оператори часто використовуються для створення, маніпулювання та читання послідовностей <em>прапорів</em>, які грають роль двійкових змінних. Замість цих послідовностей можуть використовуватись зміні, але двійкові прапори займають набагато менше пам'яті (у 32 рази).</p> + +<p>Припустимо, є 4 прапори:</p> + +<ul> + <li>прапор A: ми маємо проблему з мурахами</li> + <li>прапор B: ми маємо кажана</li> + <li>прапор C: ми маємо кота</li> + <li>прапор D: ми маємо качку</li> +</ul> + +<p>Ці прапори представлені послідовністю бітів: DCBA. Коли прапор <em>встановлений</em>, він має значення 1. Коли прапор <em>очищений</em>, він має значення 0. Припустимо, змінна <code>flags</code> має двійкове значення 0101:</p> + +<pre class="brush: js">var flags = 5; // двійкове значення 0101 +</pre> + +<p>Це значення вказує:</p> + +<ul> + <li>прапор A дорівнює true (ми маємо проблему з мурахами);</li> + <li>прапор B дорівнює false (ми не маємо кажана);</li> + <li>прапор C дорівнює true (ми маємо кота);</li> + <li>прапор D дорівнює false (ми не маємо качки);</li> +</ul> + +<p>Оскільки бітові операнди 32-бітні, 0101 насправді дорівнює 00000000000000000000000000000101, але нулями попереду можна знехтувати, оскільки вони не містять корисної інформації.</p> + +<p><em>Бітова маска</em> - це послідовність бітів, які можуть маніпулювати прапорами та/або читати їх. Зазвичай, визначається "примітивна" бітова маска для кожного прапора:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>Нові бітові маски можуть створюватись застовуванням побітових логічних операторів до цих примітивних бітових масок. Наприклад, бітова маска 1011 може бути створена операцією АБО з прапорів FLAG_A, FLAG_B та FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Індивідуальні значення прапорів можна витягнути застосуванням операції І до них та бітової маски, де кожний біт, що має значення один, "витягне" відповідний прапор. Бітова маска <em>маскує</em> невідповідні прапори, об'єднуючи їх операцією І з нулями (звідси термін "бітова маска"). Наприклад, бітову маску 0100 можна використати, щоб побачити, чи встановлений прапор C:</p> + +<pre class="brush: js">// якщо ми маємо кота +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // зробити щось +} +</pre> + +<p>Бітова маска з кількома встановленими прапорами діє як "або/або". Для прикладу, наступні два фрагменти еквівалентні:</p> + +<pre class="brush: js">// якщо ми маємо кажана або ми маємо кота +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // зробити щось +} +</pre> + +<pre class="brush: js">// якщо ми маємо кажана або кота +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // зробити щось +} +</pre> + +<p>Прапори можна встановити, об'єднавши їх операцією АБО з бітовою маскою, де кожний біт, що має значення один, встановить відповідний прапор, якщо прапор ще не встановлений. Наприклад, бітову маску 1100 можна використати, щоб встановити прапори C та D:</p> + +<pre class="brush: js">// так, ми маємо кота та качку +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Прапори можна очистити, об'єднавши їх операцією І з бітовою маскою, де кожний біт, що має значення нуль, очистить відповідний прапор, якщо він ще не очищений. Ця бітова маска може бути створена застосуванням операції НЕ до примітивних бітових масок. Наприклад, бітову маску 1010 можна використати, щоб очистити прапори A та C:</p> + +<pre class="brush: js">// ні, ми не маємо проблеми з мурахами або кота +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Маску також можна створити за допомогою <code>~FLAG_A & ~FLAG_C</code> (правило де Моргана):</p> + +<pre class="brush: js">// ні, ми не маємо проблеми з мурахами і ми не маємо кота +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Прапори можна перемикати, об'єднуючи їх операцією виключне АБО з бітовою маскою, де кожний біт, що має значення один, переключить відповідний прапор. Наприклад, бітову маску 0110 можна використати, щоб переключити прапори B та C:</p> + +<pre class="brush: js">// якщо ми не мали кажана, тепер ми його маємо, +// а якщо він в нас був, бувай, кажанчику +// те саме для котів +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Нарешті, усі прапори можна перевернути оператором НЕ:</p> + +<pre class="brush: js">// входимо у паралельний всесвіт... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Перетворення_типів">Перетворення типів</h3> + +<p>Перетворити двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code> на десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // виводить 11, тобто 1011 +</pre> + +<p>Перетворити десяткове <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">число</a></code> на двійковий <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядок</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // виводить 1011, тобто 11 +</pre> + +<h3 id="Автоматизація_створення_маски">Автоматизація створення маски</h3> + +<p>Ви можете створювати маски з набору <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих</a></code> значень наступним чином:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, тобто: 1011 +var mask2 = createMask(false, false, true); // 4, тобто: 0100 +var mask3 = createMask(true); // 1, тобто: 0001 +// і т.д. + +alert(mask1); // виводить 11, тобто: 1011 +</pre> + +<h3 id="Зворотний_алгоритм_отримання_масиву_булевих_значень_з_маски">Зворотний алгоритм: отримання масиву булевих значень з маски</h3> + +<p>Якщо ви бажаєте створити <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масив</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code> з маски, можете скористатись цим кодом:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // Значенння nMask має бути між -2147483648 та 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// виводить "[true, true, false, true]", тобто: 11, тобто: 1011 +</pre> + +<p>Ви можете перевірити обидва алгоритми одночасно…</p> + +<pre class="brush: js">var nTest = 19; // наша користувацька маска +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>Суто з навчальною метою (оскільки існує метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code>) ми показуємо, як можна модифікувати алгоритм <code>arrayFromMask</code> для створення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/String">рядка</a></code>, що містить двійкове представлення <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число">числа</a></code>, а не <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array">масиву</a></code> <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Boolean">булевих значень</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // Значення nMask має бути між -2147483648 та 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// виводить 00000000000000000000000000001011, тобто 11 +</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.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Двійкові побітові оператори</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Визначені у кількох розділах специфікації: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Побітовий оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Бітові оператори зсуву</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Двійкові побітові оператори</a></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_or/index.html b/files/uk/web/javascript/reference/operators/bitwise_or/index.html new file mode 100644 index 0000000000..89e27290da --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_or/index.html @@ -0,0 +1,113 @@ +--- +title: Побітове АБО (|) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор побітового АБО (<code>|</code>) вертає <code>1</code> для кожної бітової позиції, де відповідні біти одного чи обох операндів дорівнюють <code>1</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> | <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p> + +<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + +<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p> + +<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p> + +<p>Таблиця істинності для операції <code>АБО</code> (OR) наступна:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">b</th> + <th class="header" scope="col">a OR b</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 | 9 (основа 10) = 00000000000000000000000000001111 (основа 2) = 15 (основа 10) +</pre> + +<p>Побітове АБО над будь-яким числом <code><var>x</var></code> з <code>0</code> дає <code><var>x</var></code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_побітового_АБО">Використання побітового АБО</h3> + +<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 | 9; +// 15 (00000000000000000000000000001111)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-BitwiseORExpression', 'Bitwise OR expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_or")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">Присвоєння з побітовим АБО</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html new file mode 100644 index 0000000000..a4197168b7 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з побітовим АБО (|=) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з побітовим АБО (<code>|=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x |= y +<strong>Значення:</strong> x = x | y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_побітовим_АБО">Використання присвоєння з побітовим АБО</h3> + +<pre class="brush: js notranslate">let a = 5; +a |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_or_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">Оператор побітового АБО</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html new file mode 100644 index 0000000000..b9e61d2d39 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_xor/index.html @@ -0,0 +1,113 @@ +--- +title: Виключне побітове АБО (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор виключного побітового АБО (<code>^</code>) повертає <code>1</code> на кожній бітовій позиції, де відповідний біт одного з операндів, але не обох, дорівнює <code>1</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> ^ <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворене на 32-бітне ціле число:</p> + +<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + +<p>Кожен біт першого операнда ставиться у пару до відповідного біту другого операнда: <em>перший біт до першого біту</em>, <em>другий біт до другого</em>, і так далі.</p> + +<p>Оператор застосовується до кожної пари бітів, а результат будується побітово.</p> + +<p>Таблиця істинності для операції виключного побітового АБО (XOR) наступна:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">b</th> + <th class="header" scope="col">a XOR b</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate">. 9 (основа 10) = 00000000000000000000000000001001 (основа 2) + 14 (основа 10) = 00000000000000000000000000001110 (основа 2) + -------------------------------- +14 ^ 9 (основа 10) = 00000000000000000000000000000111 (основа 2) = 7 (основа 10) +</pre> + +<p>Виключне побітове АБО над будь-яким числом <code><var>x</var></code> та <code>0</code> дає <code><var>x</var></code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_виключного_побітового_АБО">Використання виключного побітового АБО</h3> + +<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 ^ 9; +// 7 (00000000000000000000000000000111)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_xor")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">Оператор присвоєння з виключним побітовим АБО</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html new file mode 100644 index 0000000000..9f5375f7e2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з виключним побітовим АБО (^=) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з виключним побітовим АБО (<code>^=</code>) використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x ^= y +<strong>Значення:</strong> x = x ^ y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_виключним_побітовим_АБО">Використання присвоєння з виключним побітовим АБО</h3> + +<pre class="brush: js notranslate">let a = 5; +a ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.bitwise_xor_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">Оператор виключного побітового АБО</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/class/index.html b/files/uk/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..4b4e8bee1e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/class/index.html @@ -0,0 +1,122 @@ +--- +title: Вираз класу +slug: Web/JavaScript/Reference/Operators/class +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - Оператор + - вираз +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Вираз класу</strong> - це один зі способів визначити клас у ECMAScript 2015. Схоже до <a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональних виразів</a>, вирази класів можуть бути іменовані або неіменовані. У іменованих ім'я класу є локальним для використання тільки у тілі класу. Класи JavaScript використовують прототипне наслідування.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { + // тіло класу +};</pre> + +<h2 id="Опис">Опис</h2> + +<p>Вираз класу має синтаксис, подібний до синтаксису <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення (оператору) класу</a>. Однак, у виразі класу ви можете опустити ім'я класу ("зв'язуючий ідентифікатор"), чого не можна зробити у оголошенні класу. Додатково, вираз класу дозволяє перевизначити/переоголосити клас та <strong>не викинути</strong> жодних помилок типу, як у <a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошенні класу</a>. Конструктор є необов'язковою властивістю. А результатом <em>typeof </em>для класів, створених за допомогою ключового слова, завжди буде "function".</p> + +<p>Як і у оголошенні класу, тіло класу у виразі класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>.</p> + +<pre class="brush: js">'use strict'; +var Foo = class {}; // конструктор є необов'язковою властивістю +var Foo = class {}; // дозволяється перевизначення + +typeof Foo; //вертає "function" +typeof class {}; //вертає "function" + +Foo instanceof Object; // true +Foo instanceof Function; // true +class Foo {}; // Викидає TypeError, не дозволяє перевизначення +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Простий_вираз_класу">Простий вираз класу</h3> + +<p>Це простий анонімний вираз класу, на який можна посилатись через змінну "Foo".</p> + +<pre class="brush: js">var Foo = class { + constructor() {} + bar() { + return 'Привіт!'; + } +}; + +var instance = new Foo(); +instance.bar(); // "Привіт!" +Foo.name; // "Foo" +</pre> + +<h3 id="Іменовані_вирази_класів">Іменовані вирази класів</h3> + +<p>Якщо ви бажаєте звертатись до поточного класу всередині тіла класу, ви можете створити іменований вираз класу. Це ім'я видиме тільки в області видимості самого виразу класу.</p> + +<pre class="brush: js">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo is not defined +Foo.name; // "NamedFoo" +</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('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.class")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/function">функціональний вираз</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/class">оголошення класу</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/comma_operator/index.html b/files/uk/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..6637e57fa6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,90 @@ +--- +title: 'Оператор кома (,)' +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор кома </strong>(<strong><code>,</code></strong>) обчислює кожний свій операнд (зліва направо) і повертає значення останнього операнду. Це дозволяє створити складений вираз, де обчислюється більше одного виразу, а остаточним значенням складеного виразу є значення крайнього правого з його виразів. Зазвичай, його використовують, щоб передати декілька параметрів у цикл <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>expr1</code>, <code>expr2</code>, <code>expr3</code>...</dt> + <dd>Один або більше виразів, останній з яких буде повернений в якості значення складеного виразу.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Ви можете скористатись оператором кома, коли бажаєте використати декілька виразів там, де вимагається лише один. Найбільш поширене використання цього оператора - це подання декількох параметрів у цикл <code>for</code>.</p> + +<p>Оператор кома повністю відмінний від коми у масивах, об'єктах та аргументах та параметрах функцій.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Якщо <code>a</code> - 2-вимірний масив з 10 елементів по кожній стороні, наступний код використовує оператор кома, щоб збільшити <code>i</code> та зменшити <code>j</code> одночасно.</p> + +<p>Наступний код виводить значення діагональних елементів масиву:</p> + +<pre class="brush:js;highlight:[1] notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) + console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> + +<p>Зауважте, що оператори кома у присвоєннях можуть, на перший вигляд, не мати свого звичайного ефекту, тому що вони не існують всередині виразу. У наступному прикладі <code>a</code> присвоюється значення <code>b = 3</code> (тобто, 3), але вираз <code>c = 4</code> все одно обчислюється, і його результат повертається у консоль (тобто, 4). Причиною є <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритет і асоціативність операторів</a>.</p> + +<pre class="brush: js notranslate">var a, b, c; + +a = b = 3, c = 4; // Повертає у консоль 4 +console.log(a); // 3 (крайній зліва) + +var x, y, z; + +x = (y = 5, z = 6); // Повертає у консоль 6 +console.log(x); // 6 (крайній справа) +</pre> + +<h3 id="Обробка_перед_поверненням">Обробка перед поверненням</h3> + +<p>Інший приклад того, що можна зробити оператором кома - це обробка перед поверненням. Як зазначалося, тільки останній елемент буде повернений, але всі інші також будуть обчислені. Отже, можна зробити таке:</p> + +<pre class="brush: js notranslate">function myFunc() { + var x = 0; + + return (x += 1, x); // те саме, що return ++x; +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">Цикл <code>for</code></a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/conditional_operator/index.html b/files/uk/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..01c51d0d46 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,109 @@ +--- +title: Умовний (тернарний) оператор +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - Conditional + - JavaScript + - Оператор + - тернарний + - умовний +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Умовний (тернарний) оператор</strong> - це єдиний оператор JavaScript, який приймає три операнди: умову, за якою йде знак питання (<code>?</code>), далі вираз, який має виконатися, якщо умова {{Glossary("truthy","правдива")}}, далі двокрапка (<code>:</code>) і, нарешті, вираз, який має виконатись, якщо умова {{Glossary("falsy","хибна")}}. Цей оператор часто використовують в якості скорочення конструкції <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>condition</code></dt> + <dd>Вираз, який використовується в якості умови.</dd> + <dt><code>exprIfTrue</code></dt> + <dd>Вираз, який виконується, якщо вираз <code>condition</code> оцінений як {{Glossary("truthy", "правдивий")}} (який дорівнює або може бути приведений до <code>true</code>).</dd> + <dt><code>exprIfFalse</code></dt> + <dd>Вираз, який виконується, якщо вираз <code>condition</code> є {{Glossary("falsy", "хибним")}} (тобто, його значення може бути приведене до <code>false</code>).</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Окрім <code>false</code>, можливими хибними значеннями є: <code>null</code>, <code>NaN</code>, <code>0</code>, порожній рядок (<code>""</code>) та <code><code><code><code>undefined</code></code></code></code>. Якщо <em><code>condition</code> </em>дорівнює будь-якому з них, результатом умовного виразу буде результат виконання виразу <code>exprIfFalse</code>.</p> + +<p>Простий приклад:</p> + +<pre class="brush: js">var age = 26; +var beverage = (age >= 21) ? "Пиво" : "Сік"; +console.log(beverage); // "Пиво" +</pre> + +<p>Одним з типових використань є обробка значення, яке може дорівнювати <code>null</code>:</p> + +<pre class="brush: js">function greeting(person) { + var name = person ? person.name : "незнайомець"; + return "Привіт, " + name; +} + +console.log(greeting({name: 'Аліса'})); // "Привіт, Аліса" +console.log(greeting(null)); // "Привіт, незнайомець" +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> <a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор необов'язкового ланцюгування </a>був створений для використання у таких випадках. На момент написання (липень 2019), він досі є експериментальним і не був реалізований.</p> +</div> + +<h3 id="Умовні_ланцюги">Умовні ланцюги</h3> + +<p>Тернарний оператор є правоасоціативним, це означає, що він може створювати ланцюги наступним чином, схоже на ланцюг <code>if … else if … else if … else</code>:</p> + +<pre class="brush: js">function example(…) { + return condition1 ? value1 + : condition2 ? value2 + : condition3 ? value3 + : value4; +} + +// Є еквівалентом: + +function example(…) { + if (condition1) { return value1; } + else if (condition2) { return value2; } + else if (condition3) { return value3; } + else { return value4; } +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else">Оператор if</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></li> + <li><a href="/uk/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">Вирази та оператори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/decrement/index.html b/files/uk/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..e97c5aaec9 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,82 @@ +--- +title: Декремент (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - JavaScript + - Декремент + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор декременту (<code>--</code>) зменшує свій операнд (віднімає одиницю) та повертає його значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var>-- або --<var>x</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Якщо оператор використовується постфіксно, після операнду (наприклад, <code>x--</code>), тоді він зменшує значення та повертає його до зменшення.</p> + +<p>Якщо оператор використовується префіксно, перед операндом (наприклад, <code>--x</code>), тоді він зменшує значення та повертає його після зменшення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Постфіксний_декремент">Постфіксний декремент</h3> + +<pre class="brush: js notranslate">let x = 3; +y = x--; + +// y = 3 +// x = 2 +</pre> + +<h3 id="Префіксний_декремент">Префіксний декремент</h3> + +<pre class="brush: js notranslate">let a = 2; +b = --a; + +// a = 1 +// b = 1 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.decrement")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/delete/index.html b/files/uk/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..3df636e0a5 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,298 @@ +--- +title: Оператор delete +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - Object + - delete + - Властивість + - Оператор + - керування пам'яттю +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><span class="seoSummary">Оператор JavaScript <strong><code>delete</code></strong> видаляє властивість об'єкта. Якщо на цю властивість більше немає посилань, пам'ять під неї зрештою звільняється автоматично.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">delete <em>вираз</em> </pre> + +<p>де <em>вираз</em> має вертати посилання на <a href="/uk/docs/Glossary/property/JavaScript">властивість</a>, наприклад:</p> + +<pre class="syntaxbox">delete <em>object.property</em> +delete <em>object</em>['<em>property</em>'] +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Ім'я об'єкта, чи вираз, що повертає цей об'єкт.</dd> + <dt><code>property</code></dt> + <dd>Властивість, яку треба видалити.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Завжди <code>true</code>, окрім випадків, коли властивість є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">особистою</a> властивістю, <a href="/uk/docs/Web/JavaScript/Reference/Errors/Cant_delete">недоступною для налаштування</a>, в цьому випадку у нестрогому режимі повертається <code>false</code>.</p> + +<h3 id="Винятки">Винятки</h3> + +<p>Викидає {{jsxref("TypeError")}} у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, якщо властивість є особистою властивістю, недоступною для налаштування.</p> + +<h2 id="Опис">Опис</h2> + +<p>Попри розповсюджену думку, оператор <code>delete</code> не має <strong>нічого</strong> спільного з прямим вивільненням пам'яті. Керування пам'яттю відбувається опосередковано через розривання посилань. Більше інформації дивіться у статті <a href="/uk/docs/Web/JavaScript/Memory_Management">Керування пам'яттю</a>.</p> + +<p>Оператор <code><strong>delete</strong></code> видаляє задану властивість з об'єкта. В разі успішного видалення, він поверне <code>true</code>, інакше поверне <code>false</code>. Однак, важливо враховувати наступні сценарії:</p> + +<ul> + <li>Якщо властивість, яку ви намагаєтесь видалити, не існує, <code>delete</code> не матиме жодного ефекту та поверне <code>true</code></li> + <li>Якщо властивість з таким самим ім'ям існує у ланцюзі прототипів об'єкта, тоді, після видалення, об'єкт використовуватиме властивість з ланцюжка прототипів (іншими словами, <code>delete</code> має ефект лише для особистих властивостей).</li> + <li>Будь-яка властивість, оголошена через {{jsxref("Statements/var","var")}}, не може бути видалена з глобальної області видимості чи з області видимості функції. + <ul> + <li>Таким чином, <code>delete</code> не може видаляти функції у глобальній області видимості (незалежно від того, чи є вони оголошеннями функції, чи функціональними виразами).</li> + <li>Функції, які є частиною об'єкта (не є частиною глобальної області видимості), можуть бути видалені оператором <code>delete</code>.</li> + </ul> + </li> + <li>Будь-яка властивість, оголошена через {{jsxref("Statements/let","let")}} або {{jsxref("Statements/const","const")}}, не може бути видалена з області видимості, всередині якої вона була оголошена.</li> + <li>Властивості, недоступні для налаштування, не можуть бути видалені. Це також стосується властивостей вбудованих об'єктів, таких як {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, та властивостей, які були створені як недоступні для налаштування за допомогою методів на кшталт {{jsxref("Object.defineProperty()")}}.</li> +</ul> + +<p>Наступний фрагмент надає простий приклад:</p> + +<pre class="brush: js">var Employee = { + age: 28, + name: 'абв', + designation: 'розробник' +} + +console.log(delete Employee.name); // вертає true +console.log(delete Employee.age); // вертає true + +// При спробі видалити властивість, яка не існує, +// повертається true +console.log(delete Employee.salary); // вертає true +</pre> + +<h3 id="Властивості_недоступні_для_налаштування">Властивості, недоступні для налаштування</h3> + +<p>Коли властивість позначена як недоступна для налаштування, <code>delete</code> не матиме жодного ефекту та поверне <code>false</code>. У строгому режимі це спричинить помилку <code>TypeError</code>.</p> + +<pre class="brush: js">var Employee = {}; +Object.defineProperty(Employee, 'name', {configurable: false}); + +console.log(delete Employee.name); // вертає false +</pre> + +<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}} та {{jsxref("Statements/const","const")}} створюють властивості, недоступні для налаштування, які не можуть бути видалені оператором <code>delete</code>:</p> + +<pre class="brush: js">var nameOther = 'XYZ'; + +// Ми можемо звернутися до цієї глобальної властивості так: +Object.getOwnPropertyDescriptor(window, 'nameOther'); + +// виведе: Object {value: "XYZ", +// writable: true, +// enumerable: true, +// <strong>configurable: false</strong>} + +// Оскільки "nameOther" додана за допомогою ключового +// слова var, вона позначена як недоступна для налаштування + +delete nameOther; // вертає false</pre> + +<p>У строгому режимі це спричинило б виняток.</p> + +<h3 id="Строгий_режим_проти_нестрогого_режиму">Строгий режим проти нестрогого режиму</h3> + +<p>У строгому режимі, якщо <code>delete</code> використовується на прямому посиланні на змінну, аргумент функції чи ім'я функції, це викине {{jsxref("SyntaxError")}}<strong>.</strong></p> + +<p>Будь-яка змінна, оголошена через <code>var</code>, позначається як недоступна для налаштування. У наступному прикладі змінна <code>salary</code> недоступна для налаштування та не може бути видалена. У нестрогому режимі ця операція <code>delete</code> поверне <code>false</code>.</p> + +<pre class="brush: js">function Employee() { + delete salary; + var salary; +} + +Employee(); +</pre> + +<p>Подивимось, як той самий код поводиться у строгому режимі. Замість того, щоб повернути <code>false</code>, код викидає <code>SyntaxError</code>.</p> + +<pre class="brush: js">"use strict"; + +function Employee() { + delete salary; // SyntaxError + var salary; +} + +// Схожим чином, пряме звернення до фукнції +// оператором delete викине SyntaxError + +function DemoFunction() { + //якийсь код +} + +delete DemoFunction; // SyntaxError +</pre> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Створює властивість adminName у глобальній області видимості. +adminName = 'абв'; + +// Створює властивість empCount у глобальній області видимості. +// Оскільки ми використовуємо var, вона недоступна для налаштування. Так само як з let та const. +var empCount = 43; + +EmployeeDetails = { + name: 'абв', + age: 5, + designation: 'Розробник' +}; + +// adminName - властивість у глобальній області видимості. +// Вона може бути видалена, оскільки була створена без var, +// і тому доступна для налаштування. +delete adminName; // вертає true + +// З іншого боку, empCount недоступна для налаштування, +// оскільки використовувався оператор var. +delete empCount; // вертає false + +// delete можна використовувати, щоб видаляти властивості об'єктів. +delete EmployeeDetails.name; // вертає true + +<strong>// </strong>Навіть якщо властивість не існує, delete поверне "true". +delete EmployeeDetails.salary; // вертає true + +// delete не діє на вбудовані статичні властивості. +delete Math.PI; // вертає false + +// EmployeeDetails - властивість у глобальній області видимості. +// Оскільки вона була визначена без "var", вона доступна для налаштування. +delete EmployeeDetails; // вертає true + +function f() { + var z = 44; + + // delete не діє на локальні змінні + delete z; // вертає false +} +</pre> + +<h3 id="delete_та_ланцюжок_прототипів"><code>delete</code> та ланцюжок прототипів</h3> + +<p>У наступному прикладі ми видаляємо особисту властивість об'єкта, в той час, як однойменна властивість доступна через ланцюжок прототипів:</p> + +<pre class="brush: js">function Foo() { + this.bar = 10; +} + +Foo.prototype.bar = 42; + +var foo = new Foo(); + +// foo.bar є особистою властивістю +console.log(foo.bar); // 10 + +// Видаляємо особисту властивість +// у об'єкті foo. +delete foo.bar; // вертає true + +// Властивість foo.bar досі доступна +// у ланцюжку прототипів. +console.log(foo.bar); // 42 + +// Видаляємо властивість прототипу. +delete Foo.prototype.bar; // вертає true + +// Властивість "bar" більше не може +// наслідуватись від Foo, оскільки була +// видалена. +console.log(foo.bar); // undefined</pre> + +<h3 id="Видалення_елементів_масиву">Видалення елементів масиву</h3> + +<p>Коли ви видаляєте елемент масиву, довжина масиву не змінюється. Це зберігається, навіть якщо ви видалите останній елемент масиву.</p> + +<p>Коли оператор <code>delete</code> видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі <code>trees[3]</code> видаляється за допомогою <code>delete</code>.</p> + +<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; +delete trees[3]; +if (3 in trees) { + // це не виконається +}</pre> + +<p>Якщо ви бажаєте, щоб елемент масиву існував, але мав значення undefined, скористайтесь значенням <code>undefined</code> замість оператора <code>delete</code>. У наступному прикладі елементу <code>trees[3]</code> присвоюється значення undefined, але елемент масиву досі існує:</p> + +<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; +trees[3] = undefined; +if (3 in trees) { + // це виконається +}</pre> + +<p>Якщо замість цього ви хочете видалити елемент масиву, змінивши вміст масиву, скористайтесь методом <code>{{jsxref("Array.splice", "splice")}}</code>. У наступному прикладі елемент <code>trees[3]</code> повністю видаляється з масиву за допомогою методу <code>{{jsxref("Array.splice", "splice")}}</code>:</p> + +<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; +trees.splice(3,1); +console.log(trees); // ["секвоя", "лавр", "кедр", "клен"] +</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('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.delete")}}</p> + +<h2 id="Примітки_щодо_кросбраузерності">Примітки щодо кросбраузерності</h2> + +<p>Хоча ECMAScript робить порядок перебору об'єктів залежним від реалізації, може здаватись, що усі основні веб-переглядачі підтримують порядок перебору, в якому властивість, додана першою, йде першою (принаймні, для не прототипних властивостей). Однак, у Internet Explorer при використанні <code>delete</code> з властивістю, виникає дивна поведінка, яка заважає іншим переглядачам використовувати прості об'єкти, такі як об'єктні літерали, як впорядковані асоціативні масиви. У Explorer, хоча <em>значення </em>властивості дійсно стає undefined, але, якщо пізніше користувач знову додає властивість з таким самим ім'ям, властивість буде перебиратися на своїй <em>старій</em> позиції, а не в кінці перебору, як можна було б очікувати після видалення властивості та повторного її додавання.</p> + +<p>Якщо ви хочете використовувати впорядкований асоціативний масив у кросбраузерному середовищі, використовуйте об'єкт {{jsxref("Map")}}, якщо він доступний, або імітуйте цю структуру двома окремими масивами (один для ключів, а інший для значень), або створіть масив об'єктів з однією властивістю, і т. д.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li> + <li>{{jsxref("Reflect.deleteProperty()")}}</li> + <li>{{jsxref("Map.prototype.delete()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/division/index.html b/files/uk/web/javascript/reference/operators/division/index.html new file mode 100644 index 0000000000..b1e95b2eb3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/division/index.html @@ -0,0 +1,75 @@ +--- +title: Ділення (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Division +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор ділення (<code>/</code>) повертає частку своїх операндів, де лівий операнд є діленим, а правий операнд є дільником.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> / <var>y</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_ділення">Базове ділення</h3> + +<pre class="brush: js notranslate">1 / 2 // 0.5 + +Math.floor(3 / 2) // 1 + +1.0 / 2.0 // 0.5 +</pre> + +<h3 id="Ділення_на_нуль">Ділення на нуль</h3> + +<pre class="brush: js notranslate">2.0 / 0 // Infinity + +2.0 / 0.0 // Infinity, тому що 0.0 === 0 + +2.0 / -0.0 // -Infinity</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.division")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/division_assignment/index.html b/files/uk/web/javascript/reference/operators/division_assignment/index.html new file mode 100644 index 0000000000..f32b4020a0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/division_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння з діленням (/=) +slug: Web/JavaScript/Reference/Operators/Division_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Division_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з діленням (<code>/=</code>) ділить змінну на значення правого операнда та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x /= y +<strong>Значення:</strong> x = x / y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_діленням">Використання присвоєння з діленням</h3> + +<pre class="brush: js notranslate">// Розглянемо таку змінну +// bar = 5 + +bar /= 2 // 2.5 +bar /= 'няв' // NaN +bar /= 0 // Infinity</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.division_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/equality/index.html b/files/uk/web/javascript/reference/operators/equality/index.html new file mode 100644 index 0000000000..379b354b01 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/equality/index.html @@ -0,0 +1,125 @@ +--- +title: Рівність (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор рівності (<code>==</code>) перевіряє, чи два операнди рівні, повертаючи результат типу Boolean. На відміну від оператору <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>, він намагається перетворити для порівняння операнди, які належать до різних типів.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператори рівності (<code>==</code> та <code>!=</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">алгоритм абстрактної рівності</a> для порівняння двох операндів. Його можна загалом описати наступним чином:</p> + +<ul> + <li>Якщо обидва операнди є об'єктами, повертати <code>true</code> тільки якщо обидва операнди посилаються на той самий об'єкт.</li> + <li>Якщо один операнд дорівнює <code>null</code>, а інший <code>undefined</code>, повертати <code>true</code>.</li> + <li>Якщо операнди належать до різних типів, спробувати привести їх до одного типу перед порівнянням: + <ul> + <li>При порівнянні числа з рядком спробувати перетворити рядок у числове значення.</li> + <li>Якщо один з операндів є типом <code>Boolean</code>, перетворити операнд Boolean на 1, якщо він дорівнює <code>true</code>, і на +0, якщо він дорівнює <code>false</code>.</li> + <li>Якщо один з операндів є об'єктом, а інший числом або рядком, спробувати перетворити об'єкт на примітив за допомогою методів об'єкта <code>valueOf()</code> та <code>toString()</code>.</li> + </ul> + </li> + <li>Якщо операнди належать до одного типу, вони порівнюються наступним чином: + <ul> + <li><code>String</code>: повернути <code>true</code> тільки якщо обидва операнди мають однакові символи у однаковому порядку.</li> + <li><code>Number</code>: повернути <code>true</code> тільки якщо обидва операнди мають однакове значення. <code>+0</code> та <code>-0</code> вважаються однаковим значенням. Якщо будь-який з операндів є <code>NaN</code>, повернути <code>false</code>.</li> + <li><code>Boolean</code>: повернути <code>true</code> тільки якщо обидва операнди дорівнюють <code>true</code> або обидва дорівнюють <code>false</code>.</li> + </ul> + </li> +</ul> + +<p>Найбільш помітна відмінність між цим оператором та оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a> (<code>===</code>) полягає в тому, що оператор строгої рівності не намагається виконувати перетворення типів. Натомість, оператор строгої рівності завжди вважає операнди різних типів різними.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_без_перетворення_типів">Порівняння без перетворення типів</h3> + +<pre class="brush: js notranslate">1 == 1; // true +"привіт" == "привіт"; // true</pre> + +<h3 id="Порівняння_з_перетворенням_типів">Порівняння з перетворенням типів</h3> + +<pre class="brush: js notranslate">"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +null == undefined; // true + +const number1 = new Number(3); +const number2 = new Number(3); +number1 == 3; // true +number1 == number2; // false</pre> + +<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3> + +<pre class="brush: js notranslate">const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 == object2 // false +object2 == object2 // true</pre> + +<h3 id="Порівняння_рядків_та_обєктів_String">Порівняння рядків та об'єктів String</h3> + +<p>Зауважте, що рядки, створені за допомогою <code>new String()</code>, є об'єктами. Якщо ви порівняєте один з них з рядковим літералом, об'єкт <code>String</code> буде перетворений на рядковий літерал, і їхній вміст буде порівнюватись. Однак, якщо обидва операнди є об'єктами <code>String</code>, вони порівнюються як об'єкти та мусять посилатись на один і той самий об'єкт, щоб вважатись однаковими:</p> + +<pre class="brush: js notranslate">const string1 = "привіт"; +const string2 = String("привіт"); +const string3 = new String("привіт"); +const string4 = new String("привіт"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true</pre> + +<h3 id="Порівняння_дат_та_рядків">Порівняння дат та рядків</h3> + +<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // наприклад: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" +console.log(d == s); //true</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.equality")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/exponentiation/index.html b/files/uk/web/javascript/reference/operators/exponentiation/index.html new file mode 100644 index 0000000000..e50f793f42 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/exponentiation/index.html @@ -0,0 +1,102 @@ +--- +title: Піднесення до степеня (**) +slug: Web/JavaScript/Reference/Operators/Exponentiation +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Exponentiation +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор піднесення до степеня (<code>**</code>) повертає результат піднесення першого операнду до показника степеня другого операнду.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>var1</var> ** <var>var2</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор піднесення до степеня правоасоціативний. <code><var>a</var> ** <var>b</var> ** <var>c</var></code> дорівнює <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p> + +<p>У більшості мов, таких як PHP, Python та інших, які мають оператор піднесення до степеня (<code>**</code>), оператор піднесення до степеня має вищий пріоритет, ніж унарні оператори, такі як унарний <code>+</code> та унарний <code>-</code>, але існує кілька винятків. Наприклад, у Bash оператор <code>**</code> має нижчий пріоритет, ніж унарні оператори.</p> + +<p>У JavaScript неможливо написати неоднозначний вираз піднесення до степеня, тобто, ви не можете поставити унарний оператор (<code>+/-/~/!/delete/void/typeof</code>) одразу перед числом основи степеня.</p> + +<pre class="brush: js notranslate">-2 ** 2; +// 4 у Bash, -4 у інших мовах. +// Це помилка JavaScript, оскільки операція неоднозначна. + + +-(2 ** 2); +// -4 у JavaScript, а наміри автора однозначні. +</pre> + +<p>Зауважте, що деякі мови програмування використовують символ карет <kbd>^</kbd> для піднесення до степеня, але JavaScript використовує цей символ як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">оператор виключного побітового АБО (XOR)</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базове_піднесення_до_степеня">Базове піднесення до степеня</h3> + +<pre class="brush: js notranslate">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN +</pre> + +<h3 id="Асоціативність">Асоціативність</h3> + +<pre class="brush: js notranslate">2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</pre> + +<h3 id="Використання_з_унарними_операторами">Використання з унарними операторами</h3> + +<p>Щоб змінити знак результату виразу піднесення до степеня на протилежний:</p> + +<pre class="brush: js notranslate">-(2 ** 2) // -4 +</pre> + +<p>Щоб зробити основу степеня у виразі від'ємним числом:</p> + +<pre class="brush: js notranslate">(-2) ** 2 // 4 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exp-operator', 'Exponentiation operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.exponentiation")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html new file mode 100644 index 0000000000..c5bd4c1353 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з піднесенням до степеня (**=) +slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з піднесенням до степеня (<code>**=</code>) підносить значення змінної до показника степеня правого операнда.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x **= y +<strong>Значення:</strong> x = x ** y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_піднесенням_до_степеня">Використання присвоєння з піднесенням до степеня</h3> + +<pre class="brush: js notranslate">// Розглянемо таку змінну +// bar = 5 + +bar **= 2 // 25 +bar **= 'гав' // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.exponentiation_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/expression_closures/index.html b/files/uk/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..e3a0bff185 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,78 @@ +--- +title: Вирази-замикання +slug: Web/JavaScript/Reference/Operators/Expression_closures +tags: + - Function + - JavaScript + - Оператор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}} +<div class="warning"><strong>Нестандартний. Не використовуйте!</strong><br> +Синтаксис виразів-замикань є нерекомендованою особливою функціональністю Firefox, він був прибраний, починаючи з Firefox 60. Для використання у майбутньому розгляньте <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>.</div> +</div> + +<p>Вирази-замикання - це скорочений синтаксис для написання простих функцій.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише всередині тіла функції.</dd> + <dt><code>paramN</code></dt> + <dd>Ім'я аргумента, що передається у функцію. Функція може мати до 255 аргументів.</dd> + <dt><code>expression</code></dt> + <dd>Вираз, який складає тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Це доповнення є не більше, ніж скороченим синтаксисом для написання простих функцій, надаючи мові щось схоже на типову <a class="external" href="https://uk.wikipedia.org/wiki/%D0%9B%D1%8F%D0%BC%D0%B1%D0%B4%D0%B0-%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F">нотацію лямбда-числення</a>.</p> + +<p>JavaScript 1.7 та старші:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Цей синтаксис дозволяє не писати фігурні дужки та оператор 'return' - вони стають неявними. Такий запис не надає жодної іншої переваги в написанні коду, окрім синтаксично коротшого запису.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Скорочений запис для зв'язування прослуховувачів подій:</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>Використання цієї нотації з деякими функціями масивів з JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Functions", "Функції")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Statements/function", "оператор function")}}</li> + <li>{{JSxRef("Operators/function", "функціональний вираз")}}</li> + <li>{{JSxRef("Statements/function*", "оператор function*")}}</li> + <li>{{JSxRef("Operators/function*", "вираз function*")}}</li> + <li>{{JSxRef("GeneratorFunction")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/function/index.html b/files/uk/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..8e8760660b --- /dev/null +++ b/files/uk/web/javascript/reference/operators/function/index.html @@ -0,0 +1,154 @@ +--- +title: Функціональний вираз +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключове слово <strong><code>function</code></strong> може використовуватись для визначення функції всередині виразу.</p> + +<p>Ви також можете визначати функції за допомогою конструктора <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Statements/function"><code>оголошення функції</code></a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +};</pre> + +<p>Починаючи з ES2015 ви також можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілковими функціями</a>.</p> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне лише у тілі функції.</dd> + <dt><code>paramN</code></dt> + <dd>Ім'я аргументу, який передається у функцію.</dd> + <dt><code>statements</code></dt> + <dd>Інструкції, що складають тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Функціональний вираз дуже схожий на оголошення функції та має майже такий самий синтаксис (дивіться <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функції</a>). Головна відмінність між функціональним виразом та оголошенням функції - це <em>ім'я функції</em>, яке може бути пропущене у функціональних виразах для створення <em>анонімних</em> функцій. Функціональний вираз можна використовувати як <a href="/uk/docs/Glossary/IIFE">НВФВ (Негайно виконуваний функціональний вираз)</a>, який запускається одразу після визначення. Дивіться також главу про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>, щоб дізнатись більше.</p> + +<h3 id="Підняття_функціонального_виразу">Підняття функціонального виразу</h3> + +<p>Функціональні вирази у JavaScript не піднімаються, на відміну від {{jsxref("Statements/function", "оголошень функцій", "#Підняття_оголошення_функції")}}. Не можна використовувати функціональний вираз до його визначення:</p> + +<pre class="brush: js">console.log(notHoisted) // undefined +//хоча імена змінних піднімаються, визначення не піднімається і дорівнює undefined. +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h3 id="Іменований_функціональний_вираз">Іменований функціональний вираз</h3> + +<p>Якщо бажаєте посилатись на поточну функцію всередині тіла функції, то вам потрібно створити іменований функціональний вираз. <u><strong>Це ім'я є локальним і доступне тільки всередині тіла (області видимості) функції</strong></u>. Це також дозволяє не використовувати нестандартну властивість <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p> + +<pre class="brush: js">var math = { + 'factit': function factorial(n) { + console.log(n) + if (n <= 1) { + return 1; + } + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1; +</pre> + +<p>Змінна, якій присвоюється функціональний вираз, матиме властивість <code>name</code> (ім'я). Ім'я не змінюється, якщо вираз присвоюється іншій змінній. Якщо ім'я функції пропущене, це буде ім'я змінної (неявне ім'я). Якщо ім'я функції присутнє, це буде ім'я функції (явне ім'я). Це також стосується <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій </a>(стрілкові функції не мають імені, тому ви можете задати лише неявне ім'я змінної).</p> + +<pre class="brush: js">var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (помилка, тому що baz == undefined) +</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступний приклад визначає неіменовану функцію та присвоює її <code>x</code>. Функція вертає квадрат свого аргументу:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<p>Найчастіше вони використовуються як <a href="/uk/docs/Glossary/Callback_function">функції зворотного виклику</a>:</p> + +<pre class="brush: js">button.addEventListener('click', function(event) { + console.log('кнопка натиснута!') +})</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('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Functions/Стрілкові_функції", "Стрілкові функції")}}</li> + <li>{{jsxref("Functions", "Функції та область видимості функції")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "оголошення функції")}}</li> + <li>{{jsxref("Statements/function*", "оголошення function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "вираз async function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/function_star_/index.html b/files/uk/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..677eb8b1fb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,90 @@ +--- +title: Вираз function* +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Ітератор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключове слово <strong><code>function*</code></strong> може використовуватись для визначення функції-генератора всередині виразу.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції. Можна пропустити, в цьому випадку функція буде <em>анонімною</em>. Ім'я доступне тільки всередині тіла функції.</dd> + <dt><code>paramN</code></dt> + <dd>Ім'я аргументу, що передається у функцію. Функція може мати до 255 аргументів.</dd> + <dt><code>statements</code></dt> + <dd>Інструкції, що складають тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Вираз <code>function*</code> дуже схожий та має практично однаковий синтаксис з {{jsxref('Statements/function*', 'оператором function*')}}. Головна відмінність між виразом <code>function*</code> та оператором <code>function*</code> - це <em>ім'я функції,</em> яке можна не вказувати у виразах <code>function*</code>, щоб створювати <em>анонімні</em> функції-генератори. Дивіться також більше інформації у главі про <a href="/uk/docs/Web/JavaScript/Reference/Functions">функції</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступний приклад визначає безіменну функцію-генератор та присвоює її змінній <code>x</code>. Ця функція видає квадрат свого аргументу:</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</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('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/function*", "оператор function*")}}</li> + <li>Об'єкт {{jsxref("GeneratorFunction")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>Об'єкт {{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "оператор function")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Functions", "Функції")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..30d8a0f6d7 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,174 @@ +--- +title: Заповнення генераторів +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +tags: + - JavaScript + - Ітератор + - застарілий + - нестандартний +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}} +<div class="blockIndicator warning"> +<p><strong>Нестандартний. Не використовуйте!</strong><br> + Синтаксис заповнень генераторів є нестандартним та був прибраний, починаючи з Firefox 58. Для використання в майбутньому розгляньте {{JSxRef("Statements/function*", "генератори", "", 1)}}.</p> +</div> +</div> + +<p>Синтаксис <strong>заповнення генераторів </strong>(generator comprehension) був виразом JavaScript, який дозволяв швидко збирати нову функцію-генератор, базуючись на вже існуючому ітерабельному об'єкті. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">(for (x of iterable) x) +(for (x of iterable) if (condition) x) +(for (x of iterable) for (y of iterable) x + y) +</pre> + +<h2 id="Опис">Опис</h2> + +<p>У заповненнях генераторів дозволені наступні два види компонентів:</p> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}} та</li> + <li>{{JSxRef("Statements/if...else", "if")}}</li> +</ul> + +<p>Перебір <code>for-of</code> завжди є першим компонентом. Можна використовувати більше одного перебору <code>for-of</code> чи if-конструкцій.</p> + +<p>Значним недоліком {{JSxRef("Operators/Array_comprehensions","заповнень масивів","","true")}} є те, що вони можуть спричинити конструювання у пам'яті цілого нового масиву. Коли самі вхідні дані для заповнення є маленьким масивом, затрати пам'яті є незначними — але коли вхідні дані є великим масивом, або затратним (чи взагалі нескінченним) генератором, створення нового масиву може бути проблематичним.</p> + +<p>Генератори дозволяють ліниві обчислення послідовностей, з обчисленням елементів на вимогу, коли є потреба. Заповнення генераторів синтаксично майже ідентичні заповненням масивів — вони використовують круглі дужки замість квадратних — але замість створення масиву вони створюють генератор, який може виконуватися ліниво. Можете вважати їх скороченим синтаксисом для створення генераторів.</p> + +<p>Припустимо, ми маємо ітератор <code>it</code>, який перебирає великі послідовності цілих чисел. Ми бажаємо створити новий ітератор, який перебиратиме їхні подвоєні значення. Заповнення масиву створило б цілий масив у пам'яті, що містив би подвоєні значення:</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>Заповнення генератора, з іншого боку, створило б новий ітератор, який створював би подвоєні значення на вимогу, в разі потреби:</p> + +<pre class="brush: js">var it2 = (for (i in it) i * 2); +console.log(it2.next()); // Перше значення з it, подвоєне +console.log(it2.next()); // Друге значення з it, подвоєне +</pre> + +<p>Коли заповнення генератора використовується як аргумент функції, круглі дужки, що використовуються для виклику функції, означають, що зовнішні дужки можна пропустити:</p> + +<pre class="brush: js">var result = doSomething(for (i in it) i * 2); +</pre> + +<p>Значною відмінністю між цими двома прикладами є те, що, використовуючи заповнення генератора, ви перебиратимете структуру 'obj' лише один раз, всього, на відміну від одного обходу при заповненні масиву та ще одного під час його перебору.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Прості_заповнення_генераторів">Прості заповнення генераторів</h3> + +<pre class="brush:js">(for (i of [1, 2, 3]) i * i ); +// функція-генератор, що видає 1, 4 та 9 + +[...(for (i of [1, 2, 3]) i * i )]; +// [1, 4, 9] + +var abc = ['А', 'Б', 'В']; +(for (letters of abc) letters.toLowerCase()); +// функція-генератор, що видає "а", "б" та "в" +</pre> + +<h3 id="Заповнення_генераторів_з_оператором_if">Заповнення генераторів з оператором if</h3> + +<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014]; + +(for (year of years) if (year > 2000) year); +// функція-генератор, що видає 2006, 2010 та 2014 + +(for (year of years) if (year > 2000) if (year < 2010) year); +// функція-генератор, що видає 2006, те саме нижче: + +(for (year of years) if (year > 2000 && year < 2010) year); +// функція-генератор, що видає 2006 +</pre> + +<h3 id="Заповнення_генераторів_у_порівнянні_з_функцією-генератором">Заповнення генераторів у порівнянні з функцією-генератором</h3> + +<p>Легко зрозуміти синтаксис заповнення генераторів, порівнявши його з функцією-генератором.</p> + +<p>Приклад 1: Простий генератор.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Функція-генератор +(function*() { + for (let i of numbers) { + yield i * i; + } +})(); + +// Заповнення генератора +(for (i of numbers) i * i ); + +// Результат: Обидва повертають генератор, який видає [1, 4, 9] +</pre> + +<p>Приклад 2: Використання <code>if</code> у генераторі.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Функція-генератор +(function*() { + for (let i of numbers) { + if (i < 3) { + yield i * 1; + } + } +})(); + +// Заповнення генератора +(for (i of numbers) if (i < 3) i); + +// Результат: обидва вертають генератор, який видає [1, 2]</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<p>Заповнення генераторів було початково присутнє у чорнетці ECMAScript 2015, але було прибране у ревізії 27 (серпень 2014). Будь-ласка, дивіться семантику специфікації у старших ревізіях ES2015.</p> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.generator_comprehensions")}}</p> + +<h2 id="Відмінності_від_заповнень_у_JS1.7JS1.8">Відмінності від заповнень у JS1.7/JS1.8</h2> + +<div class="blockIndicator warning">Заповнення JS1.7/JS1.8 були прибрані з Gecko 46 ({{bug(1220564)}}).</div> + +<p><strong>Старий синтаксис заповнень (більше не використовується!):</strong></p> + +<pre class="brush: js example-bad">(X for (Y in Z)) +(X for each (Y in Z)) +(X for (Y of Z)) +</pre> + +<p>Відмінності:</p> + +<ul> + <li>Заповнення ES7 створюють область видимості для кожного блоку "for", а не для всього заповнення. + <ul> + <li>Старе: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Нове: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, кожна ітерація створює свіже зв'язування для x. </code></li> + </ul> + </li> + <li>Заповнення ES7 починаються з "for", а не з виразу присвоювання. + <ul> + <li>Старе: <code>(i * 2 for (i of numbers))</code></li> + <li>Нове: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>Заповнення ES7 можуть мати декілька компонентів <code>if</code> та <code>for</code>.</li> + <li>Заповнення ES7 працюють тільки з переборами <code>{{JSxRef("Statements/for...of", "for...of")}}</code>, а не з <code>{{JSxRef("Statements/for...in", "for...in")}}</code>.</li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}}</li> + <li>{{JSxRef("Operators/Array_comprehensions", "Заповнення масивів")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/greater_than/index.html b/files/uk/web/javascript/reference/operators/greater_than/index.html new file mode 100644 index 0000000000..4214afbf62 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/greater_than/index.html @@ -0,0 +1,114 @@ +--- +title: Більше ніж (>) +slug: Web/JavaScript/Reference/Operators/Greater_than +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Greater_than +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор більше ніж (<code>></code>) вертає <code>true</code>, якщо значення лівого операнда більше за значення правого операнда, і <code>false</code>, якщо навпаки.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди порівнюються за допомогою алгоритму <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">абстрактного порівняння</a>, який в загальних рисах наведений нижче:</p> + +<ul> + <li>Спочатку об'єкти перетворюються на прості типи за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code>.</li> + <li>Якщо обидва значення є рядками, вони порівнюються як рядки, на основі значень кодів символів Юнікоду, які в них містяться.</li> + <li>В іншому випадку JavaScript намагається перетворити нечислові типи на числові значення: + <ul> + <li>Значення Boolean <code>true</code> та <code>false</code> перетворюються на 1 та 0 відповідно.</li> + <li><code>null</code> перетворюється на 0.</li> + <li><code>undefined</code> перетворюється на <code>NaN</code>.</li> + <li>Рядки перетворюються, базуючись на значеннях, які вони містять, вони перетворюються на <code>NaN</code>, якщо не містять числових значень.</li> + </ul> + </li> + <li>Якщо будь-яким зі значень є <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>, оператор вертає <code>false</code>.</li> + <li>В іншому випадку значення порівнюються як числові.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_рядків">Порівняння рядків</h3> + +<pre class="brush: js notranslate">console.log("а" > "б"); // false +console.log("а" > "а"); // false +console.log("а" > "3"); // true</pre> + +<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3> + +<pre class="brush: js notranslate">console.log("5" > 3); // true +console.log("3" > 3); // false +console.log("3" > 5); // false + +console.log("привіт" > 5); // false +console.log(5 > "привіт"); // false + +console.log("5" > 3n); // true +console.log("3" > 5n); // false</pre> + +<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3> + +<pre class="brush: js notranslate">console.log(5 > 3); // true +console.log(3 > 3); // false +console.log(3 > 5); // false</pre> + +<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3> + +<pre class="brush: js notranslate">console.log(5n > 3); // true +console.log(3 > 5n); // false</pre> + +<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3> + +<pre class="brush: js notranslate">console.log(true > false); // true +console.log(false > true); // false + +console.log(true > 0); // true +console.log(true > 1); // false + +console.log(null > 0); // false +console.log(1 > null); // true + +console.log(undefined > 3); // false +console.log(3 > undefined); // false + +console.log(3 > NaN); // false +console.log(NaN > 3); // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.greater_than")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html new file mode 100644 index 0000000000..48fd73bebf --- /dev/null +++ b/files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html @@ -0,0 +1,99 @@ +--- +title: Більше чи дорівнює (>=) +slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор більше чи дорівнює (<code>>=</code>) вертає <code>true</code>, якщо значення лівого операнда більше за значення правого операнда, або дорівнює йому, інакше вертає <code>false</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_рядків">Порівняння рядків</h3> + +<pre class="brush: js notranslate">console.log("а" >= "б"); // false +console.log("а" >= "а"); // true +console.log("а" >= "3"); // true +</pre> + +<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3> + +<pre class="brush: js notranslate">console.log("5" >= 3); // true +console.log("3" >= 3); // true +console.log("3" >= 5); // false + +console.log("привіт" >= 5); // false +console.log(5 >= "привіт"); // false</pre> + +<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3> + +<pre class="brush: js notranslate">console.log(5 >= 3); // true +console.log(3 >= 3); // true +console.log(3 >= 5); // false</pre> + +<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3> + +<pre class="brush: js notranslate">console.log(5n >= 3); // true +console.log(3 >= 3n); // true +console.log(3 >= 5n); // false</pre> + +<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3> + +<pre class="brush: js notranslate">console.log(true >= false); // true +console.log(true >= true); // true +console.log(false >= true); // false + +console.log(true >= 0); // true +console.log(true >= 1); // true + +console.log(null >= 0); // true +console.log(1 >= null); // true + +console.log(undefined >= 3); // false +console.log(3 >= undefined); // false + +console.log(3 >= NaN); // false +console.log(NaN >= 3); // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.greater_than_or_equal")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/grouping/index.html b/files/uk/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..bb740ed3a0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,90 @@ +--- +title: Оператор групування +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор групування <code>( )</code> контролює пріоритет обчислення у виразах.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор групування складається з пари дужок, які ставляться навколо виразу або підвиразу для заміщення звичайного <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритету операторів</a>, щоб вирази з нижчим пріоритетом могли бути обчислені перед виразами з вищим пріоритетом. Як зрозуміло з назви, він групує те, що знаходиться всередині дужок.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Заміщення обчислення спочатку множення та ділення, потім додавання та віднімання, щоб обчислити спочатку додавання.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// пріоритет за замовчуванням +a + b * c // 7 +// обчислюється наступним чином +a + (b * c) // 7 + +// тепер заміщуємо пріоритет, +// додавання перед множенням +(a + b) * c // 9 + +// що є еквівалентним +a * c + b * c // 9 +</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('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/in/index.html b/files/uk/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..5de860492c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/in/index.html @@ -0,0 +1,150 @@ +--- +title: Оператор in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор <code>in</code> </strong>повертає<strong> </strong><code>true</code>, якщо вказана властивість присутня у вказаному об'єкті або у його ланцюжку прототипів.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>prop</em> in <em>objectName</em></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Рядок або символ, що є іменем властивості або індексом масиву (не символи будуть приведені до рядка).</dd> +</dl> + +<dl> + <dt><code>objectName</code></dt> + <dd>Об'єкт, у якому виконується перевірка того, чи він (або його ланцюжок прототипів) містить властивість з вказаним ім'ям.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Наступний приклад ілюструє деякі випадки використання оператора <code>in</code>.</p> + +<pre class="brush:js">// Масиви +var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; +0 in trees // вертає true +3 in trees // вертає true +6 in trees // вертає false +'лавр' in trees // вертає false (ви повинні вказати + // індекс, а не значення за цим індексом) +'length' in trees // вертає true (length є властивістю об'єкта Array) +Symbol.iterator in trees // вертає true (масиви ітерабельні, працює лише у ES2015+) + +// Попередньо визначені об'єкти +'PI' in Math // вертає true + +// Користувацькі об'єкти +var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +'make' in mycar // вертає true +'model' in mycar // вертає true +</pre> + +<p>Необхідно вказати об'єкт справа від оператора <code>in</code>. Наприклад, можна вказати рядок, створений за допомогою конструктора <code>String</code>, але не можна вказувати рядковий літерал.</p> + +<pre class="brush:js">var color1 = new String('зелений'); +'length' in color1 // вертає true + +var color2 = 'кораловий'; +// генерує помилку (color2 не є об'єктом String) +'length' in color2 +</pre> + +<h3 id="Використання_in_з_властивостями_що_видалені_або_дорівнюють_undefined">Використання <code>in</code> з властивостями, що видалені або дорівнюють undefined</h3> + +<p>Якщо видалити властивість оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>, оператор <code>in</code> поверне <code>false</code> для цієї властивості.</p> + +<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +delete mycar.make; +'make' in mycar; // вертає false + +var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен'); +delete trees[3]; +3 in trees; // вертає false +</pre> + +<p>Якщо задати властивості значення {{jsxref("Global_Objects/undefined", "undefined")}}, але не видалити її, оператор <code>in</code> поверне true для цієї властивості.</p> + +<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +mycar.make = undefined; +'make' in mycar; // вертає true +</pre> + +<pre class="brush:js">var trees = new Array('секвоя', 'лавр', 'кедр', 'дуб', 'клен'); +trees[3] = undefined; +3 in trees; // вертає true +</pre> + +<h3 id="Успадковані_властивості">Успадковані властивості</h3> + +<p>Оператор <code>in</code> повертає <code>true</code> для властивостей з ланцюжка прототипів. (Якщо вам потрібно перевірити лише <em>не успадковані</em> властивості, скористайтесь методом {{jsxref("Object.prototype.hasOwnProperty()")}}.)</p> + +<pre class="brush:js">'toString' in {}; // вертає true +</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.in")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Також_дивіться">Також дивіться</h2> + +<ul> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/increment/index.html b/files/uk/web/javascript/reference/operators/increment/index.html new file mode 100644 index 0000000000..f4f19e5fc0 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/increment/index.html @@ -0,0 +1,80 @@ +--- +title: Інкремент (++) +slug: Web/JavaScript/Reference/Operators/Increment +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор інкременту (<code>++</code>) збільшує свій операнд (додає одиницю) та повертає його значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var>++ або ++<var>x</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Якщо оператор використовується постфіксно, після операнду (наприклад, <code>x++</code>), тоді він збільшує значення та повертає його до збільшення.</p> + +<p>Якщо оператор використовується префіксно, перед операндом (наприклад, <code>++x</code>), тоді він збільшує значення та повертає його після збільшення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Постфіксний_інкремент">Постфіксний інкремент</h3> + +<pre class="brush: js notranslate">let x = 3; +y = x++; + +// y = 3 +// x = 4 +</pre> + +<h3 id="Префіксний_інкремент">Префіксний інкремент</h3> + +<pre class="brush: js notranslate">let a = 2; +b = ++a; + +// a = 3 +// b = 3 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.increment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/index.html b/files/uk/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..301ebeeb2f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/index.html @@ -0,0 +1,273 @@ +--- +title: Вирази та оператори +slug: Web/JavaScript/Reference/Operators +tags: + - Expressions + - JavaScript + - Operators + - Довідка + - Огляд + - Оператори + - вирази +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ця глава документує усі оператори, вирази та ключові слова мови JavaScript.</p> + +<h2 id="Вирази_та_оператори_за_категоріями">Вирази та оператори за категоріями</h2> + +<p>Список у алфавітному порядку дивіться на бічній панелі ліворуч.</p> + +<h3 id="Первинні_вирази">Первинні вирази</h3> + +<p>Базові ключові слова та загальні вирази у JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>Ключове слово <code>this</code> посилається на особливу властивість контексту виконання функції.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>Ключове слово <code>function</code> визначає функціональний вираз.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>Ключове слово <code>class</code> визначає вираз класу.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>Ключове слово <code>function*</code> визначає вираз функції-генератора.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Призупиняє та відновлює виконання функції-генератора.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Делегує до іншої функції-генератора або ітерабельного об'єкта.</dd> + <dt>{{jsxref("Operators/async_function", "async function*")}}</dt> + <dd><code>async function</code> визначає вираз async-функції.</dd> + <dt>{{jsxref("Operators/await", "await")}}</dt> + <dd>Призупиняє та відновлює виконання async-функції та чекає на вирішення/відхилення проміса.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Синтаксис масивного ініціалізатора/літералу.</dd> + <dt>{{jsxref("Operators/Ініціалізація_об’єктів", "{}")}}</dt> + <dd>Синтаксис об'єктного ініціалізатора/літералу.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Літерал регулярного виразу.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Оператор групування.</dd> +</dl> + +<h3 id="Лівосторонні_вирази">Лівосторонні вирази</h3> + +<p>Значення зліва є призначенням присвоєння.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Доступ до властивостей", "", 1)}}</dt> + <dd>Оператори доступу надають доступ до властивості або методу об'єкта<br> + (<code>object.property</code> та <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>Оператор <code>new</code> створює екземпляр конструктора.</dd> + <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt> + <dd>У конструкторах <code>new.target</code> посилається на конструктор, викликаний оператором {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>Ключове слово <code>super</code> викликає батьківський конструктор.</dd> + <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt> + <dd>Оператор розкладу дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).</dd> +</dl> + +<h3 id="Інкремент_та_декремент">Інкремент та декремент</h3> + +<p>Постфіксний/префіксний оператор інкременту та постфіксний/префіксний оператор декременту.</p> + +<dl> + <dt>{{jsxref("Operators/Increment", "A++")}}</dt> + <dd>Постфіксний оператор інкременту.</dd> + <dt>{{jsxref("Operators/Decrement", "A--")}}</dt> + <dd>Постфіксний оператор декременту.</dd> + <dt>{{jsxref("Operators/Increment", "++A")}}</dt> + <dd>Префіксний оператор інкременту.</dd> + <dt>{{jsxref("Operators/Decrement", "--A")}}</dt> + <dd>Префіксний оператор декременту.</dd> +</dl> + +<h3 id="Унарні_оператори">Унарні оператори</h3> + +<p>Унарна операція - це операція лише з одним операндом.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>Оператор <code>delete</code> видаляє властивість об'єкта.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>Оператор <code>void</code> відкидає повернене значення виразу.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>Оператор <code>typeof</code> визначає тип наданого об'єкта.</dd> + <dt>{{jsxref("Operators/Unary_plus", "+")}}</dt> + <dd>Унарний плюс перетворює свій операнд на число.</dd> + <dt>{{jsxref("Operators/Unary_negation", "-")}}</dt> + <dd>Унарний мінус перетворює свій операнд на число та міняє його знак на протилежний.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Побітове_НЕ")}}</dt> + <dd>Оператор побітового НЕ.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Логічне_НЕ_!")}}</dt> + <dd>Оператор логічного НЕ.</dd> +</dl> + +<h3 id="Арифметичні_оператори">Арифметичні оператори</h3> + +<p>Арифметичні оператори приймають числові значення (або літерали, або змінні) в якості операндів та повертають єдине числове значення.</p> + +<dl> + <dt>{{jsxref("Operators/Addition", "+")}}</dt> + <dd>Оператор додавання.</dd> + <dt>{{jsxref("Operators/Subtraction", "-")}}</dt> + <dd>Оператор віднімання.</dd> + <dt>{{jsxref("Operators/Division", "/")}}</dt> + <dd>Оператор ділення.</dd> + <dt>{{jsxref("Operators/Multiplication", "*")}}</dt> + <dd>Оператор множення.</dd> + <dt>{{jsxref("Operators/Remainder", "%")}}</dt> + <dd>Оператор остачі.</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Exponentiation", "**")}}</dt> + <dd>Оператор піднесення до степеня.</dd> +</dl> + +<h3 id="Оператори_відношення">Оператори відношення</h3> + +<p>Оператор порівняння порівнює свої операнди та повертає значення <code>Boolean</code> на підставі того, чи дорівнює порівняння true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>Оператор <code>in</code> визначає, чи має об'єкт надану властивість.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>Оператор <code>instanceof</code> визначає, чи є об'єкт екземпляром іншого об'єкта.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", "<", "#Менше_ніж_<")}}</dt> + <dd>Оператор менше ніж.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", ">", "#Більше_ніж_>")}}</dt> + <dd>Оператор більше ніж.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", "<=", "#Менше_чи_дорівнює_<")}}</dt> + <dd>Оператор менше чи дорівнює.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", ">=", "#Більше_чи_дорівнює_>")}}</dt> + <dd>Оператор більше чи дорівнює.</dd> +</dl> + +<div class="note"> +<p><strong>Заувага: =></strong> не оператор, а позначення для <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>.</p> +</div> + +<h3 id="Оператори_рівності">Оператори рівності</h3> + +<p>Результатом обчислення оператора рівності завжди є значення типу <code>Boolean</code>, на підставі того, чи дорівнює порівняння true.</p> + +<dl> + <dt>{{jsxref("Operators/Оператори_порівняння", "==", "#Рівність")}}</dt> + <dd>Оператор рівності.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", "!=", "#Нерівність_!")}}</dt> + <dd>Оператор нерівності.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", "===", "#Ідентичність_строга_рівність")}}</dt> + <dd>Оператор ідентичності.</dd> + <dt>{{jsxref("Operators/Оператори_порівняння", "!==", "#Неідентичність_строга_нерівність_!")}}</dt> + <dd>Оператор неідентичності.</dd> +</dl> + +<h3 id="Оператори_бітового_зсуву">Оператори бітового зсуву</h3> + +<p>Операції, що зсувають усі біти операнду.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#<<_Лівий_зсув")}}</dt> + <dd>Оператор лівого зсуву.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#>>_Правий_зсув_з_розширенням_знаку")}}</dt> + <dd>Оператор правого зсуву.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#>>>_Правий_зсув_із_заповненням_нулями")}}</dt> + <dd>Оператор беззнакового правого зсуву.</dd> +</dl> + +<h3 id="Побітові_логічні_оператори">Побітові логічні оператори</h3> + +<p>Бітові оператори опрацьовують свої операнди як послідовність 32-х бітів (нулів та одиниць) та повертають стандартні числові значення JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Побітове_І")}}</dt> + <dd>Побітове І.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Побітове_АБО")}}</dt> + <dd>Побітове АБО.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Виключне_побітове_АБО")}}</dt> + <dd>Виключне побітове АБО.</dd> +</dl> + +<h3 id="Логічні_оператори">Логічні оператори</h3> + +<p>Логічні оператори зазвичай застосовуються до булевих (логічних) значень, і, в цьому випадку, вони повертають булеве значення.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Логічне_І")}}</dt> + <dd>Логічне І.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Логічне_АБО")}}</dt> + <dd>Логічне АБО.</dd> +</dl> + +<h3 id="Умовний_тернарний_оператор">Умовний (тернарний) оператор</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>Умовний оператор повертає одне з двох значень, на підставі логічного значення умови.</p> + </dd> +</dl> + +<h3 id="Оператори_присвоєння">Оператори присвоєння</h3> + +<p>Оператор присвоєння присвоює значення своєму лівому операнду на підставі значення свого правого операнду.</p> + +<dl> + <dt>{{jsxref("Operators/Оператори_присвоєння", "=", "#Присвоєння")}}</dt> + <dd>Оператор присвоєння.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "*=", "#Присвоєння_з_множенням")}}</dt> + <dd>Присвоєння з множенням.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "/=", "#Присвоєння_з_діленням")}}</dt> + <dd>Присвоєння з діленням.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "%=", "#Присвоєння_остачі")}}</dt> + <dd>Присвоєння остачі.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "+=", "#Присвоєння_з_додаванням")}}</dt> + <dd>Присвоєння з додаванням.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "-=", "#Присвоєння_з_відніманням")}}</dt> + <dd>Присвоєння з відніманням.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "<<=", "#Присвоєння_з_лівим_зсувом")}}</dt> + <dd>Присвоєння з лівим зсувом.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", ">>=", "#Присвоєння_з_правим_зсувом")}}</dt> + <dd>Присвоєння з правим зсувом.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", ">>>=", "#Присвоєння_з_беззнаковим_правим_зсувом")}}</dt> + <dd>Присвоєння з беззнаковим правим зсувом.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "&=", "#Присвоєння_з_побітовим_І")}}</dt> + <dd>Присвоєння з побітовим І.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "^=", "#Присвоєння_з_виключним_побітовим_АБО")}}</dt> + <dd>Присвоєння з виключним побітовим АБО.</dd> + <dt>{{jsxref("Operators/Оператори_присвоєння", "|=", "#Присвоєння_з_побітовим_АБО")}}</dt> + <dd>Присвоєння з побітовим АБО.</dd> + <dt>{{jsxref("Operators/Деструктуризація", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Деструктуризація", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Деструктуризаційне присвоєння дозволяє присвоювати властивості масиву або об'єкта змінним, використовуючи синтаксис, схожий на масивні або об'єктні літерали.</p> + </dd> +</dl> + +<h3 id="Оператор_кома">Оператор кома</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>Оператор кома дозволяє обчислення кількох виразів у єдиній інструкції та повертає результат останнього виразу.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Пріоритет операторів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/inequality/index.html b/files/uk/web/javascript/reference/operators/inequality/index.html new file mode 100644 index 0000000000..d1621b0c0c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/inequality/index.html @@ -0,0 +1,97 @@ +--- +title: Нерівність (!=) +slug: Web/JavaScript/Reference/Operators/Inequality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Inequality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор нерівності (<code>!=</code>) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">строгої нерівності</a>, він намагається перетворити для порівняння операнди, які належать до різних типів.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор нерівності перевіряє, чи є його операнди нерівними. Це протилежність оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>, тому наступні два рядки завжди повернуть однаковий результат:</p> + +<pre class="brush: js notranslate">x != y + +!(x == y)</pre> + +<p>Подробиці алгоритму порівняння дивіться на сторінці оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>.</p> + +<p>Як і оператор рівності, оператор нерівності намагатиметься перетворити операнди різних типів перед порівнянням:</p> + +<pre class="brush: js notranslate">3 != "3"; // false</pre> + +<p>Щоб не допустити цього, та щоб різні типи вважались різними, використовуйте, натомість, оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">строгої нерівності</a>:</p> + +<pre class="brush: js notranslate">3 !== "3"; // true</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_без_перетворення_типів">Порівняння без перетворення типів</h3> + +<pre class="brush: js notranslate">1 != 2; // true +"привіт" != "агов"; // true + +1 != 1; // false +"привіт" != "привіт"; // false</pre> + +<h3 id="Порівняння_з_перетворенням_типів">Порівняння з перетворенням типів</h3> + +<pre class="brush: js notranslate">"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +null != undefined; // false + +const number1 = new Number(3); +const number2 = new Number(3); +number1 != 3; // false +number1 != number2; // true</pre> + +<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3> + +<pre class="brush: js notranslate">const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 != object2 // true +object2 != object2 // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.inequality")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/instanceof/index.html b/files/uk/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..eca9cdabeb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,186 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Object + - Об'єкт + - Оператор +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор</strong> <strong><code>instanceof</code></strong> перевіряє, чи присутня властивість конструктора <code>prototype</code> десь у ланцюжку прототипів об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Об'єкт, який потрібно перевірити.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Функція для перевірки.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Оператор <code>instanceof</code> перевіряє присутність <code>constructor.prototype</code> у ланцюжку прототипів об'єкта <code>object</code>.</p> + +<pre class="brush: js">// визначення конструкторів +function C() {} +function D() {} + +var o = new C(); + +// true, тому що: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, тому що D.prototype немає у ланцюжку прототипів o +o instanceof D; + +o instanceof Object; // true, тому що: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, тому що C.prototype більше немає у +// ланцюжку прототипів o +o instanceof C; + +D.prototype = new C(); // додати C до збірки D [[Prototype]] +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true, оскільки C.prototype тепер є у ланцюжку прототипів o3 +</pre> + +<p>Зауважте, що значення перевірки <code>instanceof</code> може змінитись на підставі змін у властивості конструкторів <code>prototype</code>, також воно може змінитись через зміну прототипу об'єкта методом <code>Object.setPrototypeOf</code>. Це також можливо зробити використанням нестандартної псевдовластивості <code>__proto__</code>.</p> + +<h3 id="instanceof_та_декілька_контекстів_наприклад_фрейми_чи_вікна"><code>instanceof</code> та декілька контекстів (наприклад, фрейми чи вікна)</h3> + +<p>Різні області видимості мають різні середовища виконання. Це означає, що вони мають різні вбудовані складові (різні глобальні об'єкти, різні конструктори і т. д.). Це може призвести до неочікуваних результатів. Наприклад, <code>[] instanceof window.frames[0].Array</code> поверне <code>false</code>, тому що <code>Array.prototype !== </code><code>window.frames[0].Array</code>, а масиви успадковуються від першого.</p> + +<p>Спочатку це може виглядати дивно, але, коли починаєш мати справу з кількома фреймами або вікнами у скрипті та передавати об'єкти з одного контексту у інший через функції, це є правильним та сильним аспектом. Наприклад, ви можете безпечно перевірити, чи є наданий об'єкт, насправді, масивом, за допомогою <code>Array.isArray(myObj)</code></p> + +<p>Наприклад, перевіряючи, чи <a href="/uk/docs/Web/API/Node">Nodes</a> є <a href="/uk/docs/Web/API/SVGElement">SVGElement</a> у іншому контексті, ви можете використати <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code></p> + +<div class="note"><strong>Примітка для розробників Mozilla:</strong><br> +У коді, що використовує XPCOM, <code>instanceof</code> має особливий ефект: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (наприклад, <code>Components.interfaces.nsIFile</code>) викликає <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> та повертає <code>true</code>, якщо QueryInterface має успішний результат. Побічним ефектом такого виклику є те, що ви можете використовувати властивості <em><code>xpcomInterface</code></em> на <code>obj</code> після успішної перевірки <code>instanceof</code>. На відміну від стандартних глобальних складових JavaScript, перевірка <code>obj instanceof xpcomInterface</code> працює, як очікується, навіть якщо <code>obj</code> з іншої області видимості.</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Демострація_того_що_String_та_Date_належать_до_типу_Object_та_виняткові_випадки">Демострація того, що <code>String</code> та <code>Date</code> належать до типу <code>Object</code>, та виняткові випадки</h3> + +<p>Наступний код використовує <code>instanceof</code>, щоб продемонструвати, що об'єкти <code>String</code> та <code>Date</code> також належать до типу <code>Object</code> (вони походять від <code>Object</code>).</p> + +<p>Однак, об'єкти, створені за допомогою нотації об'єктного літералу, є винятком: Хоча прототип дорівнює undefined, <code>instanceof Object</code> вертає <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = 'Це простий рядок'; +var myString = new String(); +var newStr = new String('Рядок, створений конструктором'); +var myDate = new Date(); +var myObj = {}; +var myNonObj = Object.create(null); + +simpleStr instanceof String; // вертає false, перевіряє ланцюжок прототипів, знаходить undefined +myString instanceof String; // вертає true +newStr instanceof String; // вертає true +myString instanceof Object; // вертає true + +myObj instanceof Object; // вертає true, не зважаючи на те, що прототип дорівнює undefined +({}) instanceof Object; // вертає true, те саме, що у попередньому випадку +myNonObj instanceof Object; // вертає false, спосіб створення об'єкту, який не є екземпляром Object + +myString instanceof Date; // вертає false + +myDate instanceof Date; // вертає true +myDate instanceof Object; // вертає true +myDate instanceof String; // вертає false +</pre> + +<h3 id="Демонстрація_того_що_mycar_належить_до_типу_Car_та_до_типу_Object">Демонстрація того, що <code>mycar</code> належить до типу <code>Car</code> та до типу <code>Object</code></h3> + +<p>Наступний код створює тип об'єктів <code>Car</code> та екземпляр цього типу, <code>mycar</code>. Оператор <code>instanceof</code> демонструє, що об'єкт <code>mycar</code> належить до типу <code>Car</code> та до типу <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car('Honda', 'Accord', 1998); +var a = mycar instanceof Car; // вертає true +var b = mycar instanceof Object; // вертає true +</pre> + +<h3 id="Не_instanceof">Не instanceof</h3> + +<p>Щоб перевірити, що об'єкт не є екземпляром певного Конструктора, ви можете зробити</p> + +<pre class="brush: js">if (!(mycar instanceof Car)) { + // Зробити щось, наприклад, mycar = new Car(mycar) +} +</pre> + +<p>Це, насправді, відрізняється від коду</p> + +<pre class="brush: js">if (!mycar instanceof Car)</pre> + +<p>який завжди дорівнюватиме false (<code>!mycar</code> обчислюється перед <code>instanceof</code>, тому ви завжди перевірятимете, чи є булеве значення екземпляром <code>Car</code>).</p> + +<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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li>{{jsxref("Symbol.hasInstance")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/left_shift/index.html b/files/uk/web/javascript/reference/operators/left_shift/index.html new file mode 100644 index 0000000000..b963c613e6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/left_shift/index.html @@ -0,0 +1,73 @@ +--- +title: Лівий зсув (<<) +slug: Web/JavaScript/Reference/Operators/Left_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Left_shift +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор лівого зсуву (<code><<</code>)</strong> виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> << <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Цей оператор виконує зсув першого операнда на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</p> + +<p>Наприклад, <code>9 << 2</code> повертає 36:</p> + +<pre class="brush: js notranslate">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 << 2 (основа 10): 00000000000000000000000000100100 (основа 2) = 36 (основа 10) +</pre> + +<p>Бітовий зсув будь-якого числа <code>x</code> ліворуч на <code>y</code> бітів вертає <code>x * 2 ** y</code>.<br> + Отже, для прикладу: <code>9 << 3</code> можна перекласти як: <code>9 * (2 ** 3) = 9 * (8) =</code><code> 72</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_лівого_зсуву">Використання лівого зсуву</h3> + +<pre class="brush: js notranslate">9 << 3; // 72 + +// 9 * (2 ** 3) = 9 * (8) = 72 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.left_shift")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">Оператор присвоєння з лівим зсувом</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html new file mode 100644 index 0000000000..4063453f99 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/left_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з лівим зсувом (<<=) +slug: Web/JavaScript/Reference/Operators/Left_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з лівим зсувом (<code><<=</code>) виконує зсув на вказану кількість бітів ліворуч та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x <<= y +<strong>Значення:</strong> x = x << y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_лівим_зсувом">Використання присвоєння з лівим зсувом</h3> + +<pre class="brush: js notranslate">let a = 5; +// 00000000000000000000000000000101 + +bar <<= 2; // 20 +// 00000000000000000000000000010100</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.left_shift_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Left_shift">Оператор лівого зсуву</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/less_than/index.html b/files/uk/web/javascript/reference/operators/less_than/index.html new file mode 100644 index 0000000000..9833b8532e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/less_than/index.html @@ -0,0 +1,99 @@ +--- +title: Менше ніж (<) +slug: Web/JavaScript/Reference/Operators/Less_than +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Less_than +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор менше ніж (<code><</code>) повертає <code>true</code>, якщо значення лівого операнда менше за значення правого операнда, інакше повертає <code>false</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_рядків">Порівняння рядків</h3> + +<pre class="brush: js notranslate">console.log("а" < "б"); // true +console.log("а" < "а"); // false +console.log("а" < "3"); // false</pre> + +<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3> + +<pre class="brush: js notranslate">console.log("5" < 3); // false +console.log("3" < 3); // false +console.log("3" < 5); // true + +console.log("привіт" < 5); // false +console.log(5 < "привіт"); // false + +console.log("5" < 3n); // false +console.log("3" < 5n); // true</pre> + +<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3> + +<pre class="brush: js notranslate">console.log(5 < 3); // false +console.log(3 < 3); // false +console.log(3 < 5); // true</pre> + +<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3> + +<pre class="brush: js notranslate">console.log(5n < 3); // false +console.log(3 < 5n); // true</pre> + +<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3> + +<pre class="brush: js notranslate">console.log(true < false); // false +console.log(false < true); // true + +console.log(0 < true); // true +console.log(true < 1); // false + +console.log(null < 0); // false +console.log(null < 1); // true + +console.log(undefined < 3); // false +console.log(3 < undefined); // false + +console.log(3 < NaN); // false +console.log(NaN < 3); // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.less_than")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Оператор менше чи дорівнює</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html new file mode 100644 index 0000000000..03af5a5d45 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/less_than_or_equal/index.html @@ -0,0 +1,101 @@ +--- +title: Менше чи дорівнює (<=) +slug: Web/JavaScript/Reference/Operators/Less_than_or_equal +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор менше чи дорівнює (<code><=</code>) вертає <code>true</code>, якщо значення лівого операнда менше за значення правого операнда, або дорівнює йому, інакше вертає <code>false</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Операнди порівнюються за допомогою алгоритму <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">абстрактного порівняння</a>. Дивіться опис алгоритму у документації оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">більше ніж</a>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_рядків">Порівняння рядків</h3> + +<pre class="brush: js notranslate">console.log("а" <= "б"); // true +console.log("а" <= "а"); // true +console.log("а" <= "3"); // false +</pre> + +<h3 id="Порівняння_рядка_з_числом">Порівняння рядка з числом</h3> + +<pre class="brush: js notranslate">console.log("5" <= 3); // false +console.log("3" <= 3); // true +console.log("3" <= 5); // true + +console.log("привіт" <= 5); // false +console.log(5 <= "привіт"); // false</pre> + +<h3 id="Порівняння_числа_з_числом">Порівняння числа з числом</h3> + +<pre class="brush: js notranslate">console.log(5 <= 3); // false +console.log(3 <= 3); // true +console.log(3 <= 5); // true</pre> + +<h3 id="Порівняння_числа_з_BigInt">Порівняння числа з BigInt</h3> + +<pre class="brush: js notranslate">console.log(5n <= 3); // false +console.log(3 <= 3n); // true +console.log(3 <= 5n); // true</pre> + +<h3 id="Порівняння_Boolean_null_undefined_NaN">Порівняння Boolean, null, undefined, NaN</h3> + +<pre class="brush: js notranslate">console.log(true <= false); // false +console.log(true <= true); // true +console.log(false <= true); // true + +console.log(true <= 0); // false +console.log(true <= 1); // true + +console.log(null <= 0); // true +console.log(1 <= null); // false + +console.log(undefined <= 3); // false +console.log(3 <= undefined); // false + +console.log(3 <= NaN); // false +console.log(NaN <= 3); // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.less_than_or_equal")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than">Оператор більше ніж</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Оператор більше чи дорівнює</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Less_than">Оператор менше ніж</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/logical_and/index.html b/files/uk/web/javascript/reference/operators/logical_and/index.html new file mode 100644 index 0000000000..c8d1ccaae6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_and/index.html @@ -0,0 +1,142 @@ +--- +title: Логічне І (&&) +slug: Web/JavaScript/Reference/Operators/Logical_AND +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_AND +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Логічний оператор І (<code>&&</code>) (логічна кон'юнкція) для набору операндів дорівнює true тільки тоді, коли усі його операнди дорівнюють true. Він зазвичай використовується з {{jsxref("Boolean","булевими")}} (логічними) значеннями. У цьому випадку він повертає булеве значення. Однак, оператор <code>&&</code> насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується не з булевими значеннями, він поверне не булеве значення.</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>вираз1</em> && <em>вираз2</em> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Якщо <code>вираз<strong>1</strong></code> може бути приведений до <code>true</code>, вертає <code>вираз<strong>2</strong></code>; інакше, вертає <code>вираз<strong>1</strong></code>.</p> + +<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#%D0%A2%D0%B8%D0%BF_boolean">булевих примітивів</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p> + +<h3 id="Обчислення_з_коротким_замиканням">Обчислення з коротким замиканням</h3> + +<p>Логічні вирази І обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" під час обчислення за наступним правилом:</p> + +<p><code>(якийсь хибний вираз) && <em>expr</em></code> обчислюється як хибний вираз;</p> + +<p>Коротке замикання означає, що частина <code><em>expr</em></code> у прикладі <strong>не обчислюється</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <code><em>expr</em></code> є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p> + +<pre class="brush: js notranslate">function A(){ console.log('викликано A'); return false; } +function B(){ console.log('викликано B'); return true; } + +console.log( A() && B() ); +// виводить "викликано A" в результаті виклику функції, +// потім виводить false (що є результатом виклику оператора) +</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 notranslate">true || false && false // вертає true, оскільки && виконується першим +(true || false) && false // вертає false, бо пріоритет операторів не застосовується</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_І">Використання І</h3> + +<p>Наступний код наводить приклади оператора <code>&&</code> (логічне І).</p> + +<pre class="brush: js notranslate">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="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3> + +<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 && bCondition2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 || bCondition2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">!(!bCondition1 && !bCondition2)</pre> + +<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3> + +<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.</p> + +<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">bCondition1 || bCondition2 && bCondition3</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.logical_and")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Falsy")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/logical_not/index.html b/files/uk/web/javascript/reference/operators/logical_not/index.html new file mode 100644 index 0000000000..6bfa34b281 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_not/index.html @@ -0,0 +1,105 @@ +--- +title: Логічне НЕ (!) +slug: Web/JavaScript/Reference/Operators/Logical_NOT +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_NOT +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Логічний оператор НЕ (<code>!</code>) (логічне доповнення, заперечення) перетворює правдивість на хибність та навпаки. Він зазвичай використовується з {{jsxref("Boolean", "булевими")}} (логічними) значеннями. При використанні з не булевими значеннями він вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logical-not.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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">!<var>expr</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Вертає <code>false</code>, якщо його єдиний операнд може бути приведений до <code>true</code>; інакше, вертає <code>true</code>.</p> + +<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> може використовуватись з операндами не булевого типу, він все одно вважатиметься булевим оператором, оскільки значення, яке він вертає, завжди може бути приведене до <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевого примітиву</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_НЕ">Використання НЕ</h3> + +<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p> + +<pre class="brush: js notranslate">n1 = !true // !t вертає false +n2 = !false // !f вертає true +n3 = !'' // !f вертає true +n4 = !'Кіт' // !t вертає false</pre> + +<h3 id="Подвійне_НЕ_!!">Подвійне НЕ (<code>!!</code>)</h3> + +<p>Можна використовувати пару операторів НЕ поспіль, щоб явно викликати перетворення будь-якої величини на відповідний <a href="/uk/docs/Web/JavaScript/Data_structures#Тип_boolean">булевий примітив</a>. Перетворення базується на "правдивості" або "хибності" значення (дивіться {{Glossary("truthy")}} та {{Glossary("falsy")}}).</p> + +<p>Таке саме перетворення можна виконати функцією {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p> + +<pre class="brush: js notranslate">n1 = !!true // !!truthy вертає true +n2 = !!{} // !!truthy вертає true: <strong>будь-який</strong> об'єкт є правдивим... +n3 = !!(new Boolean(false)) // ...навіть об'єкти Boolean, в яких <em>.valueOf()</em> дорівнює false! +n4 = !!false // !!falsy вертає false +n5 = !!"" // !!falsy вертає false +n6 = !!Boolean(false) // !!falsy вертає false</pre> + +<h3 id="Перетворення_НЕ">Перетворення НЕ</h3> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">!!bCondition</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">bCondition</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-logical-not-operator', 'Logical NOT expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.logical_not")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Falsy")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/logical_operators/index.html b/files/uk/web/javascript/reference/operators/logical_operators/index.html new file mode 100644 index 0000000000..a2613381eb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_operators/index.html @@ -0,0 +1,252 @@ +--- +title: Логічні оператори +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Оператор + - логічний +translation_of: Web/JavaScript/Reference/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> diff --git a/files/uk/web/javascript/reference/operators/logical_or/index.html b/files/uk/web/javascript/reference/operators/logical_or/index.html new file mode 100644 index 0000000000..16dc2868bb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/logical_or/index.html @@ -0,0 +1,151 @@ +--- +title: Логічне АБО (||) +slug: Web/JavaScript/Reference/Operators/Logical_OR +tags: + - JavaScript + - Довідка + - Логічний оператор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Logical_OR +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Логічний оператор АБО (<code>||</code>) (логічна диз'юнкція) для набору операндів повертає true тільки якщо один чи більше з його операндів дорівнюють true. Зазвичай його використовують з {{jsxref("Boolean","булевими")}} (логічними) значеннями. В цьому випадку він повертає булеве значення. Однак, оператор <code>||</code> насправді повертає значення одного з наданих операндів, а отже, якщо цей оператор застосовується з не булевими значеннями, він поверне не булеве значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or.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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>вираз1</em> || <em>вираз2</em> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Якщо <code>вираз<strong>1</strong></code> можна привести до <code>true</code>, вертає <code>вираз<strong>1</strong></code>; інакше, вертає <code>вираз<strong>2</strong></code>.</p> + +<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> може використовуватись з операндами не булевого типу, він все одно може вважатися булевим оператором, оскільки значення, які він повертає, завжди можуть бути приведені до <a href="/uk/docs/Web/JavaScript/Data_structures#%D0%A2%D0%B8%D0%BF_boolean">булевого примітиву</a>. Щоб явно перетворити повернені значення (або, взагалі, будь-який вираз) до відповідного булевого значення, скористайтесь подвійним <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">оператором НЕ</a> або конструктором {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}}.</p> + +<h3 id="Обчислення_з_коротким_замиканням">Обчислення з коротким замиканням</h3> + +<p>Логічні вирази АБО обчислюються зліва направо, вони перевіряються на "коротке замикання" під час обчислення за наступним правилом:</p> + +<p><code>(якийсь правдивий вираз) || <em>expr</em></code> обчислюється як правдивий вираз.</p> + +<p>Коротке замикання означає, що частина <code><em>expr</em></code> у прикладі <strong>не обчислюється</strong>, тому будь-які побічні ефекти від цього не відбудуться (наприклад, якщо <code><em>expr</em></code> є викликом функції, виклику не станеться). Це відбувається тому, що значення оператора вже визначене після обчислення першого операнду. Дивіться приклад:</p> + +<pre class="brush: js notranslate">function A(){ console.log('викликано A'); return false; } +function B(){ console.log('викликано B'); return true; } + +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 notranslate">true || false && false // вертає true, оскільки && виконується першим +(true || false) && false // вертає false, бо пріоритет операторів не застосовується</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_АБО">Використання АБО</h3> + +<p>Наступний код наводить приклади оператора <code>||</code> (логічне АБО).</p> + +<pre class="brush: js notranslate">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 || об'єкт вертає 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>.</p> +</div> + +<h3 id="Правила_перетворення_для_булевих_значень">Правила перетворення для булевих значень</h3> + +<h4 id="Перетворення_І_на_АБО">Перетворення І на АБО</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 && bCondition2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Перетворення_АБО_на_І">Перетворення АБО на І</h4> + +<p>Наступна операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 || bCondition2</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">!(!bCondition1 && !bCondition2)</pre> + +<h3 id="Прибирання_вкладених_дужок">Прибирання вкладених дужок</h3> + +<p>Оскільки логічні вирази обчислюються зліва направо, завжди можна прибрати дужки зі складного виразу, дотримуючись певних правил.</p> + +<p>Наступна складена операція з <strong>булевими значеннями</strong>:</p> + +<pre class="brush: js notranslate">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>завжди дорівнює:</p> + +<pre class="brush: js notranslate">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.logical_or")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання (<code>??</code>)</a></li> + <li>{{jsxref("Boolean")}}</li> + <li>{{Glossary("Truthy")}}</li> + <li>{{Glossary("Falsy")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/multiplication/index.html b/files/uk/web/javascript/reference/operators/multiplication/index.html new file mode 100644 index 0000000000..7f55e8f8ac --- /dev/null +++ b/files/uk/web/javascript/reference/operators/multiplication/index.html @@ -0,0 +1,73 @@ +--- +title: Множення (*) +slug: Web/JavaScript/Reference/Operators/Multiplication +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Multiplication +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор множення (<code>*</code>) повертає добуток операндів.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> * <var>y</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Множення_чисел">Множення чисел</h3> + +<pre class="brush: js notranslate"> 2 * 2 // 4 +-2 * 2 // -4 +</pre> + +<h3 id="Множення_на_нескінченність">Множення на нескінченність</h3> + +<pre class="brush: js notranslate">Infinity * 0 // NaN +Infinity * Infinity // Infinity</pre> + +<h3 id="Множення_нечислових_значень">Множення нечислових значень</h3> + +<pre class="brush: js notranslate">'foo' * 2 // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Multiplication operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.multiplication")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html new file mode 100644 index 0000000000..4d80c47ec9 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/multiplication_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з множенням (*=) +slug: Web/JavaScript/Reference/Operators/Multiplication_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з множенням (<code>*=</code>) помножує змінну на значення правого операнда та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x *= y +<strong>Значення:</strong> x = x * y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_множенням">Використання присвоєння з множенням</h3> + +<pre class="brush: js notranslate">// Розглянемо таку змінну +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.multiplication_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/new.target/index.html b/files/uk/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..fd0e121e3a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,97 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>Псевдовластивість<strong> <code>new.target</code></strong> дозволяє виявляти, чи були функції або конструктори створені за допомогою оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>. У конструкторах та функціях, запущених з використанням оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>, <code>new.target</code> повертає посилання на конструктор або функцію. У звичайних викликах функцій <code>new.target</code> дорівнює {{jsxref("undefined")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Опис">Опис</h2> + +<p>Синтаксис <code>new.target</code> складається з ключового слова <code>new</code>, крапки та ідентифікатора <code>target</code>. Зазвичай, зліва від крапки стоїть об'єкт, до властивості якого здійснюється звернення, але тут <code>new</code> не є об'єктом.</p> + +<p>Псевдовластивість <code>new.target</code> доступна в усіх функціях. У конструкторах класів вона посилається на зконструйований клас. У звичайних функціях вона посилається на саму функцію, за умови, що вона була викликана з використанням оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a>; в інших випадках <code>new.target</code> дорівнює {{jsxref("undefined")}}. У <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функціях </a><code>new.target</code> успадковується від оточуючої області видимості.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="new.target_у_викликах_функцій">new.target у викликах функцій</h3> + +<p>У звичайних викликах функцій (як протилежність викликам конструкторів) <code>new.target</code> дорівнює {{jsxref("undefined")}}. Це дозволяє визначити, чи була функція викликана з <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a> як конструктор.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw 'Foo() має викликатись з new'; + console.log('Foo викликано з new'); +} + +new Foo(); // виводить "Foo викликано з new" +Foo(); // викидає "Foo() має викликатись з new" +</pre> + +<h3 id="new.target_у_конструкторах">new.target у конструкторах</h3> + +<p>У конструкторах класів <code>new.target</code> посилається на конструктор, що був безпосередньо викликаний <code>new</code>. Це також стосується випадку, коли конструктор знаходиться у батьківському класі та був делегований з дочірнього конструктора.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // виводить "A" +var b = new B(); // виводить "B" + +class C { constructor() { console.log(new.target); } } +class D extends C { constructor() { super(); } } + +var c = new C(); // виводить class C{constructor(){console.log(new.target);}} +var d = new D(); // виводить class D extends C{constructor(){super();}}</pre> + +<p class="summary">Отже, з наведеного вище прикладу класів C та D, схоже, що <code>new.target</code> вказує на визначення класу, екземпляр якого було ініціалізовано. Наприклад, коли було ініціалізовано екземпляр D за допомогою new, було виведено визначення класу D, і схожим чином у випадку з c, було виведено клас C.</p> + +<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('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.new_target")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions">Функції</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/new/index.html b/files/uk/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..692938fdd2 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/new/index.html @@ -0,0 +1,197 @@ +--- +title: Оператор new +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><span class="seoSummary"><strong>Оператор <code>new</code></strong> дозволяє розробникам створити екземпляр визначеного користувачем типу об'єкта, або одного із вбудованих типів об'єктів, що містять функцію-конструктор.</span> Ключове слово <strong><code>new</code></strong> робить наступне:</p> + +<ol> + <li>Створює простий, порожній об'єкт JavaScript;</li> + <li>Прив'язує (присвоює в якості конструктора) інший об'єкт до цього об'єкта;</li> + <li>Передає створений об'єкт з <em>кроку 1</em> в якості контексту <code>this</code>;</li> + <li>Вертає <code>this</code>, якщо функція не вертає свій власний об'єкт. </li> +</ol> + +<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new <var>constructor</var>[([<var>arguments</var>])]</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>constructor</var></code></dt> + <dd>Клас чи функція, що визначає тип екземпляру об'єкта.</dd> +</dl> + +<dl> + <dt><code><var>arguments</var></code></dt> + <dd>Список значень, з якими викликатиметься <code><var>constructor</var></code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Створення визначеного користувачем об'єкта потребує двох кроків:</p> + +<ol> + <li>Визначити тип об'єкта, написавши функцію.</li> + <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li> +</ol> + +<p>Щоб визначити тип об'єкта, створіть функцію типу об'єкта, яка зазначає його ім'я та властивості. Об'єкт може мати властивість, яка є іншим об'єктом. Дивіться приклади нижче.</p> + +<p>Коли виконується код <code>new <em>Foo</em>(...)</code>, відбувається наступне:</p> + +<ol> + <li>Створюється новий об'єкт, успадкований від <code><em>Foo</em>.prototype</code>.</li> + <li>Викликається функція-конструктор <code><em>Foo</em></code> із заданими аргументами та з контекстом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, прив'язаним до новоствореного об'єкта. <code>new <em>Foo</em></code> дорівнює <code>new <em>Foo</em>()</code>, тобто, якщо жодних аргументів не задано, <code><em>Foo</em></code> викликається без аргументів.</li> + <li>Об'єкт (що не є null, false, 3.1415 чи іншим простим типом), який повертається функцією-конструктором, стає результатом усього виразу <code>new</code>. Якщо функція-конструктор не повертає об'єкт явно, використовується об'єкт, створений у кроці 1. (Зазвичай, конструктори не повертають значень, але можуть це зробити, якщо потрібно переписати звичайний процес створення об'єкта.)</li> +</ol> + +<p>Ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція <code>car1.color = "чорний"</code> додає властивість <code>color</code> (колір) до об'єкта <code>car1</code> та присвоює їй значення "<code>чорний</code>". Однак, це не впливає на інші об'єкти. Щоб додати нову властивість до усіх об'єктів одного типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p> + +<p>Ви можете додати спільну властивість до попередньо визначеного типу об'єкта за допомогою властивості <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Це визначає властивість, спільну для усіх об'єктів, створених цією функцією, а не лише для одного екземпляру цього типу. Наступний код додає властивість color (колір) зі значенням <code>"стандартний колір"</code> усім об'єктам типу <code>Car</code>, а потім замінює це значення рядком "<code>чорний</code>" тільки для екземпляру об'єкта <code>car1</code>. Дивіться більше у статті <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<pre class="brush: js">function Car() {} +car1 = new Car(); +car2 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = 'стандартний колір'; +console.log(car1.color); // стандартний колір + +car1.color = 'чорний'; +console.log(car1.color); // чорний + +console.log(Object.getPrototypeOf(car1).color) //стандартний колір +console.log(Object.getPrototypeOf(car2).color) //стандартний колір +console.log(car1.color) // чорний +console.log(car2.color) // стандартний колір</pre> + +<div class="note"> +<p>Якщо ви не напишете оператор <code>new</code>, <strong>функція-конструктор буде викликана як будь-яка звичайна фукнція,</strong> <em>без створення об'єкта.</em> У цьому випадку значення <code>this</code> також буде іншим.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Тип_обєкта_та_екземпляр_обєкта">Тип об'єкта та екземпляр об'єкта</h3> + +<p>Припустимо, вам потрібно створити тип об'єкта для машин. Тип об'єкта має називатися <code>Car</code> і має містити властивості для марки, моделі та року випуску. Для цього ви б написали наступну функцію:</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Тепер ви можете створити об'єкт під назвою <code>myCar</code>:</p> + +<pre class="brush: js">var myСar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Ця інструкція створює об'єкт <code>myСar</code> і присвоює його властивостям задані значення. В результаті значенням <code>myCar.make</code> буде строка "Eagle", <code>myCar.year</code> - ціле число 1993, тощо.<br> + <br> + Викликаючи <code>new</code>, можна створити необмежене число об'єктів типу <code>Car</code>. Наприклад:</p> + +<pre class="brush: js">var kensCar = new Car('Nissan', '300ZX', 1992); +</pre> + +<h3 id="Властивість_обєкта_яка_є_іншим_обєктом">Властивість об'єкта, яка є іншим об'єктом</h3> + +<p>Припустимо, ви визначаєте об'єкт на ім'я <code>Person</code> (людина) наступним чином:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>Інстанціюємо два нових об'єкти типу <code>Person</code>:</p> + +<pre class="brush: js">var rand = new Person('Rand McNally', 33, 'Ч'); +var ken = new Person('Ken Jones', 39, 'Ч'); +</pre> + +<p>Далі можна доповнити визначення <code>Car</code> і включити в нього властивість <code>owner</code> (власник). Ця властивість буде приймати об'єкт <code>Person</code>, як у прикладі нижче:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Тепер, щоб інстанціювати нові об'єкти, ви робите наступне:</p> + +<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>Замість того, щоб передавати рядковий літерал або ціле число при створенні нових об'єктів, ці інструкції передають об'єкти <code>rand</code> та <code>ken</code> в якості власників. Щоб дізнатись ім'я власника <code>car2</code>, ви можете звернутись до даної властивості:</p> + +<pre class="brush: js">car2.owner.name +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Також_див.">Також див.</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..7b48188731 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,166 @@ +--- +title: Оператор null-об'єднання +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +tags: + - JavaScript + - null-об'єднання + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p><strong>Оператор null-об'єднання (<code>??</code>)</strong> - це логічний оператор, який повертає свій правий операнд, якщо його лівий операнд дорівнює {{jsxref("null")}} чи {{jsxref("undefined")}}, інакше, він повертає свій лівий операнд.</p> + +<p>На відміну від <a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">логічного АБО (<code>||</code>)</a>, лівий операнд повертається, якщо це <em><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Опис">хибне</a></em> значення, яке не дорівнює <code>null</code> чи <code>undefined</code>. Іншими словами, якщо ви використовуєте <code>||</code> для надання значення за замовчуванням іншій змінній <code>foo</code>, ви можете зіткнутися з неочікуваною поведінкою, якщо використовуєте хибні значення (напр., <code>''</code> або <code>0</code>). Дивіться нижче більше прикладів.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p 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.<br> + See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>лівийВираз</var> ?? <var>правийВираз</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор null-об'єднання повертає результати свого правого виразу, якщо лівий вираз дорівнює або {{jsxref("null")}}, або {{jsxref("undefined")}}.</p> + +<h3 id="Присвоєння_змінній_значення_за_замовчуванням">Присвоєння змінній значення за замовчуванням</h3> + +<p>Раніше, якщо потрібно було присвоїти змінній значення за замовчуванням, звичайною практикою було використання логічного оператора АБО (<code><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">||</a></code>):</p> + +<pre class="brush: js">let foo; +... +// змінній foo ще не присвоювали значення, тому вона ще дорівнює undefined +let someDummyText = foo || 'Привіт!';</pre> + +<p>Однак, через те, що <code>||</code> є булевим логічним оператором, лівий операнд примусово приводився до булевого значення для обчислення, і будь-яке <em>хибне</em> значення (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не поверталось. Ця поведінка може спричинити несподівані наслідки, якщо ви розглядаєте <code>0</code>, <code>''</code> чи <code>NaN</code> як коректні значення.</p> + +<pre class="brush: js">let count; +let text; +... +count = 0; +text = ""; +... +let qty = count || 42; +let message = text || "привіт!"; +console.log(qty); // 42, а не 0 +console.log(message); // "привіт!", а не "" +</pre> + +<p>Оператор null-об'єднання уникає цієї пастки, повертаючи другий операнд лише тоді, коли перший повертає або <code>null</code>, або <code>undefined</code> (і ніяке інше хибне значення):</p> + +<pre class="brush: js">let myText = ''; // Порожній рядок (який також є хибним значенням) + +let notFalsyText = myText || 'Привіт'; +console.log(notFalsyText); // Привіт + +let preservingFalsy = myText ?? 'Привіт, сусід'; +console.log(preservingFalsy); // '' (оскільки myText не дорівнює undefined чи null) +</pre> + +<h3 id="Коротке_замикання">Коротке замикання</h3> + +<p>Як і у логічному операторі АБО, правий вираз не обчислюється, якщо лівий не дорівнює ані <code>null</code>, ані <code>undefined</code>.</p> + +<pre class="brush: js">function A() { console.log('викликано A'); return undefined;} +function B() { console.log('викликано B'); return false;} +function C() { console.log('викликано C'); return "foo";} + +console.log( A() ?? C() ); +// виводить "викликано A", далі "викликано C", і далі "foo", +// оскільки функція A() повернула undefined, отже, обидва вирази обчислюються + +console.log( B() ?? C() ); +// виводить "викликано B", далі "false", +// оскільки B() повернула false (а не null чи undefined), правий +// вираз не обчислювався +</pre> + +<h3 id="Не_утворює_ланцюгів_з_операторами_І_чи_АБО">Не утворює ланцюгів з операторами І чи АБО</h3> + +<p>Неможливо об'єднати оператори І (<code>&&</code>) та АБО (<code>||</code>) безпосередньо з <code>??</code>. В таких випадках буде викинуто помилку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> + +<pre class="brush: js">null || undefined ?? "foo"; // викидає SyntaxError +true || undefined ?? "foo"; // викидає SyntaxError</pre> + +<p>Однак, використання дужок для явного зазначення пріоритетності, є коректним:</p> + +<pre class="brush: js">(null || undefined) ?? "foo"; // вертає "foo" +</pre> + +<h3 id="Звязок_з_оператором_необовязкового_ланцюгування_.">Зв'язок з оператором необов'язкового ланцюгування (<code>?.</code>)</h3> + +<p>Оператор null-об'єднання ставиться до значень <code>undefined</code> та <code>null</code> особливим чином, так само, як <a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор необов'язкового ланцюгування (<code>?.</code>)</a>, який є корисним для доступу до властивостей об'єкта, які можуть дорівнювати <code>null</code> чи <code>undefined</code>.</p> + +<pre class="brush: js">let foo = { someFooProp: "привіт" }; + +console.log(foo.someFooProp?.toUpperCase()); // "ПРИВІТ" +console.log(foo.someBarProp?.toUpperCase()); // undefined +</pre> + +<h2 id="Приклади">Приклади</h2> + +<p>У цьому прикладі ми задаємо початкові значення, але залишаємо значення, які не дорівнюють <code>null</code> чи <code>undefined</code>.</p> + +<pre class="brush: js">function getMiscObj(){ + return { + aNullProperty: null, + emptyText: "", + someNumber: 42 + }; +}; + +const miscObj = getMiscObj(); + +const newObj = {}; +newObj.propA = miscObj.aNullProperty ?? "початкове для A"; +newObj.propB = miscObj.emptyText ?? "початкове для B"; +newObj.propC = miscObj.someNumber ?? 0; + +console.log(newObj.propA); // "початкове для A" +console.log(newObj.propB); // "" (оскільки порожній рядок не дорівнює null чи undefined) +console.log(newObj.propC); // 42 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td> + <td>Стадія 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Хід_реалізації">Хід реалізації</h3> + +<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор необов'язкового ланцюгування</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Оператор логічне АБО (<code>||</code>)</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметри за замовчуванням у функціях</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/operator_precedence/index.html b/files/uk/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..678647952c --- /dev/null +++ b/files/uk/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,332 @@ +--- +title: Пріоритет операторів +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Оператор + - пріоритет +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Пріоритет операторів</strong> визначає, яким чином розбиратимуться оператори по відношенню один до одного. Оператори з вищим пріоритетом стають операндами операторів з нижчим пріоритетом.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + + + +<h2 id="Асоціативність">Асоціативність</h2> + +<p>Асоціативність визначає те, яким чином розбираються оператори з однаковим пріоритетом. Наприклад, розглянемо вираз:</p> + +<pre class="syntaxbox">a OP b OP c +</pre> + +<p>Лівоасоціативність (зліва направо) означає, що вони оброблятимуться як <code>(a OP b) OP c</code>, в той час як правоасоціативність (справа наліво) означає, що він буде інтерпретований як <code>a OP (b OP c)</code>. Оператори присвоєння є правоасоціативними, отже, ви можете написати:</p> + +<pre class="brush: js">a = b = 5; +</pre> + +<p>очікуючи, що <code>a</code> та <code>b</code> отримають значення 5. Все тому, що оператор присвоєння повертає значення, яке було присвоєне. Спочатку <code>b</code> присвоюється 5. Потім <code>a</code> також присвоюється 5, значення, яке повертається від <code>b = 5</code>, або правого операнду присвоєння.</p> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">3 > 2 && 2 > 1 +// вертає true + +3 > 2 > 1 +// вертає false, тому що 3 > 2 дорівнює true, а true > 1 дорівнює false +// Додавання дужок робить все зрозумілішим: (3 > 2) > 1</pre> + +<h2 id="Таблиця">Таблиця</h2> + +<p>Ця таблиця впорядкована від найвищого (21) до найнижчого (1) пріоритету.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Пріоритет</th> + <th>Тип оператора</th> + <th>Асоціативність</th> + <th>Окремі оператори</th> + </tr> + <tr> + <td>21</td> + <td>{{jsxref("Operators/Grouping", "Групування", "", 1)}}</td> + <td>н/з</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td colspan="1" rowspan="5">20</td> + <td>{{jsxref("Operators/Property_Accessors", "Доступ до властивостей", "#Крапкова_нотація", 1)}}</td> + <td>зліва направо</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Доступ до обчислених властивостей","#Дужкова_нотація", 1)}}</td> + <td>зліва направо</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (зі списком аргументів)</td> + <td>н/з</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Guide/Functions">Виклик функції</a></td> + <td>зліва направо</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></td> + <td>зліва направо</td> + <td><code>?.</code></td> + </tr> + <tr> + <td rowspan="1">19</td> + <td>{{jsxref("Operators/new","new")}} (без списку аргументів)</td> + <td>справа наліво</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">18</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Постфіксний інкремент","#Increment", 1)}}</td> + <td colspan="1" rowspan="2">н/з</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Постфіксний декремент","#Decrement", 1)}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td colspan="1" rowspan="10">17</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Логічне НЕ</a></td> + <td colspan="1" rowspan="10">справа наліво</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Побітове НЕ</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Унарний плюс</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарний мінус</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Префіксний інкремент</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Префіксний декремент</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/typeof", "typeof")}}</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/void", "void")}}</td> + <td><code>void …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/delete", "delete")}}</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/await", "await")}}</td> + <td><code>await …</code></td> + </tr> + <tr> + <td>16</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Піднесення до степеня</a></td> + <td>справа наліво</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">15</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Множення</a></td> + <td colspan="1" rowspan="3">зліва направо</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Ділення</a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остача</a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">14</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Додавання</a></td> + <td colspan="1" rowspan="2">зліва направо</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Віднімання</a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">13</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">Бітовий лівий зсув</a></td> + <td colspan="1" rowspan="3">зліва направо</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">Бітовий правий зсув</a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">Бітовий беззнаковий правий зсув</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">12</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_ніж_<">Менше ніж</a></td> + <td colspan="1" rowspan="6">зліва направо</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_чи_дорівнює_<">Менше чи дорівнює</a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_ніж_>">Більше ніж</a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_чи_дорівнює_>">Більше чи порівнює</a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/in", "in")}}</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/instanceof", "instanceof")}}</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">11</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність">Рівність</a></td> + <td colspan="1" rowspan="4">зліва направо</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Нерівність_!">Нерівність</a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність">Строга рівність</a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Неідентичність_строга_нерівність_!">Строга нерівність</a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>10</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Побітове І</a></td> + <td>зліва направо</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Виключне побітове АБО</a></td> + <td>зліва направо</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Побітове АБО</a></td> + <td>зліва направо</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Оператор null-об'єднання</a></td> + <td>зліва направо</td> + <td><code>… ?? …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Логічне І</a></td> + <td>зліва направо</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Логічне АБО</a></td> + <td>зліва направо</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a></td> + <td>справа наліво</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння</a></td> + <td rowspan="13">справа наліво</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td>{{jsxref("Operators/yield", "yield")}}</td> + <td colspan="1" rowspan="2">справа наліво</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/yield*", "yield*")}}</td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Кома / Послідовність</a></td> + <td>зліва направо</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/uk/web/javascript/reference/operators/optional_chaining/index.html b/files/uk/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..c20ef9f9a6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,194 @@ +--- +title: Необов'язкове ланцюгування +slug: Web/JavaScript/Reference/Operators/Optional_chaining +tags: + - JavaScript + - Optional chaining + - Експериментальний + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>{{SeeCompatTable}}</div> + +<div></div> + +<p>Оператор <strong>необов'язкового ланцюгування</strong> <strong><code>?.</code></strong> дозволяє читати значення властивості, розташованої глибоко всередині ланцюга пов'язаних об'єктів, без необхідності прямо підтверджувати, що кожне посилання у ланцюгу є дійсним. <span class="seoSummary">Оператор <code>?.</code> діє схоже з оператором ланцюгування <code>.</code>, за винятком того, що замість помилки у випадку посилання на {{jsxref("null")}} чи {{jsxref("undefined")}}, вираз виконає коротке замикання та поверне <code>undefined</code>.</span> При використанні з викликами функцій, вираз поверне <code>undefined</code>, якщо задана функція не існує.</p> + +<p>Це створює коротші та простіші вирази для звернення через ланцюг властивостей, коли існує ймовірність зустріти відсутнє посилання. Це також може бути корисним для дослідження вмісту об'єкта, коли немає гарантії того, що певні властивості є обов'язковими.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +arr?.[index] +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор необов'язкового ланцюгування надає спосіб спростити звернення до значень через поєднані об'єкти, коли є ймовірність, що посилання чи функція дорівнюватиме <code>undefined</code> чи <code>null</code>.</p> + +<p>Наприклад, розглянемо об'єкт <code>obj</code>, який має вкладену структуру. Без необов'язкового ланцюгування пошук глибоко вкладеної властивості вимагає перевірки проміжних посилань, як от:</p> + +<pre class="brush: js">let nestedProp = obj.first && obj.first.second;</pre> + +<p>Підтверджуємо, що значення <code>obj.first</code> не <code>null</code> (і не <code>undefined</code>) перед тим, як звертатись до <code>obj.first.second</code>. Це дозволяє запобігти помилці, яка виникла б, якщо б ми просто звернулись прямо до <code>obj.first.second</code> без перевірки <code>obj.first</code>.</p> + +<p>Проте, з оператором необов'язкового ланцюгування (<code>?.</code>) ви не мусите робити явну перевірку та переривати вираз в залежності від стану <code>obj.first</code> перед тим, як звертатись до <code>obj.first.second</code>:</p> + +<pre class="brush: js">let nestedProp = obj.first?.second;</pre> + +<p>При використанні оператора <code>?.</code> замість простого <code>.</code> JavaScript виконує неявну перевірку, щоб переконатись, що <code>obj.first</code> не дорівнює <code>null</code> чи <code>undefined</code>, перед тим, як звертатись до <code>obj.first.second</code>. Якщо <code>obj.first</code> дорівнює <code>null</code> чи <code>undefined</code>, вираз автоматично виконує коротке замикання, повертаючи <code>undefined</code>.</p> + +<p>Це еквівалентно наступному:</p> + +<pre class="brush: js">let nestedProp = ((obj.first == null || obj.first == undefined) ? undefined : obj.first.second);</pre> + +<h3 id="Необовязкове_ланцюгування_з_викликами_функцій">Необов'язкове ланцюгування з викликами функцій</h3> + +<p>Ви можете скористатись необов'язковим ланцюгуванням під час виклику методу, який, можливо, не існує. Це може бути зручно, наприклад, при використанні API, у якому метод може бути недоступний, чи то через застарілу реалізацію, чи тому, що функціональність недоступна на пристрої користувача.</p> + +<p>При використанні необов'язкового ланцюгування, вираз автоматично повертає <code>undefined</code> замість викидання винятку, якщо метод не знайдений:</p> + +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Якщо існує властивість з таким іменем, яка не є функцією, використання <code>?.</code> все ж спричинить виняток {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> +</div> + +<h4 id="Необовязкові_зворотні_виклики_та_обробники_подій">Необов'язкові зворотні виклики та обробники подій</h4> + +<p>Якщо ви використовуєте зворотні виклики або методи fetch з об'єкта з <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%94%D0%B5%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D1%8F#%D0%94%D0%B5%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">деструктуризаційним присвоєнням</a>, ви, можливо, матимете неіснуючі значення, які не можна викликати як функції, поки ви не перевірили, що вони існують. Використовуючи <code>?.</code>, можна уникнути цієї додаткової перевірки:</p> + +<pre class="brush: js">// Написано згідно ES2019 +function doSomething(onContent, onError) { + try { + // ... використати дані + } + catch (err) { + if (onError) { // Перевірка, що onError існує + onError(err.message); + } + } +} +</pre> + +<pre class="brush: js">// Використання необов'язкового ланцюгування з викликами функцій +function doSomething(onContent, onError) { + try { + // ... використати дані + } + catch (err) { + onError?.(err.message); // жодного винятку, якщо onError є undefined + } +} +</pre> + +<h3 id="Необовязкове_ланцюгування_з_виразами">Необов'язкове ланцюгування з виразами</h3> + +<p>Ви також можете використати оператор необов'язкового ланцюгування, звертаючись до властивостей через вираз з використанням <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">дужкової нотації</a>:</p> + +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h3 id="Доступ_до_елементу_масиву_через_необовязкове_ланцюгування">Доступ до елементу масиву через необов'язкове ланцюгування</h3> + +<pre class="brush: js">let arrayItem = arr?.[42];</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Базовий_приклад">Базовий приклад</h3> + +<p>Цей приклад звертається до значення властивості <code>name</code> ключа <code>bar</code> у мапі, де немає такого ключа. Отже, результатом буде <code>undefined</code>.</p> + +<pre class="brush: js">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="Коротке_замикання_обчислення">Коротке замикання обчислення</h3> + +<p>При використанні необов'язкового ланцюгування з виразами, якщо лівий операнд дорівнює <code>null</code> чи <code>undefined</code>, вираз не буде обчислюватись. Для прикладу:</p> + +<pre class="brush: js">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0, оскільки значення x не збільшувалось +</pre> + +<h3 id="Складання_операторів_необовязкового_ланцюгування">Складання операторів необов'язкового ланцюгування</h3> + +<p>У вкладених структурах можна використовувати необов'язкове ланцюгування декілька раз:</p> + +<pre class="brush: js">let customer = { + name: "Карл", + details: { + age: 82, + location: "Далекі гори" // точна адреса невідома + } +}; +let customerCity = customer.details?.address?.city; + +// … це також працює для ланцюгування виклику функції +let duration = vacations.trip?.getTime?.(); +</pre> + +<h3 id="Поєднання_з_оператором_null-обєднання">Поєднання з оператором null-об'єднання</h3> + +<p>Можна скористатись оператором null-об'єднання після необов'язкового ланцюгування, щоб задати значення, коли воно не було знайдене:</p> + +<pre class="brush: js">let customer = { + name: "Карл", + details: { age: 82 } +}; +let customerCity = customer?.city ?? "Невідоме місто"; +console.log(customerCity); // Невідоме місто</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-optional-chaining/#top">Пропозиція щодо оператора "необов'язкового ланцюгування"</a></td> + <td>Стадія 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h3 id="Хід_реалізації">Хід реалізації</h3> + +<p>Наведена нижче таблиця надає щоденний статус реалізації цієї функціональності, оскільки функціональність ще не досягла кросбраузерної стабільності. Дані генеруються запуском відповідних тестів функціональності у <a href="https://github.com/tc39/test262">Test262</a>, стандартному тестовому наборі JavaScript, на нічній збірці чи на останньому релізі рушія JavaScript кожного веб-переглядача.</p> + +<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Оператор null-об'єднання", '', 1)}}</li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/pipeline_operator/index.html b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..496e425950 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,87 @@ +--- +title: Конвеєрний оператор +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +tags: + - JavaScript + - Експериментальний + - Оператор + - конвеєрний +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>Експериментальний конвеєрний оператор <code>|></code> (наразі на стадії 1) передає значення виразу у функцію. Це дозволяє створювати ланцюги функціональних викликів, які легко читаються. Результатом є синтаксичний цукор, у якому виклик функції з єдиним аргументом можна записати наступним чином:</p> + +<pre class="brush: js">let url = "%21" |> decodeURI;</pre> + +<p>Аналогічний виклик у традиційному синтаксисі виглядає так:</p> + +<pre class="brush: js">let url = decodeURI("%21"); +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>вираз</em> |> <em>функція</em> +</pre> + +<p>Значення вказаного <code>виразу</code> передається у <code>функцію</code> як її єдиний параметр.</p> + +<h3 id="Параметри">Параметри</h3> + +<p><code>expression</code></p> + +<p> Будь-який дозволений вираз.</p> + +<p><code>function</code></p> + +<p> Будь-яка функція.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Ланцюги_функціональних_викликів">Ланцюги функціональних викликів</h3> + +<p>Конвеєрний оператор може покращити читабельність при створенні ланцюга з декількох функцій.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// без конвеєрного оператора +double(increment(double(double(5)))); // 42 + +// з конвеєрним оператором +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> + <td>Stage 1</td> + <td>Поки що не є частиною специфікації ECMAScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/property_accessors/index.html b/files/uk/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..919d36b898 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,157 @@ +--- +title: Доступ до властивостей +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператори доступу до властивостей</strong> надають доступ до властивостей об'єкта за допомогою крапкової або дужкової нотації.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">object.property +object['property'] +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Можна сприймати об'єкт як <em>асоціативний масив</em> (також відомий як <em>словник, </em><em>мапа</em>, <em>хеш</em>, <em>таблиця пошуку</em>). <em>Ключами</em> у цьому масиві є імена властивостей об'єкта.</p> + +<p>Говорячи про властивості об'єкта, прийнято розрізняти властивості та методи. Однак, це розрізнення є не більше, ніж конвенцією. Метод - це просто властивість, яку можна викликати, наприклад, якщо вона має посилання на екземпляр {{jsxref("Function","функції")}} в якості значення.</p> + +<p>Існує два способи доступу до властивостей: крапкова нотація та дужкова нотація.</p> + +<h3 id="Крапкова_нотація">Крапкова нотація</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p>У цьому коді <code>property</code> має бути коректним {{glossary("ідентифікатор","ідентифікатором")}} JavaScript . Наприклад, ідентифікатор <code>object.$1</code> коректний, а <code>object.1</code> ні.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Тут метод на ім'я "createElement" отримується з об'єкта <code>document</code> і викликається.</p> + +<p>Якщо ви використовуєте метод для числового літералу, і числовий літерал не має показника степеня чи десяткової крапки, залиште {{glossary("Whitespace", "пробільний символ(и)")}} перед крапкою, що передує виклику методу, щоб крапка не була інтерпретована як десятковий розділювач.</p> + +<pre class="brush: js">77 .toExponential(); +// або +77 +.toExponential(); +// або +(77).toExponential(); +// або +77..toExponential(); +// або +77.0.toExponential(); +// тому що 77. === 77.0, неоднозначності немає</pre> + +<h3 id="Дужкова_нотація">Дужкова нотація</h3> + +<pre class="brush: js">get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> - це рядок або {{glossary("Symbol","символ")}}. Він не мусить бути коректним ідентифікатором; він може мати будь-яке значення, наприклад, "<code>1foo</code>", "<code>!bar!</code>", чи навіть "<code> </code>" (пробіл).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Цей код виконує абсолютно те саме, що й попередній приклад.</p> + +<p>Перед дужковим позначенням дозволені пробіли.</p> + +<pre class="brush: js">document ['createElement']('pre');</pre> + +<h3 id="Імена_властивостей">Імена властивостей</h3> + +<p>Імена властивостей можуть бути рядком або {{glossary("Symbol","символом")}}. Будь-яке інше значення, в тому числі числове, примусово приводиться до рядка.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'значення'; +console.log(object[1]); +</pre> + +<p>Цей код виводить "значення", оскільки <code>1</code> перетворюється у <code>'1'</code>.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'значення'; +console.log(object[bar]); +</pre> + +<p>Цей код також виведе "значення", оскільки і <code>foo</code>, і <code>bar</code> перетворюються у один і той самий рядок.</p> + +<p>У рушії JavaScript <a href="/uk/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> цей рядок дорівнював би "<code>[object Object]</code>".</p> + +<h3 id="Привязка_методу">Прив'язка методу</h3> + +<p>Метод не прив'язаний того до об'єкта, чиїм методом він є. Зокрема, значення <code>this</code> не зафіксоване у методі, тобто, <code>this</code> не обов'язково вказує на об'єкт, який містить цей метод. Замість цього, <code>this</code> "передається" викликом функції. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/this#Метод_bind">метод bind</a>.</p> + +<h3 id="Заувага_щодо_eval">Заувага щодо <code>eval</code></h3> + +<p>Новачки у JavaScript часто роблять помилку, використовуючи {{jsxref("eval", "eval()")}} там, де можна використати дужкову нотацію.</p> + +<p>Наприклад, наступний синтаксис можна зустріти у багатьох скриптах.</p> + +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p>Функція <code>eval()</code> повільна, її бажано уникати, де це можливо. Також, змінна <code>strFormControl</code> мала б містити ідентифікатор, що не є обов'язковим для імен та ID елементів форми. Краще використовувати дужкову нотацію:</p> + +<pre class="brush: js">x = document.forms['form_name'].elements[strFormControl].value; +</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('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.property_accessors")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Необов'язкове ланцюгування</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/remainder/index.html b/files/uk/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..b72092ca6b --- /dev/null +++ b/files/uk/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,77 @@ +--- +title: Остача (%) +slug: Web/JavaScript/Reference/Operators/Remainder +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор остачі (<code>%</code>) повертає остачу від ділення першого операнду на другий. Він завжди приймає знак діленого.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Остача_з_додатним_діленим">Остача з додатним діленим</h3> + +<pre class="brush: js notranslate"> 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +</pre> + +<h3 id="Остача_з_відємним_діленим">Остача з від'ємним діленим</h3> + +<pre class="brush: js notranslate">-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0</pre> + +<h3 id="Остача_з_NaN">Остача з NaN</h3> + +<pre class="brush: js notranslate">NaN % 2 // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.remainder")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/remainder_assignment/index.html b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html new file mode 100644 index 0000000000..8953ddca4a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/remainder_assignment/index.html @@ -0,0 +1,61 @@ +--- +title: Присвоєння остачі (%=) +slug: Web/JavaScript/Reference/Operators/Remainder_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння остачі (<code>%=</code>) ділить змінну на значення правого операнда та присвоює остачу змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x %= y +<strong>Значення:</strong> x = x % y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_остачі">Використання присвоєння остачі</h3> + +<pre class="brush: js notranslate">// Розглянемо таку змінну +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.remainder_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/right_shift/index.html b/files/uk/web/javascript/reference/operators/right_shift/index.html new file mode 100644 index 0000000000..f8d660123a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/right_shift/index.html @@ -0,0 +1,74 @@ +--- +title: Правий зсув (>>) +slug: Web/JavaScript/Reference/Operators/Right_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Right_shift +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор правого зсуву (<code>>></code>)</strong> виконує зсув першого операнда на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва оператора "з розширенням знаку".</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> >> <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта. Оскільки новий старший біт матиме те саме значення, що й попередній старший біт, знаковий (старший) біт не змінюється. Звідси назва "з розширенням знаку".</p> + +<p>Наприклад, <code>9 >> 2</code> дорівнює 2:</p> + +<pre class="brush: js notranslate">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 >> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (base 10) +</pre> + +<p>Аналогічно, <code>-9 >> 2</code> дорівнює <code>-3</code>, оскільки знак зберігається:</p> + +<pre class="brush: js notranslate">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) + -------------------------------- +-9 >> 2 (основа 10): 11111111111111111111111111111101 (основа 2) = -3 (base 10) +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_правого_зсуву">Використання правого зсуву</h3> + +<pre class="brush: js notranslate"> 9 >> 2; // 2 +-9 >> 2; // -3 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.right_shift")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">Оператор присвоєння з правим зсувом</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html new file mode 100644 index 0000000000..d006d97e7f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/right_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з правим зсувом (>>=) +slug: Web/JavaScript/Reference/Operators/Right_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з правим зсувом (<code>>>=</code>) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x >>= y +<strong>Значення:</strong> x = x >> y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_правим_зсувом">Використання присвоєння з правим зсувом</h3> + +<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) +a >>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>= 2; // -2 (-00000000000000000000000000000010)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.right_shift_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Right_shift">Оператор правого зсуву</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/spread_syntax/index.html b/files/uk/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..ca9598e9eb --- /dev/null +++ b/files/uk/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,253 @@ +--- +title: Оператор розкладу +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор розкладу</strong> дозволяє розкласти ітерабельний об'єкт, такий як масив чи рядок, там, де очікується нуль чи більше аргументів (для викликів функцій) чи елементів (для масивних літералів), або розкласти об'єкт там, де очікується нуль або більше пар ключ-значення (для об'єктних літералів).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Для викликів функцій:</p> + +<pre class="syntaxbox notranslate">myFunction(...iterableObj); +</pre> + +<p>Для масивних літералів або рядків:</p> + +<pre class="syntaxbox notranslate">[...iterableObj, "4", "п'ять", 6];</pre> + +<p>Для об'єктних літералів (нове у ECMAScript 2018):</p> + +<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> + +<h2 id="Залишковий_синтаксис_параметри">Залишковий синтаксис (параметри)</h2> + +<p>Залишковий синтаксис виглядає так само, як синтаксис розкладання, але використовується для <em>деструктуризації</em> масивів та об'єктів.</p> + +<p>В певному сенсі, залишковий синтаксис є протилежністю синтаксису розкладу. Розклад "розпаковує" масив на його окремі елементи, в той час, як залишковий синтаксис збирає множину елементів та "стискає" їх у єдиний елемент. Дивіться {{jsxref("Functions/решта_параметрів", "залишкові параметри", "", 1)}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Розклад_у_викликах_функцій"><a id="Spread_in_function_calls" name="Spread_in_function_calls">Розклад у викликах функцій</a></h3> + +<h4 id="Заміна_apply">Заміна <code>apply()</code></h4> + +<p>Зазвичай, {{jsxref("Function.prototype.apply()")}} використовується, коли ви бажаєте використати елементи масиву як аргументи у функції.</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +const args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>З оператором розкладу наведене можна записати так:</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +const args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Будь-який аргумент у списку може використати синтаксис розкладу, і він може використовуватись неодноразово.</p> + +<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +const args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_для_оператора_new">Apply для оператора <code>new</code></h4> + +<p>Викликаючи конструктор з {{jsxref("Operators/new", "new")}}, неможливо <strong>прямо</strong> використовувати масив та <code>apply</code> (<code>apply</code> виконує <code>[[Call]]</code>, а не <code>[[Construct]]</code>). Однак, масив можна легко використовувати з <code>new</code> завдяки синтаксису розкладу:</p> + +<pre class="brush: js notranslate">const dateFields = [1970, 0, 1]; // 1 Січня 1970 +const d = new Date(...dateFields); +</pre> + +<p>Щоб використати new з масивом параметрів без розкладу, вам довелося б зробити це <strong>опосередковано</strong>, частковим застосуванням:</p> + +<pre class="brush: js notranslate">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="знач1"; + this.prop2="знач2"; +}; + +var myArguments = ["вітаю", "як", "ся", "маєте", "п.", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["вітаю", "як", "ся", "маєте", "п.", null] +// (log of "new myConstructorWithArguments"): {prop1: "знач1", prop2: "знач2"}</pre> + +<h3 id="Розклад_у_масивних_літералах"><a id="Spread_in_array_literals" name="Spread_in_array_literals">Розклад у масивних літералах</a></h3> + +<h4 id="Потужніший_масивний_літерал">Потужніший масивний літерал</h4> + +<p>Без оператора розкладу, щоб створити новий масив, частиною якого є існуючий масив, літерального синтаксису масивів недостатньо, доводиться використовувати імперативний код з використанням комбінації з {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, і т. д. З синтаксисом розкладу все стає набагато лаконічнішим:</p> + +<pre class="brush: js notranslate">var parts = ['плечі', 'коліна']; +var lyrics = ['голова', ...parts, 'та', 'пальці']; +// ["голова", "плечі", "коліна", "та", "пальці"] +</pre> + +<p>Як і розклад аргументів, <code>...</code> може використовуватись будь-де у масивному літералі, і може використовуватись неодноразово.</p> + +<h4 id="Копія_масиву">Копія масиву</h4> + +<pre class="brush: js notranslate">const arr = [1, 2, 3]; +const arr2 = [...arr]; // як arr.slice() + +arr2.push(4); +// arr2 стає [1, 2, 3, 4] +// arr залишається незміненим +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Оператор розкладу ефективно йде на один рівень вглиб при копіюванні масиву. Тому він може бути непридатний для копіювання багатовимірних масивів, як показано у наступному прикладі (те саме з {{jsxref("Object.assign()")}} та розкладом).</p> + +<pre class="brush: js example-bad notranslate">const a = [[1], [2], [3]]; +const b = [...a]; + +b.shift().shift(); +// 1 + +// О, ні! Тепер масив 'a' також змінився: +a +// [[], [2], [3]]</pre> +</div> + +<h4 id="Краще_обєднання_масивів">Краще об'єднання масивів</h4> + +<p>Метод {{jsxref("Array.prototype.concat()")}} часто використовується для приєднання масиву в кінець існуючого масиву. Без оператора розкладу це робиться так:</p> + +<pre class="brush: js notranslate">const arr1 = [0, 1, 2]; +const arr2 = [3, 4, 5]; + +// Додати всі елементи з arr2 у arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>З оператором розкладу отримуємо:</p> + +<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr1, ...arr2]; +// arr1 тепер [0, 1, 2, 3, 4, 5] +// Заувага: Не використовуйте const, це спричинить TypeError (недозволене присвоєння) +</pre> + +<p>Метод {{jsxref("Array.prototype.unshift()")}} часто використовується для додавання масиву значень у початок існуючого масиву. Без оператора розкладу це робиться так:</p> + +<pre class="brush: js notranslate">const arr1 = [0, 1, 2]; +const arr2 = [3, 4, 5]; + +// Подати усі елементи з arr2 до arr1 +Array.prototype.unshift.apply(arr1, arr2) + +// arr1 тепер [3, 4, 5, 0, 1, 2]</pre> + +<p>З оператором розкладу отримуємо:</p> + +<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr2, ...arr1]; +// arr1 тепер [3, 4, 5, 0, 1, 2] +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: На відміну від <code>unshift()</code>, цей код створює новий <code>arr1</code>, а не змінює початковий масив <code>arr1</code>.</p> +</div> + +<h3 id="Розклад_у_обєктних_літералах"><a id="Spread_in_object_literals" name="Spread_in_object_literals">Розклад у об'єктних літералах</a></h3> + +<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 4) додала розкладені властивості до {{jsxref("Operators/Ініціалізація_об’єктів", "об'єктних літералів", 1)}}. Цей синтаксис копіює особисті, перелічувані властивості наданого об'єкта у новий об'єкт.</p> + +<p>Дрібне клонування (без прототипу) чи злиття об'єктів тепер можливе за допомогою синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js notranslate">const obj1 = { foo: 'bar', x: 42 }; +const obj2 = { foo: 'baz', y: 13 }; + +const clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +const mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Зауважте, що {{jsxref("Object.assign()")}} запускає {{jsxref("Functions/set", "сетери")}}, а оператор розкладу ні.</p> + +<p>Зауважте, що ви не можете ані замінити, ані імітувати функцію {{jsxref("Object.assign()")}}:</p> + +<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }; +let obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +let mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +let mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>У наведеному прикладі оператор розкладу працює не так, як можна було очікувати: він розкладає <em>масив</em> аргументів у об'єктний літерал, через наявність залишкового параметра.</p> + +<h3 id="Тільки_для_ітерабельних_обєктів">Тільки для ітерабельних об'єктів</h3> + +<p>Самі по собі об'єкти не є ітерабельними, але вони стають ітерабельними, коли використовуються у масиві, або з функціями перебору, такими як <code>map()</code>, <code>reduce()</code> та <code>assign()</code>. При з'єднанні 2-х об'єктів за допомогою оператору розкладу, вважається, що застосовується функція перебору, коли відбувається з'єднання.</p> + +<p>Оператор розкладу (окрім випадку розкладених властивостей) може застосовуватись тільки до <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерабельних</a> об'єктів:</p> + +<pre class="brush: js notranslate">const obj = {'key1': 'value1'}; +const array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Розклад_з_великою_кількістю_значень">Розклад з великою кількістю значень</h3> + +<p>При використанні оператора розкладу для викликів функцій пам'ятайте про можливість перевищити ліміт кількості аргументів рушія JavaScript. Більше інформації дивіться у статті {{jsxref("Function.prototype.apply", "apply()")}}.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">Залишкові параметри</a> (також ‘<code>...</code>’)</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (також ‘<code>...</code>’)</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/strict_equality/index.html b/files/uk/web/javascript/reference/operators/strict_equality/index.html new file mode 100644 index 0000000000..4f420a049f --- /dev/null +++ b/files/uk/web/javascript/reference/operators/strict_equality/index.html @@ -0,0 +1,105 @@ +--- +title: Строга рівність (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор строгої рівності (<code>===</code>) перевіряє, чи є два операнди рівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a>, оператор строгої рівності завжди вважає операнди різних типів різними.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператори строгої рівності (<code>===</code> та <code>!==</code>) використовують <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">алгоритм строгої рівності</a> для порівняння двох операндів.</p> + +<ul> + <li>Якщо операнди належать до різних типів, повернути <code>false</code>.</li> + <li>Якщо обидва операнди є об'єктами, повернути <code>true</code> тільки якщо вони посилаються на один і той самий об'єкт.</li> + <li>Якщо обидва операнди дорівнюють <code>null</code> або обидва операнди дорівнюють <code>undefined</code>, повернути <code>true</code>.</li> + <li>Якщо будь-який з операндів є <code>NaN</code>, повернути <code>false</code>.</li> + <li>В інших випадках, порівняти значення двох операндів: + <ul> + <li>Числа повинні мати однакові числові значення. <code>+0</code> та <code>-0</code> вважаються одним значенням.</li> + <li>Рядки повинні мати однакові символи в однаковому порядку.</li> + <li>Значення Boolean повинні обидва дорівнювати <code>true</code> або обидва дорівнювати <code>false</code>.</li> + </ul> + </li> +</ul> + +<p>Найпомітніша відмінність між цим оператором та оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">рівності</a> (<code>==</code>) полягає в тому, що, якщо операнди належать до різних типів, оператор <code>==</code> намагається привести їх до одного типу перед порівнянням.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_операндів_одного_типу">Порівняння операндів одного типу</h3> + +<pre class="brush: js notranslate">console.log("привіт" === "привіт"); // true +console.log("привіт" === "агов"); // false + +console.log(3 === 3); // true +console.log(3 === 4); // false + +console.log(true === true); // true +console.log(true === false); // false + +console.log(null === null); // true</pre> + +<h3 id="Порівняння_операндів_різних_типів">Порівняння операндів різних типів</h3> + +<pre class="brush: js notranslate">console.log("3" === 3); // false + +console.log(true === 1); // false + +console.log(null === undefined); // false</pre> + +<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3> + +<pre class="brush: js notranslate">const object1 = { + name: "привіт" +} + +const object2 = { + name: "привіт" +} + +console.log(object1 === object2); // false +console.log(object1 === object1); // true</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.strict_equality")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Оператор строгої нерівності</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/strict_inequality/index.html b/files/uk/web/javascript/reference/operators/strict_inequality/index.html new file mode 100644 index 0000000000..831385fc29 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/strict_inequality/index.html @@ -0,0 +1,99 @@ +--- +title: Строга нерівність (!==) +slug: Web/JavaScript/Reference/Operators/Strict_inequality +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Strict_inequality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор строгої нерівності (<code>!==</code>) перевіряє, чи є два операнди нерівними, повертаючи результат типу Boolean. На відміну від оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">нерівності</a>, оператор строгої нерівності завжди вважає операнди різних типів різними.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</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="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h2 id="Опис">Опис</h2> + +<p>Оператор строгої нерівності перевіряє, чи є його операнди нерівними. Він є протилежністю оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>, тому наступні два рядки завжди даватимуть однаковий результат:</p> + +<pre class="brush: js notranslate">x !== y + +!(x === y)</pre> + +<p>Подробиці алгоритму порівняння дивіться на сторінці оператора <a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">строгої рівності</a>.</p> + +<p>Як і оператор строгої рівності, оператор строгої нерівності завжди вважатиме операнди різних типів різними:</p> + +<pre class="brush: js notranslate">3 !== "3"; // true</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Порівняння_операндів_одного_типу">Порівняння операндів одного типу</h3> + +<pre class="brush: js notranslate">console.log("привіт" !== "привіт"); // false +console.log("привіт" !== "агов"); // true + +console.log(3 !== 3); // false +console.log(3 !== 4); // true + +console.log(true !== true); // false +console.log(true !== false); // true + +console.log(null !== null); // false</pre> + +<h3 id="Порівняння_операндів_різних_типів">Порівняння операндів різних типів</h3> + +<pre class="brush: js notranslate">console.log("3" !== 3); // true + +console.log(true !== 1); // true + +console.log(null !== undefined); // true</pre> + +<h3 id="Порівняння_обєктів">Порівняння об'єктів</h3> + +<pre class="brush: js notranslate">const object1 = { + name: "привіт" +} + +const object2 = { + name: "привіт" +} + +console.log(object1 !== object2); // true +console.log(object1 !== object1); // false</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікації</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.strict_inequality")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Equality">Оператор рівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Inequality">Оператор нерівності</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Strict_equality">Оператор строгої рівності</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/subtraction/index.html b/files/uk/web/javascript/reference/operators/subtraction/index.html new file mode 100644 index 0000000000..fe5e53ddc6 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/subtraction/index.html @@ -0,0 +1,67 @@ +--- +title: Віднімання (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Subtraction +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор віднімання (<code>-</code>) віднімає один операнд від іншого, повертаючи різницю між ними.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> - <var>y</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Віднімання_чисел">Віднімання чисел</h3> + +<pre class="brush: js notranslate">5 - 3 // 2 +3 - 5 // -2</pre> + +<h3 id="Віднімання_з_нечисловими_значеннями">Віднімання з нечисловими значеннями</h3> + +<pre class="brush: js notranslate">'foo' - 3 // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.subtraction")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html new file mode 100644 index 0000000000..67cd75fa78 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/subtraction_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з відніманням (-=) +slug: Web/JavaScript/Reference/Operators/Subtraction_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з відніманням (<code>-=</code>) віднімає значення правого операнда від змінної та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x -= y +<strong>Значення:</strong> x = x - y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_відніманням">Використання присвоєння з відніманням</h3> + +<pre class="brush: js notranslate">// Розглянемо таку змінну +// bar = 5 + +bar -= 2 // 3 +bar -= 'foo' // NaN</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.subtraction_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/super/index.html b/files/uk/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..b1c2a89135 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - ECMAScript 2015 + - JavaScript + - Класи + - Оператор +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключове слово <strong>super</strong> використовується для доступу до функцій на батьківському об'єкті та виклику цих функцій.</p> + +<p>Вирази <code>super.prop</code> та <code>super[expr]</code> є коректними у будь-якому <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методу</a> як у <a href="/uk/docs/Web/JavaScript/Reference/Classes">класах</a>, так і у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктних літералах</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор. +super.functionOnParent([arguments]); +</pre> + +<h2 id="Опис">Опис</h2> + +<p>При застосуванні у конструкторі ключове слово <code>super</code> використовується окремо та має викликатись до ключового слова <code>this</code>. Ключове слово <code>super</code> також може використовуватись у викликах функцій батьківського об'єкта.</p> + +<h2 id="Приклад">Приклад</h2> + +<h3 id="Використання_super_у_класах">Використання <code>super</code> у класах</h3> + +<p>Цей фрагмент коду взято з <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">прикладу класів</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">демонстрація</a>). Тут <code>super()</code> викликається для запобігання дублюванню частин конструктора, які є спільними у <code>Rectangle</code> (прямокутник) та <code>Square</code> (квадрат).</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.name = 'Прямокутник'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Привіт, я ', this.name + '.'); + } + get area() { + return this.height * this.width; + } + set area(value) { + this._area = value; + } +} + +class Square extends Rectangle { + constructor(length) { + this.height; // ReferenceError, спочатку має викликатись super! + + // Тут ми викликаємо конструктор батьківського класу з довжиною + // в якості ширини та довжини прямокутника + super(length, length); + + // Заувага: У похідному класі super() має викликатись до 'this'. + // Не врахувавши це, ви отримаєте помилку посилання. + this.name = 'Квадрат'; + } +}</pre> + +<h3 id="Виклик_статичних_методів_через_super">Виклик статичних методів через super</h3> + +<p>Ви також можете викликати через super <a href="/uk/docs/Web/JavaScript/Reference/Classes/static">статичні</a> методи.</p> + +<pre class="brush: js">class Rectangle { + constructor() {} + static logNbSides() { + return 'Я маю 4 сторони'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ', і вони рівні'; + } +} +Square.logDescription(); // 'Я маю 4 сторони, і вони рівні' +</pre> + +<h3 id="Видалення_super-властивостей_викине_помилку">Видалення super-властивостей викине помилку</h3> + +<p>Ви не можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">оператор delete</a> та <code>super.prop</code> або <code>super[expr]</code>, щоб видалити властивість батьківського класу, це викине {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; // це погано + } +} + +new Derived().delete(); // ReferenceError: некоректний оператор delete з використанням 'super'. </pre> + +<h3 id="super.prop_не_може_перезаписувати_властивості_недоступні_для_запису"><code>super.prop</code> не може перезаписувати властивості, недоступні для запису</h3> + +<p>Коли властивості створені недоступними для запису, наприклад, за допомогою {{jsxref("Object.defineProperty")}}, <code>super</code> не може перезаписувати значення такої властивості.</p> + +<pre class="brush: js">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Не можна перезаписати значення. + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" доступна лише для читання +console.log(y.prop); // 1 +</pre> + +<h3 id="Використання_super.prop_у_обєктних_літералах">Використання <code>super.prop</code> у об'єктних літералах</h3> + +<p>Super також можна використовувати у нотації <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктної ініціалізації / літералу</a>. У цьому прикладі два об'єкти визначають метод. У другому об'єкті <code>super</code> викликає метод першого об'єкта. Це працює завдяки методу {{jsxref("Object.setPrototypeOf()")}}, який дає можливість встановити прототипом об'єкта <code>obj2</code> об'єкт <code>obj1</code>, таким чином, <code>super</code> може знайти метод <code>method1</code> на об'єкті <code>obj1</code>.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log('метод 1'); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // виводить "метод 1" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/this/index.html b/files/uk/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..8f0d159cda --- /dev/null +++ b/files/uk/web/javascript/reference/operators/this/index.html @@ -0,0 +1,408 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - this + - Оператор + - ключове слово +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Ключове слово функції <code>this</code></strong> поводиться дещо інакше у JavaScript у порівнянні з іншими мовами. Воно також має певні відмінності між <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгим</a> та нестрогим режимами.</p> + +<p>У більшості випадків, значення <code>this</code> визначається тим, як викликається функція (прив'язка під час виконання). Воно не може бути переприсвоєне під час виконання, і може змінюватись кожен раз, коли викликається функція. ES5 запровадив метод {{jsxref("Function.prototype.bind()", "bind()")}} для <a href="#Метод_bind">присвоєння значення this у функції незалежно від того, як вона викликається</a>, а ES2015 запровадив <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкові функції</a>, які не мають власної прив'язки <code>this</code> (вони зберігають значення <code>this</code> оточуючого лексичного контексту).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">this</pre> + +<h3 id="Значення">Значення</h3> + +<p>Властивість контексту виконання (глобального, функції чи eval), яка, у нестрогому режимі завжди посилається на об'єкт, а у строгому режимі може бути будь-яким значенням.</p> + +<h2 id="Глобальний_контекст">Глобальний контекст</h2> + +<p>У глобальному контексті виконання (поза межами будь-яких функцій) <code>this</code> посилається на глобальний об'єкт, як у строгому, так і у нестрогому режимі.</p> + +<pre class="brush:js">// У веб-переглядачах об'єкт window також є глобальним об'єктом: +console.log(this === window); // true + +a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b) // "MDN" +console.log(b) // "MDN" +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Ви завжди легко можете отримати глобальний об'єкт за допомогою глобальної властивості {{jsxref("globalThis")}}, незалежно від поточного контексту, у якому виконується ваш код.</p> +</div> + +<h2 id="Контекст_функції">Контекст функції</h2> + +<p>Всередині функції значення <code>this</code> залежить від того, як викликається функція.</p> + +<h3 id="Простий_виклик">Простий виклик</h3> + +<p>Оскільки наступний код не є кодом у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>, і тому, що значення <code>this</code> не було присвоєне викликом, <code>this</code> за замовчуванням дорівнюватиме глобальному об'єкту, яким у переглядачі є {{domxref("Window", "window")}}. </p> + +<pre class="brush:js">function f1() { + return this; +} + +// У переглядачі: +f1() === window; // true + +// У Node: +f1() === global; // true</pre> + +<p>Однак, у строгому режимі значення <code>this</code> не присвоюється при вході у контекст виконання, воно залишається <code>undefined</code>, як показано у наступному прикладі<strong>:</strong></p> + +<pre class="brush:js">function f2() { + 'use strict'; // дивіться строгий режим + return this; +} + +f2() === undefined; // true +</pre> + +<div class="note">У другому прикладі <code>this</code> має дорівнювати {{jsxref("undefined")}}, тому що функція <code>f2</code> була викликана прямо, а не як метод чи властивість об'єкта (наприклад, <code>window.f2()</code>). Ця функціональність не була реалізована у деяких переглядачах, коли вони вперше почали підтримувати <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode" title="Strict mode">строгий режим</a>. Як результат, вони неправильно повертали об'єкт <code>window</code>.</div> + +<p>Для присвоєння <code>this</code> певного значення під час виклику функції використовуйте {{jsxref("Function.prototype.call()", "call()")}} або {{jsxref("Function.prototype.apply()", "apply()")}}, як у наступних прикладах<strong>.</strong></p> + +<p><strong>Приклад 1</strong></p> + +<pre class="brush:js" dir="rtl">// Об'єкт може бути переданий першим аргументом у call чи apply, і буде прив'язаний до this. +var obj = {a: 'Користувацький'}; + +// Ця властивість створена у глобальному об'єкті +var a = 'Глобальний'; + +function whatsThis() { + return this.a; // Значення this залежить від того, як викликається функція +} + +whatsThis(); // 'Глобальний' +whatsThis.call(obj); // 'Користувацький' +whatsThis.apply(obj); // 'Користувацький' +</pre> + +<p><strong>Приклад 2</strong></p> + +<pre class="brush:js">function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// Перший параметр - це об'єкт для використання в якості +// 'this', наступні параметри передаються як аргументи +// для виклику фукнції +add.call(o, 5, 7); // 16 + +// Перший параметр - це об'єкт для використання в якості +// 'this', другий - це масив, чиї елементи +// використовуються як аргументи для виклику функції +add.apply(o, [10, 20]); // 34 +</pre> + +<p>Зауважте, що у нестрогому режимі у <code>call</code> та <code>apply</code>, якщо значення, передане у якості <code>this</code>, не є об'єктом, буде спроба перетворити його на об'єкт внутрішньою операцією <code>ToObject</code>. Тому, якщо передане значення є простою величиною на кшталт <code>7</code> чи <code>'foo'</code>, вона буде загорнута у Object за допомогою відповідного конструктора, а отже, просте число <code>7</code> буде перетворене на об'єкт, як <code>new Number(7)</code>, а рядок <code>'foo'</code> буде перетворений на об'єкт, як <code>new String('foo')</code>, наприклад:</p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +</pre> + +<h3 id="Метод_bind">Метод <code>bind</code></h3> + +<p>У ECMAScript 5 було запроваждено {{jsxref("Function.prototype.bind()")}}. Виклик <code>f.bind(someObject)</code> створює нову фукнцію з таким самим тілом фукнції та областю видимості, як у <code>f</code>, але, де у початковій функції трапляється <code>this</code>, у новій функції <code>this</code> прив'язано до першого аргументу <code>bind</code>, незалежно від того, як використовується функція.</p> + +<pre class="brush:js">function f() { + return this.a; +} + +var g = f.bind({a: 'привіт'}); +console.log(g()); // привіт + +var h = g.bind({a: 'йо'}); // bind працює лише один раз! +console.log(h()); // привіт + +var o = {a: 37, f: f, g: g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37,37, привіт, привіт +</pre> + +<h3 id="Стрілкові_функції">Стрілкові функції</h3> + +<p>У <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функціях</a> <code>this</code> зберігає значення <code>this</code> оточуючого лексичного контексту. У глобальному коді йому буде присвоєно глобальний об'єкт:</p> + +<pre class="brush: js">var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</pre> + +<div class="note"> +<p><strong>Заувага</strong>: якщо this передається як аргумент до call, bind чи apply під час виклику стрілкової функції, він буде проігнорований. Ви все одно можете подавати аргументи до call, але перший аргумент (thisArg) має бути null.</p> +</div> + +<pre class="brush: js">// Виклик в якості методу об'єкта +var obj = {func: foo}; +console.log(obj.func() === globalObject); // true + +// Спроба встановити this за допомогою call +console.log(foo.call(obj) === globalObject); // true + +// Спроба встановити this за допомогою bind +foo = foo.bind(obj); +console.log(foo() === globalObject); // true</pre> + +<p>Що б не відбувалось, <code>this</code> у <code>foo</code> дорівнює значенню, встановленому під час створення (у наведеному вище прикладі, глобальному об'єкту). Те саме стосується стрілкових функцій, створених всередині інших функцій: їхнє значення <code>this</code> залишиться таким, як у оточуючому лексичному контексті.</p> + +<pre class="brush: js">// Створюємо obj з методом bar, який вертає функцію, що +// повертає своє значення this. Повернена функція створена як +// стрілкова функція, а отже, її this прив'язується до +// this оточуючої функції. Можна присвоювати значення bar +// під час виклику, що в свою чергу присвоїть значення +// поверненої функції. +var obj = { + bar: function() { + var x = (() => this); + return x; + } +}; + +// Викликаємо bar як метод obj, встановлюючи obj значенням його this +// Присвоюємо посилання на повернену функцію у fn +var fn = obj.bar(); + +// Виклик fn без присвоєння this мав би присвоїти +// за замовчуванням глобальний об'єкт або undefined у строгому режимі +console.log(fn() === obj); // true + +// Але будьте обережні, якщо посилаєтесь на метод obj, не викликаючи його +var fn2 = obj.bar; +// Виклик this стрілкової функції зсередини методу bar +// тепер поверне window, бо він бере this з fn2. +console.log(fn2()() == window); // true +</pre> + +<p>У наведеному коді функція (назвемо її анонімною функцією А), присвоєна <code>obj.bar</code>, повертає іншу функцію (назвемо її анонімною функцією Б), яка створюється як стрілкова функція. В результаті <code>this</code> функції Б незмінно дорівнює <code>this</code> з <code>obj.bar</code> (функції A) під час виклику. Коли викликається повернена функція (функція Б), її <code>this</code> завжди дорівнюватиме початково присвоєному значенню. У наведеному прикладі <code>this</code> функції Б присвоюється значення <code>this</code> функції А, яке дорівнює <code>obj</code>, отже, воно залишається рівним <code>obj</code>, навіть коли викликається таким способом, який мав би присвоїти <code>this</code> значення <code>undefined</code> або глобальний об'єкт (чи будь-яким іншим методом, як у попередньому прикладі у глобальному контексті виконання).</p> + +<h3 id="Як_метод_обєкта">Як метод об'єкта</h3> + +<p>Коли функція викликається як метод об'єкта, її <code>this</code> присвоюється об'єкт, на якому викликається метод.</p> + +<p>У наступному прикладі, коли викликається <code>o.f()</code>, всередині функції <code>this</code> прив'язується до об'єкта <code>o</code>.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +</pre> + +<p>Зауважте, що на цю поведінку зовсім не впливає те, як і де була визначена функція. У попередньому прикладі ми визначили функцію <code>f</code> вбудованою, як член об'єкта, під час визначення <code>o</code>. Однак, ми так само легко могли спочатку визначити функцію, а потім додати її до <code>o.f</code>. Це призводить до такої самої поведінки:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // 37 +</pre> + +<p>Це демонструє, що значення має тільки те, що функція була викликана з <code>f</code>, члена об'єкта <code>o</code>.</p> + +<p>Схожим чином, на прив'язку <code>this</code> впливає тільки найближче посилання на об'єкт. У наступному прикладі, коли ми викликаємо функцію, ми викликаємо її як метод <code>g</code> об'єкта <code>o.b</code>. Цього разу під час виконання <code>this</code> всередині функції посилатиметься на <code>o.b</code>. Той факт, що сам об'єкт є членом об'єкта <code>o</code>, не має наслідків; все, що має значення, це найближче посилання.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // 42 +</pre> + +<h4 id="this_у_ланцюжку_прототипів_обєкта"><code>this</code> у ланцюжку прототипів об'єкта</h4> + +<p>Такий самий принцип діє для методів, визначених десь у ланцюжку прототипів об'єкта. Якщо метод присутній у ланцюжку прототипів об'єкта, <code>this</code> посилається на об'єкт, на якому був викликаний метод, так, ніби метод присутній у самому об'єкті.</p> + +<pre class="brush:js">var o = {f: function() { return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>У цьому прикладі об'єкт, присвоєний змінній <code>p</code>, не має своєї властивості <code>f</code>, він успадковує її від свого прототипу. Але не має значення, що пошук <code>f</code> зрештою знаходить властивість з таким ім'ям у <code>o</code>; пошук починався як посилання на <code>p.f</code>, а отже, <code>this</code> всередині функції приймає значення об'єкта, на який посилається <code>p</code>. Тобто, оскільки <code>f</code> викликається як метод <code>p</code>, його <code>this</code> посилається на <code>p</code>. Це цікава особливість прототипного наслідування JavaScript.</p> + +<h4 id="this_з_гетером_або_сетером"><code>this</code> з гетером або сетером</h4> + +<p>Знову ж таки, цей самий принцип діє, коли функція викликається з гетера чи сетера. У функції, що використовується в якості гетера чи сетера, <code>this</code> прив'язується до об'єкта, де властивість отримується чи встановлюється.</p> + +<pre class="brush:js">function sum() { + return this.a + this.b + this.c; +} + +var o = { + a: 1, + b: 2, + c: 3, + get average() { + return (this.a + this.b + this.c) / 3; + } +}; + +Object.defineProperty(o, 'sum', { + get: sum, enumerable: true, configurable: true}); + +console.log(o.average, o.sum); // 2, 6 +</pre> + +<h3 id="Як_конструктор">Як конструктор</h3> + +<p>Коли функція використовується як конструктор (з ключовим словом {{jsxref("Operators/new", "new")}}), її <code>this</code> прив'язується до нового об'єкта, що створюється.</p> + +<div class="note"> +<p>Хоча за замовчуванням конструктор повертає об'єкт, на який посилається <code>this</code>, він може, натомість, повернути якийсь інший об'єкт (якщо значення, що повертається, не є об'єктом, тоді повертається об'єкт <code>this</code>).</p> +</div> + +<pre class="brush:js">/* + * Конструктори працюють так: + * + * function MyConstructor(){ + * // Тут розташований код тіла функції. + * // Створюємо бажані властивості |this| + * // присвоєнням. Наприклад, + * this.fum = "nom"; + * // і так далі... + * + * // Якщо функція має оператор return, який + * // повертає об'єкт, цей об'єкт буде + * // результатом виразу |new|. Інакше, + * // результатом виразу буде поточний об'єкт, + * // прив'язаний до |this| + * // (найбільш розповсюджений варіант). + * } + */ + +function C() { + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + + +function C2() { + this.a = 37; + return {a: 38}; +} + +o = new C2(); +console.log(o.a); // 38 +</pre> + +<p>У останньому прикладі (<code>C2</code>), через те, що під час створення був повернений об'єкт, новий об'єкт, до якого було прив'язано <code>this</code>, просто відкидається. (Це, по суті, робить інструкцію "<code>this.a = 37;</code>" мертвим кодом. Він не абсолютно мертвий, бо він виконується, але його можна видалити без жодних наслідків для зовнішнього коду.)</p> + +<h3 id="Як_обробник_подій_у_DOM">Як обробник подій у DOM</h3> + +<p>Коли функція використовується як обробник подій, її значенням <code>this</code> встановлюється елемент, який запустив подію (деякі переглядачі не дотримуються цієї конвенції для прослуховувачів, доданих динамічно іншими методами, ніж {{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p> + +<pre class="brush:js">// Коли викликається як прослуховувач, робить відповідний елемент синім +function bluify(e) { + // Завжди true + console.log(this === e.currentTarget); + // true, коли currentTarget і target є тим самим об'єктом + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Отримати список усіх елементів у document +var elements = document.getElementsByTagName('*'); + +// Додати bluify як прослуховувач події натискання, щоб, коли +// на елемент натискають, він ставав синім +for (var i = 0; i < elements.length; i++) { + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="У_вбудованому_обробнику_подій">У вбудованому обробнику подій</h3> + +<p>Коли код викликається з вбудованого <a href="/uk/docs/Web/Guide/Events/Event_handlers">обробника подій</a>, значенням його <code>this</code> встановлюється DOM-елемент, де розташований прослуховувач:</p> + +<pre class="brush: html"><button onclick="alert(this.tagName.toLowerCase());"> + Показати this +</button> +</pre> + +<p>Наведене оповіщення показує <code>button</code>. Однак, зауважте, що лише у зовнішньому коді <code>this</code> присвоюється таким чином:</p> + +<pre class="brush: html"><button onclick="alert((function() { return this; })());"> + Показати this внутрішньої функції +</button> +</pre> + +<p>У цьому випадку, <code>this</code> внутрішньої функції не присвоюється, тому функція повертає глобальний об'єкт/window (тобто, об'єкт за замовчуванням у нестрогому режимі, де <code>this</code> не встановлюється викликом).</p> + +<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('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li> + <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Лагідне роз'яснення ключового слова 'this' у JavaScript</a></li> + <li>Отримання глобального контексту: {{jsxref("globalThis")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/typeof/index.html b/files/uk/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..a0e9b217d4 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,278 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - typeof + - Оператор +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <strong><code>typeof</code></strong> повертає рядок, що вказує тип необчисленого операнду.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + + + +<h2 id="Синтакс">Синтакс</h2> + +<p>Оператор <code>typeof</code> супроводжується операндом:</p> + +<pre class="syntaxbox">typeof <em>operand +</em>typeof(<em>operand</em>) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>operand</code></dt> + <dd>Вираз, що представляє об'єкт або {{Glossary("Primitive", "примітив")}}, тип якого потрібно повернути.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Наступна таблиця наводить можливі значення, повернені <code>typeof</code>. Для отримання додаткової інформації про типи та прості значення, дивіться також статтю про <a href="/uk/docs/Web/JavaScript/Data_structures">Структури даних JavaScript</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Тип</th> + <th scope="col">Результат</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{glossary("Undefined")}}</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>{{glossary("Null")}}</td> + <td><code>"object"</code> (дивіться {{anch("null", "нижче")}})</td> + </tr> + <tr> + <td>{{glossary("Boolean")}}</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>{{glossary("Number")}}</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>{{glossary("BigInt")}} (нове у ECMAScript 2020)</td> + <td><code>"bigint"</code></td> + </tr> + <tr> + <td>{{glossary("String")}}</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>{{glossary("Symbol")}} (нове у ECMAScript 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>Об'єкт {{glossary("Function")}} (реалізує [[Call]] in ECMA-262 terms)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Будь-який інший об'єкт</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> ECMAScript 2019 та старші версії дозволяли у реалізаціях <code>typeof</code> повертати будь-яке рядкове значення, визначене реалізацією, для об'єктів, які не можна викликати, а також нестандартних екзотичних об'єктів.</p> + +<p>Єдиним відомим переглядачем, який дійсно скористався цією можливістю, був старий Internet Explorer (дивіться {{anch("Примітки_щодо_IE", "нижче")}}).</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<pre class="brush: js">// Числа +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Незважаючи на те, що є "Not-A-Number" (не-числом) +typeof Number('1') === 'number'; // Number намагається розібрати значення як числа +typeof Number('чобіт') === 'number'; // також значення, які не можуть бути приведені до числових + +typeof 42n === 'bigint'; + + +// Рядки +typeof '' === 'string'; +typeof 'бла' === 'string'; +typeof `шаблонний літерал` === 'string'; +typeof '1' === 'string'; // зауважте, що число у рядку все ж має тип string +typeof (typeof 1) === 'string'; // typeof завжди повертає string +typeof String(1) === 'string'; // String перетворює будь-що у рядок, безпечніше, ніж toString + + +// Булеві значення +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(1) === 'boolean'; // Boolean() перетворює значення на підставі того, чи є вони правдивими, чи хибними +typeof !!(1) === 'boolean'; // два виклики оператора ! (логічне НЕ) еквівалентні Boolean() + + +// Символи +typeof Symbol() === 'symbol' +typeof Symbol('ква') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Undefined +typeof undefined === 'undefined'; // змінна, що має значення undefined +typeof declaredButUndefinedVariable === 'undefined'; // оголошена змінна без значення +typeof undeclaredVariable === 'undefined'; // неоголошена змінна + + +// Об'єкти +typeof {a: 1} === 'object'; + +// Використовуйте Array.isArray або Object.prototype.toString.call, +// щоб відрізнити звичайні об'єкти від масивів +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; +typeof /regex/ === 'object'; // Дивіться історичні результати у розділі Регулярні вирази + + +// Наведені вирази є заплутаними, небезпечнимм та марнотратними. Уникайте їх. +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String('abc') === 'object'; + +// Функції +typeof function() {} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function';</pre> + +<h2 id="Додаткова_інформація">Додаткова інформація</h2> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// Так було від початку існування JavaScript +typeof null === 'object'; +</pre> + +<p>У першій реалізації JavaScript, значення JavaScript були представлені у вигляді мітки типу та значення. Міткою типу для об'єкта був 0. <code>null</code> був представлений нульовим вказівником (0x00 у більшості платформ). Відповідно, null мав міткою типу 0, звідси повернене значення "object" у <code>typeof</code>. (<a href="http://www.2ality.com/2013/10/typeof-null.html">посилання</a>)</p> + +<p>Було запропоноване виправлення для ECMAScript (як експериментальна функціональність), але воно було <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">відхилене</a>. Воно змінило б результат на <code>typeof null === 'null'</code>.</p> + +<h3 id="Використання_оператора_new">Використання оператора <code>new</code></h3> + +<pre class="brush:js">// Усі функції-конструктори, за винятком конструктора Function, завжди матимуть тип 'object' +var str = new String('String'); +var num = new Number(100); + +typeof str; // Це поверне 'object' +typeof num; // Це поверне 'object' + +var func = new Function(); + +typeof func; // Це поверне 'function' +</pre> + +<h3 id="Необхідність_круглих_дужок_для_синтаксису">Необхідність круглих дужок для синтаксису</h3> + +<pre class="brush:js">// Круглі дужки можуть використовуватись для визначення типу виразу. +var iData = 99; + +typeof iData + ' Wisen'; // 'number Wisen' +typeof (iData + ' Wisen'); // 'string' +</pre> + +<h3 id="Регулярні_вирази">Регулярні вирази</h3> + +<p>Регулярні вирази, доступні для виклику, були нестандартним доповненням у деяких переглядачах.</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 не відповідає ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ відповідає ECMAScript 5.1 +</pre> + +<h3 id="Помилки">Помилки</h3> + +<p>До ECMAScript 2015 <code>typeof</code> гарантовано повертав рядок для будь-якого наданого операнда. Навіть для неоголошених ідентифікаторів <code>typeof</code> повертав <code>'undefined'</code>. Використання <code>typeof</code> ніяк не могло згенерувати помилку.</p> + +<p>Але з додаванням блочних областей видимості у {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const","const")}}, використання <code>typeof</code> на змінних, створених через <code>let</code> та <code>const</code> (або використання <code>typeof</code> на класі), у блоці до того, як вони були оголошені, викине помилку {{jsxref("ReferenceError")}}. Змінні блочної області видимості знаходяться у "<a href="/uk/docs/Web/JavaScript/Reference/Statements/let#Тимчасова_мертва_зона">тимчасовій мертвій зоні</a>" від початку блоку до завершення ініціалізації, спроба звернення до них в цей час викине помилку.</p> + +<pre class="brush: js">typeof undeclaredVariable === 'undefined'; + +typeof newLetVariable; // ReferenceError +typeof newConstVariable; // ReferenceError +typeof newClass; // ReferenceError + +let newLetVariable; +const newConstVariable = 'привіт'; +class newClass{};</pre> + +<h3 id="Винятки">Винятки</h3> + +<p>Усі нинішні переглядачі відкривають нестандартний хост-об'єкт {{domxref("document.all")}} з типом <code>undefined</code>.</p> + +<pre class="brush:js">typeof document.all === 'undefined'; +</pre> + +<p>Хоча специфікація дозволяє користувацькі мітки типів для нестандартних екзотичних об'єктів, вона вимагає, щоб ці мітки відрізнялись від попередньо визначених. Випадок використання у <code>document.all</code> типу <code>'undefined'</code> класифікується у веб-стандартах як "умисне порушення" оригінального стандарту ECMA JavaScript.</p> + +<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('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="Примітки_щодо_IE">Примітки щодо IE</h2> + +<p>У IE 6, 7 та 8 багато хост-об'єктів є об'єктами, а не функціями. Для прикладу:</p> + +<pre class="brush: js">typeof alert === 'object'</pre> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Чому typeof більше не є "безпечним"</a></li> + <li><a href="https://github.com/tc39/ecma262/issues/668">Умисне порушення стандарту у document.all</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/unary_negation/index.html b/files/uk/web/javascript/reference/operators/unary_negation/index.html new file mode 100644 index 0000000000..bcaa14e30a --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unary_negation/index.html @@ -0,0 +1,77 @@ +--- +title: Унарний мінус (-) +slug: Web/JavaScript/Reference/Operators/Unary_negation +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unary_negation +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Унарний мінус (<code>-</code>) ставиться перед своїм операндом та міняє його знак на протилежний.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> -<var>x</var> +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Унарний_мінус_перед_числами">Унарний мінус перед числами</h3> + +<pre class="brush: js notranslate">const x = 3; +const y = -x; + +// y = -3 +// x = 3 +</pre> + +<h3 id="Унарний_мінус_перед_нечисловими_значеннями">Унарний мінус перед нечисловими значеннями</h3> + +<p>Унарний мінус може перетворити нечислове значення на число.</p> + +<pre class="brush: js notranslate">const x = "4"; +const y = -x; + +// y = -4 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-unary-minus-operator', 'Unary negation operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.unary_negation")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_plus">Унарний плюс</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/unary_plus/index.html b/files/uk/web/javascript/reference/operators/unary_plus/index.html new file mode 100644 index 0000000000..da66dbc464 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unary_plus/index.html @@ -0,0 +1,78 @@ +--- +title: Унарний плюс (+) +slug: Web/JavaScript/Reference/Operators/Unary_plus +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unary_plus +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Унарний плюс (<code>+</code>) ставиться перед своїм операндом та повертає значення операнду, але намагається перетворити його на число, якщо він не є числом.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> +<var>x</var> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Хоча унарний мінус (<code>-</code>) також вміє перетворювати нечислові значення, унарний плюс найшвидший та найкращий спосіб перетворити щось у число, тому що він не виконує ніяких інших операцій з числом. Він може перетворювати рядкові представлення цілих чисел та чисел з рухомою комою, а також нерядкові значення <code>true</code>, <code>false</code> та <code>null</code>. Підтримуються цілі числа у десятковому та шістнадцятковому (з префіксом <code>0x</code>) форматах. Підтримуються від'ємні числа (хоча не у шістнадцятковому форматі). Якщо оператор не може розібрати певне значення, він поверне {{jsxref("NaN")}}.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_з_числами">Використання з числами</h3> + +<pre class="brush: js notranslate">const x = 1; +const y = -1; + +console.log(+x); +// 1 +console.log(+y); +// -1</pre> + +<h3 id="Використання_з_нечисловими_значеннями">Використання з нечисловими значеннями</h3> + +<pre class="brush: js notranslate">+true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-unary-plus-operator', 'Unary plus operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.unary_plus")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Addition">Оператор додавання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Subtraction">Оператор віднімання</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Division">Оператор ділення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Multiplication">Оператор множення</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Remainder">Оператор остачі</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Exponentiation">Оператор піднесення до степеня</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Increment">Оператор інкременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Decrement">Оператор декременту</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unary_negation">Унарний мінус</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html new file mode 100644 index 0000000000..1815bba018 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html @@ -0,0 +1,74 @@ +--- +title: Беззнаковий правий зсув (>>>) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift +tags: + - JavaScript + - Бітовий оператор + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор беззнакового правого зсуву (<code>>>></code>)</strong> (правий зсув із заповненням нулями) виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення <code>0</code>, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> >>> <var>b</var></code> +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями. Знаковий біт отримує значення <code>0</code>, а отже, результат завжди невід'ємний. На відміну від інших бітових операторів, правий зсув із заповненням нулями повертає беззнакове ціле 32-бітне число.</p> + +<p>Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат. Наприклад, <code>9 >>> 2</code> дорівнює 2, так само, як <code>9 >> 2</code>:</p> + +<pre class="brush: js notranslate">. 9 (основа 10): 00000000000000000000000000001001 (основа 2) + -------------------------------- +9 >>> 2 (основа 10): 00000000000000000000000000000010 (основа 2) = 2 (основа 10) +</pre> + +<p>Однак, це не одне й те саме для від'ємних чисел. Наприклад, <code>-9 >>> 2</code> поверне 1073741821, що відрізняється від <code>-9 >> 2</code> (що дорівнює <code>-3</code>):</p> + +<pre class="brush: js notranslate">. -9 (основа 10): 11111111111111111111111111110111 (основа 2) + -------------------------------- +-9 >>> 2 (основа 10): 00111111111111111111111111111101 (основа 2) = 1073741821 (основа 10) +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_беззнакового_правого_зсуву">Використання беззнакового правого зсуву</h3> + +<pre class="brush: js notranslate"> 9 >>> 2; // 2 +-9 >>> 2; // 1073741821 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.unsigned_right_shift")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%91%D1%96%D1%82%D0%BE%D0%B2%D1%96_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8">Бітові оператори у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">Оператор присвоєння з беззнаковим правим зсувом</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html new file mode 100644 index 0000000000..4ffe4bef3d --- /dev/null +++ b/files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html @@ -0,0 +1,60 @@ +--- +title: Присвоєння з беззнаковим правим зсувом (>>>=) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +tags: + - JavaScript + - Довідка + - Оператор + - Оператор присвоєння +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор присвоєння з беззнаковим правим зсувом (<em><code>>>>=</code></em>) виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x >>>= y +<strong>Значення:</strong> x = x >>> y</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_присвоєння_з_беззнаковим_правим_зсувом">Використання присвоєння з беззнаковим правим зсувом</h3> + +<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.unsigned_right_shift_assignment")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/%D0%92%D0%B8%D1%80%D0%B0%D0%B7%D0%B8_%D1%82%D0%B0_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8#%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння у посібнику JS</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">Оператор беззнакового правого зсуву</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/void/index.html b/files/uk/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..d280657ad3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/void/index.html @@ -0,0 +1,123 @@ +--- +title: Оператор void +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор</strong> <strong><code>void</code></strong> обчислює наданий <code><em>вираз</em></code> та повертає {{jsxref("undefined")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>вираз</em></pre> + +<h2 id="Опис">Опис</h2> + +<p>Цей оператор дозволяє обчислення виразів, які повертають значення, у місцях, де очікується вираз, що обчислюється як {{jsxref("undefined")}}.</p> + +<p>Оператор <code>void</code> часто використовують лише для того, щоб отримати просту величину <code>undefined</code>, зазвичай, використанням "<code>void(0)</code>" (що є еквівалентним "<code>void 0</code>"). У таких випадках можна замість цього скористатись глобальною змінною {{jsxref("undefined")}} (за умови, що їй не було присвоєне нове значення).</p> + +<p>Зауважте, що необхідно враховувати <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">пріоритет</a> оператора <code>void</code>, і що круглі дужки можуть допомогти прояснити обчислення виразу, розташованого після оператора <code>void</code>:</p> + +<pre class="brush: js">void 2 == '2'; // (void 2) == '2', вертає false +void (2 == '2'); // void (2 == '2'), вертає undefined +</pre> + +<h2 id="Негайно_виконувані_функціональні_вирази">Негайно виконувані функціональні вирази</h2> + +<p>При використанні {{Glossary("IIFE", "негайно виконуваного фукнціонального виразу")}} <code>void</code> може використовуватись, щоб змусити ключове слово <code>function</code> сприйматись як вираз, а не як оголошення.</p> + +<pre class="brush: js">void function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +}(); +</pre> + +<h2 id="URI_у_JavaScript">URI у JavaScript</h2> + +<p>Коли переглядач переходить по <code>javascript:</code> URI, він обчислює код у URI, після чого замінює вміст сторінки поверненим значенням, якщо тільки повернене значення не є {{jsxref("undefined")}}. Оператор <code>void</code> можна використати, щоб повернути <code>undefined</code>. Наприклад:</p> + +<pre class="brush: html"><a href="javascript:void(0);"> + Натисніть сюди, щоб не робити нічого +</a> + +<a href="javascript:void(document.body.style.backgroundColor='green');"> + Натисніть сюди, щоб зробити фон зеленим +</a> +</pre> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: використання псевдопротоколу <code>javascript:</code> не заохочується на користь інших альтернатив, таких як ненав'язливі обробники подій.</p> +</div> + +<h2 id="Стрілкові_функції_без_витоків">Стрілкові функції без витоків</h2> + +<p>Стрілкові функції запроваджують скорочений бездужковий синтаксис, який повертає вираз. Це може спричинити ненавмисні побічні ефекти, повертаючи результат функціонального виклику, який раніше не повертав нічого. Щоб убезпечитись у випадках, коли результат функції не передбачається використовувати, його можна передати у оператор void, щоб гарантувати, що (наприклад) зміна API не спричинить зміну поведінки стрілкових функцій.</p> + +<pre class="brush: js">button.onclick = () => void doSomething();</pre> + +<p>Це гарантує, що повернене значення <code>doSomething</code>, змінюючись з <code>undefined</code> на <code>true</code>, не змінить поведінку цього коду.</p> + +<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('ESDraft', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.1</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.void")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/yield/index.html b/files/uk/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..0609f221d3 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,121 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - JavaScript + - Ітератор + - Оператор + - генератори +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключове слово <code>yield</code> використовується для призупинення та відновлення виконання функції-генератора ({{jsxref("Statements/function*", "function*")}} або <a href="/uk/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">застарілої функції-генератора</a>).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Визначає значення, яке буде повернене функцією-генератором згідно <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протоколу ітератора</a>. Якщо пропущене, повертається <code>undefined</code>.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Отримує необов'язкове значення, передане у метод генератора <code>next()</code> для відновлення виконання.</p> + </dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Ключове слово <code>yield</code> призупиняє виконання функції-генератора, а значення виразу, що стоїть після <code>yield</code>, повертається у інструкцію, що викликала генератор. Його можна уявити як генераторну версію ключового слова <code>return</code>.</p> + +<p>Оператор <code>yield</code> може викликатись тільки безпосередньо з функції-генератора, яка його містить. Його не можна викликати з вкладених функцій або зворотних викликів.</p> + +<p>Ключове слово <code>yield</code> здійснює виклик метода генератора <code>next()</code>, повертаючи об'єкт <code>IteratorResult</code> з двома властивостями, <code>value</code> та <code>done</code>. Властивість <code>value</code> є результатом обчислення виразу <code>yield</code>, а <code>done</code> дорівнює <code>false</code>, вказуючи, що функція-генератор ще не завершена.</p> + +<p>Зупинившись на виразі <code>yield</code>, виконання коду генератора залишається на паузі до виклику методу генератора <code>next()</code>. Кожний раз, коли викликається метод генератора <code>next()</code>, генератор відновлює виконання та виконується, поки не досягає чогось з наступного:</p> + +<ul> + <li>Ключове слово <code>yield</code>, яке змушує генератор знову призупинитись та повертає нове значення генератора. Наступний раз, коли викликатиметься <code>next()</code>, виконання продовжиться з інструкції, що стоїть одразу після <code>yield</code>.</li> + <li>Оператор {{jsxref("Statements/throw", "throw")}} використовується для викидання винятків у генераторі. Він повністю зупиняє виконання генератора, а виконання коду продовжується у місці виклику, як це стандартно відбувається, коли викидається виняток.</li> + <li>Досягнуто кінця функції-генератора; у цьому випадку виконання генератора завершується, а <code>IteratorResult</code> повертається з <code>value</code>, що дорівнює {{jsxref("undefined")}}, та <code>done</code>, що дорівнює <code>true</code>.</li> + <li>Досягнуто оператора {{jsxref("Statements/return", "return")}}. У цьому випадку виконання генератора завершується, а <code>IteratorResult</code> повертається з <code>value</code>, що дорівнює значенню, вказаному у <code>return</code>, та <code>done</code>, що дорівнює <code>true</code>.</li> +</ul> + +<p>Якщо у метод генератора <code>next()</code> було передано необов'язкове значення, воно стає значенням, що повертається поточною операцією генератора <code>yield</code>.</p> + +<p>Маючи фрагменти коду, що виконуються генератором, оператори <code>yield</code> та здатність вказувати нове початкове значення, передаючи його у {{jsxref("Generator.prototype.next()")}}, генератори надають неймовірну потужність та контроль.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступний код є оголошенням прикладу функції-генератора.</p> + +<pre class="brush: js">function* countAppleSales () { + var saleList = [3, 7, 5]; + for (var i = 0; i < saleList.length; i++) { + yield saleList[i]; + } +}</pre> + +<p>Як тільки функція-генератор визначена, її можна використовувати, створивши ітератор, як показано нижче.</p> + +<pre class="brush: js">var appleStore = countAppleSales(); // Generator { } +console.log(appleStore.next()); // { value: 3, done: false } +console.log(appleStore.next()); // { value: 7, done: false } +console.log(appleStore.next()); // { value: 5, done: false } +console.log(appleStore.next()); // { value: undefined, done: true }</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<ul> + <li>Починаючи з Gecko 29 {{geckoRelease(29)}}, завершена функція-генератор більше не викидає помилку {{jsxref("TypeError")}} "generator has already finished". Замість цього вона повертає об'єкт <code>IteratorResult</code> у вигляді <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>Починаючи з Gecko 33 {{geckoRelease(33)}} розбір виразу <code>yield</code> було оновлено для відповідності специфікації ES2015 ({{bug(981599)}}): + <ul> + <li>Вираз після ключового слова <code>yield</code> є необов'язковим, і його пропуск більше не викидає помилку {{jsxref("SyntaxError")}}: <code>function* countAppleSales() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/yield_star_/index.html b/files/uk/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..cb6bf7f77e --- /dev/null +++ b/files/uk/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,162 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - JavaScript + - Ітератор + - Оператор + - генератори +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Вираз</strong> <strong><code>yield*</code></strong> використовується для делегування до іншого {{jsxref("Statements/function*", "генератора")}} чи ітерабельного об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Вираз, який повертає ітерабельний об'єкт.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Вираз <code>yield*</code> перебирає свій операнд та видає кожне значення, що він повертає.</p> + +<p>Значенням самого виразу <code>yield*</code> є значення, повернене ітератором, коли він закривається (тобто, коли <code>done</code> дорівнює <code>true</code>).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Делегування_до_іншого_генератора">Делегування до іншого генератора</h3> + +<p>У наступному коді значення, отримані від <code>g1()</code>, повертаються викликами <code>next()</code> так само, як значення, отримані від <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: 4, done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Інші_ітерабельні_обєкти">Інші ітерабельні об'єкти</h3> + +<p>Окрім об'єктів-генераторів, <code>yield*</code> також може отримувати значення з інших ітерабельних об'єктів, наприкад, з масивів, рядків чи об'єктів arguments.</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* '34'; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: "3", done: false} +console.log(iterator.next()); // {value: "4", done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: 6, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Значення_самого_виразу_yield*">Значення самого виразу <code>yield*</code></h3> + +<p><code>yield*</code> є виразом, а не оператором, а отже, має обчислене значення.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return 'foo'; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: undefined, done: true}, + // g4() повернув {value: 'foo', done: true} в цій точці + +console.log(result); // "foo" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.yield_star")}}</p> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<ul> + <li>Починаючи з Gecko 33 {{geckoRelease(33)}}, розбір виразів yield було оновлено для відповідності специфікації ES2015 ({{bug(981599)}}): + <ul> + <li>Було реалізовано обмеження на переривання рядка. Переривання рядка між "yield" та "*" є недозволеним. Наступний код викине помилку {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/деструктуризація/index.html b/files/uk/web/javascript/reference/operators/деструктуризація/index.html new file mode 100644 index 0000000000..4967086ede --- /dev/null +++ b/files/uk/web/javascript/reference/operators/деструктуризація/index.html @@ -0,0 +1,453 @@ +--- +title: Деструктуризація +slug: Web/JavaScript/Reference/Operators/Деструктуризація +tags: + - Destructuring + - ECMAScript 2015 + - JavaScript + - Operator + - Деструктуризація + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Деструктуризація</strong> (деструктуризаційне присвоєння) - JavaScript вираз, який дозволяє витягувати дані з масивів та об’єктів в окремі змінні.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:js">var a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({a, b} = {a: 10, b: 20}); +console.log(a); // 10 +console.log(b); // 20 + +// Експерементальний синтаксис (ще не стандартизований) +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Вирази присвоєння літералів об’єктів та масивів надають простий спосіб створювати <em>ad hoc (ад-гок)</em> структури даних.</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre> + +<p>Деструктуризаційне присвоєння використовує подібний синтаксис, де ліва сторона виразу визначає елементи, що потрібно витягнути зі змінної-джерела (правої сторони).</p> + +<pre class="brush: js">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Це подібне до способів, що доступні у мовах програмування на кшталт Perl та Python.</p> + +<h2 id="Деструктуризація_масивів">Деструктуризація масивів</h2> + +<h3 id="Звичайне_присвоєння">Звичайне присвоєння</h3> + +<pre class="brush: js">var foo = ['one', 'two', 'three']; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Присвоєння_окреме_від_оголошення">Присвоєння, окреме від оголошення</h3> + +<p>Значення може бути присвоєне змінній окремо від оголошення цієї змінної.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Значення_за_промовчанням">Значення за промовчанням</h3> + +<p>Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення є <code>undefined</code>.</p> + +<pre class="brush: js">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Обмін_змінних">Обмін змінних</h3> + +<p>Дві змінні можуть обмінятися значеннями за допомогою одного деструктуризаційного виразу. </p> + +<p>Без деструктуризації, обмін двох значеннь потребує тимчасової змінної (або в деяких низькорівневих мовах <a href="https://uk.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%BE%D0%B1%D0%BC%D1%96%D0%BD%D1%83_XOR">XOR-обміну</a>).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="Розбір_масиву_поверненого_з_функції">Розбір масиву, поверненого з функції</h3> + +<p>Завжди було можливо повернути масив із функції. Деструктуризація може зробити обробку повернутого масиву більш виразною.</p> + +<p>У цьому прикладі <code>f()</code> повертає значення <code>[1, 2]</code>, які можуть бути розібрані одним рядком коду за допомогою деструктуризації.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Пропуск_деяких_значень">Пропуск деяких значень</h3> + +<p>Можна пропустити повернуті значення, які тобі не цікаві:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>Також можна пропустити всі значення (але навіщо?):</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="Присвоєння_решти_масиву_змінній">Присвоєння решти масиву змінній</h3> + +<p>Деструктуризуючи масив, можна присвоїти змінній решту його елементів за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D1%80%D0%BE%D0%B7%D0%BF%D0%B0%D0%BA%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F">оператора розпакування</a>:</p> + +<pre class="brush: js">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Зауваж, що буде видана помилка {{jsxref("SyntaxError")}}, якщо поставити прикінцеву кому в лівій частині виразу за елементом решти:</p> + +<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: елемент решти не може мати прикінцевої коми</pre> + +<h3 id="Витягнення_значеннь_з_масиву_збігів_регулярного_виразу">Витягнення значеннь з масиву збігів регулярного виразу</h3> + +<p>Коли метод регулярного виразу <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> знаходить збіг, він повертає масив, що містить першим елементом повністю відповідну частину рядку, а далі частини рядку, що збіглися з кожною взятою в дужки групою в регулярному виразі. Деструктуризаційне присвоєння дозволяє з легкістю витягувати частини цього масиву, пропускаючи повний збіг, якщо він не потрібний.</p> + +<pre class="brush:js">var url = 'https://developer.mozilla.org/en-US/Web/JavaScript'; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // "https" +</pre> + +<h2 id="Деструктуризація_об’єктів">Деструктуризація об’єктів</h2> + +<h3 id="Звичайне_присвоєння_2">Звичайне присвоєння</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Присвоєння_окреме_від_оголошення_2">Присвоєння, окреме від оголошення</h3> + +<p>Значення може бути присвоєне змінній окремо від оголошення цієї змінної.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a: 1, b: 2});</pre> + +<div class="note"> +<p>Дужки <code>( .. )</code> навколо виразу присвоєння необхідні при деструктуризаційному присвоєні об’єкта без оголошення.</p> + +<p>Вираз <code>{a, b} = {a: 1, b: 2}</code> сам по собі є синтаксично неправильним, оскільки <code>{a, b}</code> в лівій його частині розглядається як блок коду, а не як об’єкт.</p> + +<p>Проте, <code>({a, b} = {a: 1, b: 2})</code> є правильним, як і <code>var {a, b} = {a: 1, b: 2}</code></p> +</div> + +<h3 id="Присвоєння_новим_змінним">Присвоєння новим змінним</h3> + +<p>Значення може бути отримане з об’єкту та присвоєне змінній з іменем, інакшим від назви властивості об’єкта.</p> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="Значення_за_промовчанням_2">Значення за промовчанням</h3> + +<p>Змінній може бути присвоєне значення за промовчанням у випадку, коли витягнуте значення з об’єкту є <code>undefined</code>.</p> + +<pre class="brush: js">var {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Встановлення_значення_за_промовчанням_аргументам_функції">Встановлення значення за промовчанням аргументам функції</h3> + +<h4 id="ES5_версія">ES5 версія</h4> + +<pre class="brush: js">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? {x: 0, y: 0} : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // тепер, врешті, малюй діаграму +} + +drawES5Chart({ + cords: {x: 18, y: 30}, + radius: 30 +});</pre> + +<h4 id="ES2015_версія">ES2015 версія</h4> + +<pre class="brush: js">function drawES2015Chart({size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) { + console.log(size, cords, radius); + // малюй діаграму +} + +drawES2015Chart({ + cords: {x: 18, y: 30}, + radius: 30 +});</pre> + +<h3 id="Вкладена_деструктуризація_об’єктів_та_масивів">Вкладена деструктуризація об’єктів та масивів</h3> + +<pre class="brush:js">var metadata = { + title: 'Scratchpad', + translations: [ + { + locale: 'de', + localization_tags: [], + last_edit: '2014-04-14T08:43:37', + url: '/de/docs/Tools/Scratchpad', + title: 'JavaScript-Umgebung' + } + ], + url: '/en-US/docs/Tools/Scratchpad' +}; + +var {title: englishTitle, translations: [{title: localeTitle}]} = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="For_of_цикл_та_деструктуризація">For of цикл та деструктуризація</h3> + +<pre class="brush: js">var people = [ + { + name: 'Mike Smith', + family: { + mother: 'Jane Smith', + father: 'Harry Smith', + sister: 'Samantha Smith' + }, + age: 35 + }, + { + name: 'Tom Jones', + family: { + mother: 'Norah Jones', + father: 'Richard Jones', + brother: 'Howard Jones' + }, + age: 25 + } +]; + +for (var {name: n, family: {father: f}} of people) { + console.log('Name: ' + n + ', Father: ' + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Витягнення_полів_з_об’єктів_що_передані_аргументами_в_функцію">Витягнення полів з об’єктів, що передані аргументами в функцію</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}) { + console.log(displayName + ' is ' + name); +} + +var user = { + id: 42, + displayName: 'jdoe', + fullName: { + firstName: 'John', + lastName: 'Doe' + } +}; + +console.log('userId: ' + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>Це витягує <code>id</code>, <code>displayName</code> та <code>firstName</code> з об’єкта <font face="Consolas, Liberation Mono, Courier, monospace">user</font> та виводить їх.</p> + +<h3 id="Розраховувані_імена_властивостей_об’єкта_та_деструктуризація">Розраховувані імена властивостей об’єкта та деструктуризація</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів#Розраховувані_імена_властивостей">Розраховувані імена властивостей</a> об’єкта можуть також бути використані разом із деструктуризацією</p> + +<pre class="brush: js">let key = 'z'; +let {[key]: foo} = {z: 'bar'}; + +console.log(foo); // "bar" +</pre> + +<h2 id="Специфікації">Специфікації</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('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами </h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Потребує ввімкнення "Enable experimental Javascript features" в налаштуваннях `about:flags`</p> + +<h2 id="Примітки_для_Firefox">Примітки для Firefox</h2> + +<ul> + <li>Firefox надавав нестандартне розширення мови в <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> для деструктуризації. Це розширення було видалене в Gecko 40 {{geckoRelease(40)}}. Дивись {{bug(1083498)}}.</li> + <li>Починаючи від Gecko 41 {{geckoRelease(41)}} та згідно зі спецефікацією ES2015, деструктуризаціїні вирази в дужках, на кшталт <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 }</code>, зараз вважаються неправильними та будуть видавати помилку {{jsxref("SyntaxError")}}. Дивись <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> та {{bug(1146136)}} щоб довідатись більше.</li> +</ul> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B8_%D0%BF%D1%80%D0%B8%D1%81%D0%B2%D0%BE%D1%94%D0%BD%D0%BD%D1%8F">Оператори присвоєння</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html b/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html new file mode 100644 index 0000000000..c1dc7dfbf8 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/оператор_розпакування/index.html @@ -0,0 +1,282 @@ +--- +title: Оператор розпакування +slug: Web/JavaScript/Reference/Operators/Оператор_розпакування +tags: + - Iterator + - JavaScript + - Operator + - Ітератор + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор розпакування</strong> дозволяє розкласти колекцію в місця, де потрібні нуль чи декілька аргументів (як от виклики функцій), або декілька елементів (масиви), чи декілька змінних (деструктуризаційне присвоєння). Також можна розкласти об’єкт у місця де потрібні нуль чи більше пар ключ-значення (для оголошення об’єктів).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Для виклику функцій:</p> + +<pre class="brush: js">myFunction(...iterableObj); +</pre> + +<p>Для масивів:</p> + +<pre class="brush: js">[...iterableObj, 4, 5, 6];</pre> + +<p>Для об’єктів (нове в ECMAScript; чернетка в 3-ій стадії):</p> + +<pre class="brush: js">let objClone = { ...obj };</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Розпакування_у_викликах_функції">Розпакування у викликах функції</h3> + +<h4 id="Заміна_apply">Заміна apply</h4> + +<p><strong>Приклад:</strong> {{jsxref( "Function.prototype.apply")}} прийнято використовувати у випадках, коли потрібно застосувати елементи масиву як аргументи функції.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>З розпакуванням тепер отак:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Оператор розпакування може бути застосований до будь-якого аргументу та може бути застосований кілька разів.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_для_new">Apply для new</h4> + +<p>Викликаючи конструктор з <code>new, </code>неможливо напряму використовувати на ньому <code>apply</code> (<code>apply</code> робить <code>[[Call]],</code> а не <code>[[Construct]]</code>). Проте з оператором розпакування можна легко розкладати масив у аргументи конструктора:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Січ 1970 +// var d = new Date.apply(dateFields) не спрацює. Викине TypeError +var d = new Date(...dateFields); // вуаля</pre> + +<h3 id="Розпакування_в_масивах">Розпакування в масивах</h3> + +<h4 id="Ліпше_оголошення_масивів">Ліпше оголошення масивів</h4> + +<p>Без розпакування, коли потрібно створити новий масив так, щоб якийсь існуючий був його частиною, старого синтаксису оголошення масиву не достатньо та необхідно використовувати комбінацію методів <code>push</code>, <code>splice</code>, <code>concat</code>, тощо. З оператором розпакування це стає значно лаконічніше:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"]</pre> + +<p>Як і з розпакуванням списку аргументів, <code>...</code> можна використовувати будь-де в оголошенні масиву та будь-яку кількість разів.</p> + +<h4 id="Копіювання_масиву">Копіювання масиву</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // так само як arr.slice() +arr2.push(4); + +// arr2 стає [1, 2, 3, 4] +// arr залишається незміненим</pre> + +<p><strong>Зауваження:</strong> оператор розпакування при копіюванні масиву йде лише на <strong>один</strong> рівень вглиб. Таким чином він не придатний для копіювання багатовимірних масивів, що видно з наступного прикладу (те саме з {{jsxref("Object.assign()")}} та розпакуванням об’єктів).</p> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Тепер масив a також змінено: [[], [2], [3]]</pre> + +<h4 id="Ліпше_злиття_масивів">Ліпше злиття масивів</h4> + +<p>{{jsxref("Array.concat")}} часто використовується, щоб додати один масив у кінець іншого. Без розпакування це робиться так:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Доддати всі елементи з arr2 в arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>З розпакуванням це стає:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2];</pre> + +<p>{{jsxref("Array.unshift")}} часто використовується для того, щоб вставити значення з одного масиву в початок іншого. Без розпакування це робиться так:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Вставити всі елементи з arr2 в початок arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 тепер [3, 4, 5, 0, 1, 2]</pre> + +<p>З розпакуванням це стає:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 тепер [3, 4, 5, 0, 1, 2]</pre> + +<h4 id="Розпакування_об’єктів">Розпакування об’єктів</h4> + +<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 3) додає розпакування до <a href="/uk/docs/Web/JavaScript/Reference/Operators/%D0%86%D0%BD%D1%96%D1%86%D1%96%D0%B0%D0%BB%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F_%D0%BE%D0%B1%E2%80%99%D1%94%D0%BA%D1%82%D1%96%D0%B2">об’єктів</a>. It copies own enumerable properties from a provided object onto a new object.</p> + +<p>Однорівневе клонування (без прототипу) чи злиття об’єктів тепер можливе використовуючи коротший запис ніж {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Зауваж, що {{jsxref("Object.assign()")}} викликає <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розпакування - ні.</p> + +<h4 id="Лише_для_ітерованих">Лише для ітерованих</h4> + +<p>Розпакування може бути застосоване лише для <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">ітерованик</a> об’єктів:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable</pre> + +<p><strong>Зауваження:</strong> наразі (липень 2017) можна говорити про появу розпакування об’єктів у специфікації (дивись попередній підзаголовок). Але ще не до кінця зрозуміло як працюватиме вищенаведений приклад, адже ще немає конкретного рішення щодо цього у спецефікації. Тобто тепер ти можеш розпакувати об’єкт в об’єкт, але не зрозуміло, що станеться, якщо об’єкт розпаковувати у масив і навпаки, масив у об’єкт. Наприклад транспілятор <a href="https://babeljs.io/">babel</a> вертає наступні результати:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // запише в array пустий масив [] + +var arr = [1,1,1]; +var obj1 = {...arr}; // запише в obj1 {'0': 1, '1': 1, '2': 1}</pre> + +<h4 id="Розпакування_великих_колекцій">Розпакування великих колекцій</h4> + +<p>Використовуючи розпакування зважай на можливість досягнення ліміту аргументів, встановленого у JavaScript рушії, адже оператор розпакування витягує <strong>всі</strong> елементи колекції в стек, скільки б їх не було. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> щоб дізнатись більше.</p> + +<h2 id="Оператор_решти">Оператор решти</h2> + +<p>Оператор решти виглядає точно так само як і оператор розпакування. До певної міри, він протилежний оператору розпакування - оператор розпакування розкладає колекцію на елементи, а оператор решти, натомість, складає кілька елементів у колекцію. Дивись <a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">решта параметрів</a>.</p> + +<h2 id="Специфікація">Специфікація</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Стан</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Визначено в деяких секціях специфікацій: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Без змін.</td> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td> + <td>Чернетка</td> + <td>Чернетка в 3 стадії</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Spread operation in array literals</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("16") }}</td> + <td>{{CompatIE("Edge/10240")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Spread operation in function calls</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatIE("Edge/10240")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Spread operation in destructuring</td> + <td>{{CompatChrome("49")}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Spread operation in array literals</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Spread operation in function calls</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Spread operation in destructuring</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/%D1%80%D0%B5%D1%88%D1%82%D0%B0_%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%96%D0%B2">Решта параметрів</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html b/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html new file mode 100644 index 0000000000..ea253b2291 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/оператори_порівняння/index.html @@ -0,0 +1,244 @@ +--- +title: Оператори порівняння +slug: Web/JavaScript/Reference/Operators/Оператори_порівняння +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript має як строге порівняння, так і порівняння з перетворенням типів. Строге порівняння (<code>===</code>) є істинним лише в тому випадку, якщо операнди мають однаковий тип, а їхній зміст співпадає. Найчастіше вживане абстрактне порівняння (<code>==</code>) приводить операнди до спільного типу перед виконанням порівняння. Для абстрактних порівнянь (наприклад, <code><=</code>) операнди спочатку приводяться до простих типів, потім приводяться до спільного типу, а вже тоді порівнюються.</p> + +<p>Рядки порівнюються на основі стандартного лексикографічного упорядкування, використовуючи значення Unicode.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<p>Особливості порівнянь:</p> + +<ul> + <li>Два рядки строго рівні, якщо мають однакову послідовність символів, однакову довжину та однакові символи на відповідних позиціях.</li> + <li>Два числа строго рівні, якщо вони чисельно рівні (мають однакове числове значення). <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не дорівнює нічому, в тому числі NaN. Додатні та від'ємні нулі дорівнюють один одному.</li> + <li>Два булеві операнди строго рівні, якщо обидва є <code>true</code>, або обидва є <code>false</code>.</li> + <li>Два окремі об'єкти ніколи не є рівними ні при строгому, ні при абстрактному порівнянні.</li> + <li>Вираз, що порівнює об'єкти, істинний лише тоді, коли операнди посилаються на один і той самий об'єкт.</li> + <li>Типи Null та Undefined строго рівні собі та абстрактно рівні один одному.</li> +</ul> + +<h2 id="Оператори_рівності">Оператори рівності</h2> + +<h3 id="Рівність"><a name="Equality">Рівність (==)</a></h3> + +<p>Оператор рівності перетворює операнди, якщо вони <strong>не однакового типу</strong>, і після цього застосовує строге порівняння. Якщо <strong>обидва операнди є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є рівними, якщо операнди посилаються на один і той самий об'єкт у пам'яті.</p> + +<h4 id="Синтаксис">Синтаксис</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="Приклади">Приклади</h4> + +<pre class="brush: js">1 == 1 // true +'1' == 1 // true +1 == '1' // true +0 == false // true +0 == null // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1.key == object2.key // true +0 == undefined // false +null == undefined // true +</pre> + +<h3 id="Нерівність_!"><a name="Inequality">Нерівність (!=)</a></h3> + +<p>Оператор нерівності повертає <em>true</em>, якщо операнди не є рівними. Якщо два операнда <strong>не належать до одного типу</strong>, JavaScript намагається привести операнди до відповідного типу для порівняння. Якщо <strong>обидва операнда є об'єктами</strong>, JavaScript порівнює внутрішні посилання, які є нерівними, якщо операнди посилаються на різні об'єкти у пам'яті.</p> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="Приклади_2">Приклади</h4> + +<pre class="brush: js">1 != 2 // true +1 != '1' // false +1 != "1" // false +1 != true // false +0 != false // false +</pre> + +<h3 id="Ідентичність_строга_рівність"><a name="Identity">Ідентичність / строга рівність (===)</a></h3> + +<p>Оператор ідентичності повертає true, якщо операнди строго рівні (див. вище) <strong>без приведення типів</strong>. </p> + +<h4 id="Синтаксис_3">Синтаксис</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="Приклади_3">Приклади</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 === object2 //false</pre> + +<h3 id="Неідентичність_строга_нерівність_!"><a name="Nonidentity">Неідентичність / строга нерівність (!==)</a></h3> + +<p>Оператор неідентичності повертає true, якщо операнди <strong>не є рівними та/або не однакового типу</strong>.</p> + +<h4 id="Синтаксис_4">Синтаксис</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="Приклади_4">Приклади</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Оператори_відношення">Оператори відношення</h2> + +<p>Кожен з цих операторів буде <a href="/uk/docs/Glossary/Type_coercion">примусово приведений</a> до простої величини перед порівнянням. Якщо обидва перетворюються на рядки, вони порівнюються з використанням лексикографічного порядку, інакше вони будуть перетворені на числа для порівняння. Порівняння із <code>NaN</code> завжди поверне <code>false</code>.</p> + +<h3 id="Більше_ніж_>"><a name="Greater_than_operator">Більше ніж (>)</a></h3> + +<p>Оператор <em>більше ніж </em>повертає true, якщо значення лівого операнда більше за значення правого операнда.</p> + +<h4 id="Синтаксис_5">Синтаксис</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="Приклади_5">Приклади</h4> + +<pre class="brush: js">4 > 3 // true +</pre> + +<h3 id="Більше_чи_дорівнює_>"><a name="Greater_than_or_equal_operator">Більше чи дорівнює (>=)</a></h3> + +<p>Оператор <em>більше чи дорівнює</em> повертає true, якщо значення лівого операнда більше, або дорівнює значенню правого операнда.</p> + +<h4 id="Синтаксис_6">Синтаксис</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="Приклади_6">Приклади</h4> + +<pre class="brush: js">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="Менше_ніж_<"><a name="Less_than_operator">Менше ніж (<)</a></h3> + +<p>Оператор <em>менше ніж</em> повертає true, якщо значення лівого операнда менше значення правого операнда.</p> + +<h4 id="Синтаксис_7">Синтаксис</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="Приклади_7">Приклади</h4> + +<pre class="brush: js">3 < 4 // true +</pre> + +<h3 id="Менше_чи_дорівнює_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Менше чи дорівнює (<=)</a></h3> + +<p>Оператор <em>менше чи дорівнює</em> повертає true, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</p> + +<h4 id="Синтаксис_8">Синтаксис</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="Приклади_8">Приклади</h4> + +<pre class="brush: js">3 <= 4 // true +</pre> + +<h2 id="Застосування_операторів_порівняння">Застосування операторів порівняння</h2> + +<p>Стандартні оператори рівності (<code>==</code> та <code>!=</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">алгоритм абстрактної рівності</a> для порівняння двох операндів. Якщо операнди належать до різних типів, алгоритм спробує привести їх до спільного типу перед порівнянням; наприклад, у виразі <code>5 == '5'</code>, рядок праворуч буде приведений до {{jsxref("Число","числа")}} перед здійсненням порівняння.</p> + +<p>Оператори строгої рівності (<code>===</code> та <code>!==</code>) використовують <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">алгоритм строгої рівності</a> та призначені для виконання перевірки рівності операндів одного типу. Якщо операнди належать до різних типів, результат завжди буде <code>false</code>, тому <code>5 !== '5'</code>.</p> + +<p>Використовуйте оператори строгого порівняння, якщо операнди мають належати до вказаного типу, як і їх значення, або, якщо конкретний тип операндів має значення. Інакше, використовуйте стандартні оператори рівності, які дозволяють перевіряти ідентичність двох операндів, навіть якщо вони не належать до одного типу.</p> + +<p>Коли в порівнянні застосовується перетворення типів (тобто, це не строге порівняння), JavaScript перетворює типи операндів {{jsxref ("String")}}, {{jsxref ("Число","Number")}}, {{jsxref ("Boolean" )}} або {{jsxref ("Object")}} наступним чином:</p> + +<ul> + <li>При порівнянні числа й рядка, рядок конвертується в числове значення. JavaScript намагається конвертувати число у рядковому літералі в значення типу <code>Number</code>. Спочатку математичне значення виводиться з рядкового літерала. Далі ця величина округлюється до найближчого значення типу <code>Number</code>.</li> + <li>Якщо один з операндів належить до типу <code>Boolean</code>, цей операнд конвертується у 1, якщо він дорівнює <code>true</code>, і у +0, якщо він дорівнює <code>false</code>.</li> + <li>Якщо об'єкт порівнюється з рядком або числом, JavaScript намагається повернути значення об'єкта за замовчуванням. Оператори намагаються перетворити об'єкти на просте значення, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">рядок</span></font> або <code>число</code>, використовуючи методи об'єктів <code>valueOf</code> та <code>toString</code>. Якщо спроба перетворення була невдалою, генерується помилка виконання.</li> + <li>Зауважте, що об'єкт перетворюється на просту величину тоді, й тільки тоді, коли порівнюється з простою величиною. Якщо обидва операнди є об'єктами, вони порівнюються як об'єкти, а тест на рівність істинний, тільки якщо вони обидва посилаються на один і той самий об'єкт.</li> +</ul> + +<div class="note"><strong>Заувага:</strong> Рядкові об'єкти є об'єктами типу Object, а не String! Об'єкти типу String використовуються рідко, а отже, наведені нижче результати можуть бути несподіваними:</div> + +<pre class="brush:js">// true, оскільки обидва операнди мають тип String (є рядковими примітивами): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false, оскільки a та b мають тип Object і посилаються на різні об'єкти +a == b + +// false, оскільки a та b мають тип Object і посилаються на різні об'єкти +a === b + +// true, оскільки a та 'foo' мають різні типи, але об'єкт (а) +// перетворюється на рядок 'foo' перед порівнянням +a == 'foo'</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>Початкове визначення. Реалізовано у JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Додані оператори <code>===</code> та <code>!==</code> . Реалізовано у JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Оператори рівності</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Дано визначення у декільках секціях специфікації: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Оператори відношення</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Оператори рівності</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Дано визначення у декільках секціях специфікації: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Оператори відношення</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Оператори рівності</a></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + + + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">Перевірка на рівність та однаковість</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html b/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html new file mode 100644 index 0000000000..d69f9055d1 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/оператори_присвоєння/index.html @@ -0,0 +1,418 @@ +--- +title: Оператори присвоєння +slug: Web/JavaScript/Reference/Operators/Оператори_присвоєння +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор присвоєння</strong> присвоює своєму лівому операнду значення, на підставі значення правого операнду.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Огляд">Огляд</h2> + +<p>Базовим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює змінній <code>x</code> значення змінної <code>y</code>. Інші оператори присвоєння у своїй більшості є скороченнями для стандарних операцій, як це вказано у наступній таблиці з визначеннями та прикладами.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Назва</th> + <th>Оператор скороченого запису</th> + <th>Значення</th> + </tr> + <tr> + <td><a href="#Присвоєння">Присвоєння</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_додаванням">Присвоєння з додаванням</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_відніманням">Присвоєння з відніманням</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_множенням">Присвоєння з множенням</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_діленням">Присвоєння з діленням</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_остачі">Присвоєння остачі</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_піднесенням_до_степеня">Присвоєння з піднесенням до степеня</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_лівим_зсувом">Присвоєння з лівим зсувом</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_правим_зсувом">Присвоєння з правим зсувом</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_беззнаковим_правим_зсувом">Присвоєння з беззнаковим правим зсувом</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_побітовим_І">Присвоєння з побітовим І</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_виключним_побітовим_АБО">Присвоєння з виключним побітовим АБО</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Присвоєння_з_побітовим_АБО">Присвоєння з побітовим АБО</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Присвоєння"><a name="Assignment">Присвоєння</a></h2> + +<p>Простий оператор присвоєння використовується для присвоєння змінній значення. Оператор присвоєння обчислює значення, що присвоюється. Можна використовувати ланцюжок присвоюваннь, щоб присвоїти одне значення декільком змінним. Дивіться приклад нижче.</p> + +<h4 id="Синтаксис">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x = y +</pre> + +<h4 id="Приклади">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// x = 5 +// y = 10 +// z = 25 + +x = y // x дорівнює 10 +x = y = z // x, y та z усі дорівнюють 25 +</pre> + +<h3 id="Присвоєння_з_додаванням"><a name="Addition_assignment">Присвоєння з додаванням</a></h3> + +<p>Оператор присвоєння з додаванням <strong>додає</strong> значення правого операнду до змінної (лівого перанду) та записує у неї отриманий результат. Типи двох операндів визначають поведінку оператора. Таким чином, його результатом може стати або додавання або конкатенація. Для більш детального огляду дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор додавання", "#Addition", 1)}}.</p> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x += y +<strong>Значення:</strong> x = x + y +</pre> + +<h4 id="Приклади_2">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// foo = 'foo' +// bar = 5 +// baz = true + + +// число + число -> додавання +bar += 2 // 7 + +// булеве значення + число -> додавання +baz += 1 // 2 + +// булеве значення + булеве значення -> додавання +baz += false // 1 + +// число + рядок -> конкатенація +bar += 'foo' // "5foo" + +// рядок + булеве значення -> конкатенація +foo += false // "foofalse" + +// рядок + рядок -> конкатенація +foo += 'bar' // "foobar" +</pre> + +<h3 id="Присвоєння_з_відніманням"><a name="Subtraction_assignment">Присвоєння з відніманням</a></h3> + +<p>Оператор присвоєння з відніманням <strong>віднімає</strong> значення правого операнду від змінної (лівого перанду) та записує у неї отриманий результат. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор віднімання", "#Subtraction", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_3">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x -= y +<strong>Значення:</strong> x = x - y +</pre> + +<h4 id="Приклади_3">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// bar = 5 + +bar -= 2 // 3 +bar -= 'foo' // NaN +</pre> + +<h3 id="Присвоєння_з_множенням"><a name="Multiplication_assignment">Присвоєння з множенням</a></h3> + +<p>Оператор присвоєння з множенням <strong>помножує</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор множення", "#Multiplication", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_4">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x *= y +<strong>Значення:</strong> x = x * y +</pre> + +<h4 id="Приклади_4">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN +</pre> + +<h3 id="Присвоєння_з_діленням"><a name="Division_assignment">Присвоєння з діленням</a></h3> + +<p>Оператор присвоєння з діленням <strong>ділить</strong> змінну (лівий операнд) на значення правого операнду та записує отриманий результат у змінну. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор ділення", "#Division", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_5">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x /= y +<strong>Значення:</strong> x = x / y +</pre> + +<h4 id="Приклади_5">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// bar = 5 + +bar /= 2 // 2.5 +bar /= 'foo' // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="Присвоєння_остачі"><a name="Remainder_assignment">Присвоєння остачі</a></h3> + +<p>Оператор присвоєння остачі <strong>ділить</strong> змінну на значення правого операнду та присвоює <strong>остачу</strong> змінній. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор остачі", "#Remainder", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_6">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x %= y +<strong>Значення:</strong> x = x % y +</pre> + +<h4 id="Приклади_6">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN +</pre> + +<h3 id="Присвоєння_з_піднесенням_до_степеня"><a id="Exponentiation_assignment" name="Exponentiation_assignment">Присвоєння з піднесенням до степеня</a></h3> + +<p>Оператор присвоєння з піднесенням до степеня обчислює результат піднесення першого операнду до <strong>показника степеня</strong> другого операнду. Дивіться {{jsxref("Operators/Arithmetic_Operators", "оператор піднесення до степеня", "#Exponentiation", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_7">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x **= y +<strong>Значення:</strong> x = x ** y +</pre> + +<h4 id="Приклади_7">Приклади</h4> + +<pre class="brush: js">// Розглянемо такі змінні: +// bar = 5 + +bar **= 2 // 25 +bar **= 'foo' // NaN</pre> + +<h3 id="Присвоєння_з_лівим_зсувом"><a name="Left_shift_assignment">Присвоєння з лівим зсувом</a></h3> + +<p>Оператор присвоєння з лівим зсувом виконує зсув першого операнду на вказану кількість бітів ліворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор лівого зсуву", "#Left_shift", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_8">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x <<= y +<strong>Значення:</strong> x = x << y +</pre> + +<h4 id="Приклади_8">Приклади</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="Присвоєння_з_правим_зсувом"><a name="Right_shift_assignment">Присвоєння з правим зсувом</a></h3> + +<p>Оператор присвоєння з правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат у змінну. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор правого зсуву", "#Right_shift", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_9">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x >>= y +<strong>Значення:</strong> x = x >> y +</pre> + +<h4 id="Приклади_9">Приклади</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="Присвоєння_з_беззнаковим_правим_зсувом"><a name="Unsigned_right_shift_assignment">Присвоєння з беззнаковим правим зсувом</a></h3> + +<p>Оператор присвоєння з беззнаковим правим зсувом виконує зсув першого операнду на вказану кількість бітів праворуч та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", " оператор беззнакового правого зсуву", "#Unsigned_right_shift", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_10">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x >>>= y +<strong>Значення:</strong> x = x >>> y +</pre> + +<h4 id="Приклади_10">Приклади</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="Присвоєння_з_побітовим_І"><a name="Bitwise_AND_assignment">Присвоєння з побітовим І</a></h3> + +<p>Оператор присвоєння з побітовим І використовує двійкове представлення обох операндів, виконує над ними операцію побітового І та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового І", "#Bitwise_AND", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_11">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x &= y +<strong>Значення:</strong> x = x & y +</pre> + +<h4 id="Приклади_11">Приклади</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="Присвоєння_з_виключним_побітовим_АБО"><a name="Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></h3> + +<p>Оператор присвоєння з виключним побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію виключного побітового АБО (XOR) та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор виключного побітового АБО", "#Bitwise_XOR", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_12">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x ^= y +<strong>Значення:</strong> x = x ^ y +</pre> + +<h4 id="Приклади_12">Приклади</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="Присвоєння_з_побітовим_АБО"><a name="Bitwise_OR_assignment">Присвоєння з побітовим АБО</a></h3> + +<p>Оператор присвоєння з побітовим АБО використовує двійкове представлення обох операндів, виконує над ними операцію побітового АБО та присвоює результат змінній. Дивіться {{jsxref("Operators/Bitwise_Operators", "оператор побітового АБО", "#Bitwise_OR", 1)}} для більш детального огляду.</p> + +<h4 id="Синтаксис_13">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор: </strong> x |= y +<strong>Значення:</strong> x = x | y +</pre> + +<h4 id="Приклади_13">Приклади</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Приклади_14">Приклади</h2> + +<h3 id="Лівий_операнд_з_іншим_оператором_присвоєння">Лівий операнд з іншим оператором присвоєння</h3> + +<p>У незвичних ситуаціях оператор присвоєння (наприклад, <code> x += y</code>) не є ідентичним виразу, який він означає (в даному випадку <code>x = x + y</code>). Коли лівий операнд оператора присвоєння сам містить оператор присвоєння, лівий операнд обчислюється лише один раз. Наприклад:</p> + +<pre class="brush: js">a[i++] += 5 // i обчислюється лише один раз +a[i++] = a[i++] + 5 // i обчислюється двічі +</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('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичні оператори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html b/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html new file mode 100644 index 0000000000..00d1497164 --- /dev/null +++ b/files/uk/web/javascript/reference/operators/ініціалізація_об’єктів/index.html @@ -0,0 +1,296 @@ +--- +title: Ініціалізатор об’єкта +slug: Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Об'єкт + - властивості + - літерал + - методи + - мутація + - обчислені +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Operators")}}</div> + +<p>Об'єкти можна ініціалізувати через <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, або за допомогою <em>літеральної</em> нотації (нотації <em>ініціалізатора</em>). Ініціалізатор об'єкта - це список з нуля або більше розділених комою пар імен властивостей та асоційованих з ними значень об'єкта, записаних у фігурних дужках (<code>{}</code>).</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p> + +<div class="hidden"> +<p>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.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">let o = {} +let o = {a: 'няв', b: 42, c: {}} + +let a = 'няв', b = 42, c = {} +let o = {a: a, b: b, c: c} + +let o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h3 id="Нові_позначення_у_ECMAScript_2015">Нові позначення у ECMAScript 2015</h3> + +<p>Будь ласка, перевірте підтримку цих позначень у таблиці сумісностей. У тих середовищах, де вони не підтримуються, вони призведуть до синтаксичних помилок.</p> + +<pre class="brush: js notranslate">// Скорочений запис імен властивостей (ES2015) +let a = 'привіт', b = 42, c = {}; +let o = {a, b, c} + +// Скорочений запис імен методів (ES2015) +let o = { + <var>property</var>([<var>parameters</var>]) {} +} + +// Обчислювані імена властивостей (ES2015) +let prop = 'foo' +let o = { + [prop]: 'як', + ['b' + 'ar']: 'справи' +}</pre> + +<h2 id="Опис">Опис</h2> + +<p>Ініціалізатор об'єкта - це вираз, який описує ініціалізацію {{jsxref("Object","об'єкта")}}. Об'єкт складається з <em>властивостей</em>, які описують цей об'єкт. Значення властивостей об'єкта можуть містити або {{Glossary("primitive","прості")}} типи даних, або інші об'єкти.</p> + +<h3 id="Літеральна_нотація_обєкта_та_JSON">Літеральна нотація об'єкта та JSON</h3> + +<p>Літеральна нотація об'єкта - це не те саме, що запис об'єктів JavaScript (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation, <a href="/uk/docs/Glossary/JSON">JSON</a>). Хоча вони схожі, між ними є кілька відмінностей:</p> + +<ul> + <li>JSON дозволяє визначення властивості <em>тільки</em> у форматі <code>"property": value</code>. Ім'я властивості має бути записане у подвійних лапках, а визначення не може бути скороченим.</li> + <li>У JSON значення можуть бути тільки рядками, числами, масивами, <code>true</code>, <code>false</code>, <code>null</code> або іншими об'єктами (JSON).</li> + <li>Функція (дивіться "Визначення методів") не може бути присвоєна як значення у JSON.</li> + <li>Об'єкти типу {{jsxref("Date")}} перетворяться на рядок після виклику {{jsxref("JSON.parse()")}}.</li> + <li>{{jsxref("JSON.parse()")}} відхилить обчислювані імена властивостей, буде викинута помилка.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Створення_обєктів">Створення об'єктів</h3> + +<p>Порожній об'єкт без властивостей може бути створений так:</p> + +<pre class="brush: js notranslate">let object = {}</pre> + +<p>Однак, перевагою <em>літералу</em> або <em>ініціалізатора</em> об'єкта є те, що ви можете швидко створити об'єкт з властивостями всередині фігурних дужок. Ви просто позначаєте список пар <code>key: value</code>, розділених комами.</p> + +<p>Наступний код створює об'єкт з трьома властивостями, його ключами є <code>"foo"</code>, <code>"age"</code> та <code>"baz"</code>. Значеннями цих ключів є рядок <code>"bar"</code>, число <code>42</code>, а третя властивість має інший об'єкт в якості свого значення.</p> + +<pre class="brush: js notranslate">let object = { + foo: 'bar', + age: 42, + baz: {myProp: 12} +}</pre> + +<h3 id="Доступ_до_властивостей">Доступ до властивостей</h3> + +<p>Коли ви створили об'єкт, ви можете захотіти прочитати чи змінити його. До властивостей об'єкта можна звертатись, використовуючи крапкову нотацію або дужкову нотацію. Читайте <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Доступ до властивостей</a>, щоб дізнатись більше.</p> + +<pre class="brush: js notranslate">object.foo // "bar" +object['age'] // 42 + +object.foo = 'baz' +</pre> + +<h3 id="Визначення_властивостей">Визначення властивостей</h3> + +<p>Ми вже дізнались, як позначати властивості за допомогою синтаксису ініціалізатора. Часто у коді є змінні, які ви б хотіли використати в об'єкті. Ви побачите код на зразок такого:</p> + +<pre class="brush: js notranslate">let a = 'foo', + b = 42, + c = {}; + +let o = { + a: a, + b: b, + c: c +}</pre> + +<p>У ECMAScript 2015 є коротше позначення, яке робить те саме:</p> + +<pre class="brush: js notranslate">let a = 'foo', + b = 42, + c = {}; + +// Скорочений запис імен властивостей (ES2015) +let o = {a, b, c} + +// Іншими словами, +console.log((o.a === {a}.a)) // true +</pre> + +<h4 id="Дублювання_імен_властивостей">Дублювання імен властивостей</h4> + +<p>Якщо використовуються однакові імена властивостей, друга властивість перепише першу.</p> + +<pre class="brush: js notranslate">var a = {x: 1, x: 2}; +console.log(a); // {x: 2} +</pre> + +<p>У строгому режимі ECMAScript 5 дублювання імен властивостей вважалося помилкою {{jsxref("SyntaxError")}}. З появою обчислюваних імен властивостей, що робило дублювання можливим під час виконання, це обмеження було прибране з ECMAScript 2015.</p> + +<pre class="brush: js notranslate">function haveES2015DuplicatePropertySemantics() { + 'use strict'; + try { + ({prop: 1, prop: 2}); + + // Помилка не викидається, дублікати дозволені у строгому режимі + return true; + } catch(e) { + // Помилка викидається, дублікати заборонені у строгому режимі + return false; + } +}</pre> + +<h3 id="Визначення_методів">Визначення методів</h3> + +<p>Властивість об'єкта може також посилатись на <a href="/uk/docs/Web/JavaScript/Reference/Functions">функцію</a> або <a href="/uk/docs/Web/JavaScript/Reference/Functions/get">гетер</a> чи <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">сетер</a>.</p> + +<pre class="brush: js notranslate">let o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}</pre> + +<p>У ECMAScript 2015 доступне скорочене позначення, тому ключове слово "<code>function</code>" більше не є обов'язковим.</p> + +<pre class="brush: js notranslate">// Скорочений запис імен методів (ES2015) +let o = { + <var>property</var>([<var>parameters</var>]) {}, +}</pre> + +<p>У ECMAScript 2015 є можливість стисло визначати властивості, значеннями яких є функції-генератори:</p> + +<pre class="brush: js notranslate">let o = { + *<var>generator</var>() { + ........... + } +};</pre> + +<p>Що є еквівалентним цьому позначенню в стилі ES5 (але зауважте, що у ECMAScript 5 немає генераторів):</p> + +<pre class="brush: js notranslate">let o = { + generator<var>: function* </var>() { + ........... + } +}</pre> + +<p>Більше інформації та прикладів щодо методів дивіться у статті <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначення методів</a>.</p> + +<h3 id="Обчислювані_імена_властивостей">Обчислювані імена властивостей</h3> + +<p>Починаючи з ECMAScript 2015, синтаксис об'єктного ініціалізатора також підтримує обчислювані імена властивостей. Це дозволяє розташувати вираз у квадратних дужках <code>[]</code>, і він буде обчислений як ім'я властивості. Цей синтаксис є аналогічним дужковій нотації у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступі до властивостей</a>, який ви вже могли використовувати, щоб читати та встановлювати властивості. Тепер ви можете використовувати такий самий синтаксис і для об'єктних літералів:</p> + +<pre class="brush: js notranslate">// Обчислювані імена властивостей (ES2015) +let i = 0 +let a = { + ['foo' + ++i]: i, + ['foo' + ++i]: i, + ['foo' + ++i]: i +} + +console.log(a.foo1) // 1 +console.log(a.foo2) // 2 +console.log(a.foo3) // 3 + +let param = 'size' +let config = { + [param]: 12, + ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +} + +console.log(config) // {size: 12, mobileSize: 4}</pre> + +<h3 id="Розкладені_властивості">Розкладені властивості</h3> + +<p>Пропозиція <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадія 4) додає <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">розкладені</a> властивості до об'єктних літералів. Ця функціональність копіює особисті перелічувані властивості з наданого об'єкта у новий об'єкт.</p> + +<p>Дрібне клонування (не включає <code>prototype</code>) чи злиття об'єктів тепер можливе з використанням синтаксису, коротшого, ніж {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 } +let obj2 = { foo: 'baz', y: 13 } + +let clonedObj = { ...obj1 } +// Object { foo: "bar", x: 42 } + +let mergedObj = { ...obj1, ...obj2 } +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Зауважте, що {{jsxref("Object.assign()")}} запускає <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">сетери</a>, а оператор розкладу ні!</p> + +<h3 id="Мутація_прототипу">Мутація прототипу</h3> + +<p>Визначення властивості виду <code>__proto__: value</code> чи <code>"__proto__": value</code> не створює властивість з іменем <code>__proto__</code>. Замість цього, якщо надане значення є об'єктом чи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, воно змінює <code>[[Prototype]]</code> створеного об'єкта на це значення. (Якщо значення не є об'єктом чи null, об'єкт не змінюється.)</p> + +<pre class="brush: js notranslate">let obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +let obj2 = {__proto__: null}; +assert(Object.getPrototypeOf(obj2) === null); + +let protoObj = {}; +let obj3 = {'__proto__': protoObj}; +assert(Object.getPrototypeOf(obj3) === protoObj); + +let obj4 = {__proto__: 'не об\'єкт чи null'}; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty('__proto__')); +</pre> + +<p>У об'єктному літералі дозволена лише одна мутація: декілька мутацій прототипу є синтаксичною помилкою.</p> + +<p>Визначення властивостей, які не використовують нотацію з двокрапкою, не є мутаціями прототипу: вони є визначеннями властивостей, які поводяться ідентично до схожих визначень, що використовують будь-яке інше ім'я.</p> + +<pre class="brush: js notranslate">let __proto__ = 'змінна'; + +let obj1 = {__proto__}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty('__proto__')); +assert(obj1.__proto__ === 'змінна'); + +let obj2 = {__proto__() { return 'привіт'; }}; +assert(obj2.__proto__() === 'привіт'); + +let obj3 = {['__prot' + 'o__']: 17}; +assert(obj3.__proto__ === 17); +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.object_initializer")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Доступ до властивостей</a></li> + <li><code><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/uk/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">Визначення методів</a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">Лексична граматика</a></li> +</ul> |