diff options
Diffstat (limited to 'files/uk/web/javascript/guide')
14 files changed, 6817 insertions, 0 deletions
diff --git a/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..c055e31dc0 --- /dev/null +++ b/files/uk/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,465 @@ +--- +title: Управління потоком виконання та обробка помилок +slug: Web/JavaScript/Guide/Control_flow_and_error_handling +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> + +<p class="summary">JavaScript підтримує компактний набір інструкцій, зокрема інструкцій для управління потоком, які можна використати, щоб включити інтерактивність до вашого додатку. Цей розділ надає огляд таких інструкцій.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Довідник JavaScript</a> містить вичерпні дані про інструкції, описані у цьому розділі. Символ крапки з комою (<code>;</code>) розділяє інструкції у JavaScript-коді.</p> + +<p>Будь-який вираз у JavaScript також являється інструкцією. Повну інформацію про вирази дивіться у розділі <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a>.</p> + +<h2 id="Блокова_інструкція">Блокова інструкція</h2> + +<p>Найбільш базовою інструкцією є блокова, що об'єднує кілька інструкцій в одну. Блок обмежується парою фігурних дужок:</p> + +<pre class="syntaxbox notranslate">{ + інструкція_1; + інструкція_2; + . + . + . + інструкція_n; +} +</pre> + +<h3 id="Приклад"><strong>Приклад</strong></h3> + +<p>Блокова інструкція зазвичай використовується поряд з інструкціями для управління потоком виконання (наприклад, <code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js notranslate">while (x < 10) { + x++; +} +</pre> + +<p>У даному випадку, <code>{ x++; }</code> є блоковою інструкцією.</p> + +<div class="blockIndicator note"> +<p><strong>Важливо</strong>: JavaScript до ECMAScript2015 не мав блокової області видимості. Змінні, об'явлені всередині блоку, були видимі в області меж зовнішньої функції або ж усього скрипта. І ефект від їхнього зміни поширювався за межі блоку. Інакше кажучи, блокові інструкції не створювали області видимості.</p> + +<p>"Поодинокі" блоки у JavaScript можуть мати зовсім інші наслідки, ніж у мовах C чи Java. Наприклад:</p> + +<pre class="brush: js notranslate">var x = 1; +{ + var x = 2; +} +console.log(x); // в результаті - 2 +</pre> + +<p>В результаті отримуємо 2, тому що інструкція <code>var x</code> всередині блоку перебуває в одній області видимості з інструкцією <code>var x</code> перед блоком. У C чи Java подібний код поверне 1.</p> + +<p>Починаючи з ECMAScript2015, декларації змінних <code>let</code> і <code>const</code> мають блокову область видимості. Докладніше на довідкових сторінках {{jsxref("Statements/let", "let")}} і {{jsxref("Statements/const", "const")}}.</p> +</div> + +<h2 id="Умовні_інструкції">Умовні інструкції</h2> + +<p>Умовною інструкцією називається набір команд, що виконаються, якщо певна умова буде істинною. JavaScript підтримує два види умовних інструкцій: <code>if...else</code> та <code>switch</code>.</p> + +<h3 id="Інструкція_if...else">Інструкція <code>if...else</code></h3> + +<p>Використовуйте <code>if</code>, щоб виконати інструкцію, якщо логічна умова являється істинною. Використовуйте необов'яковий <code>else</code>, щоб виконати інструкцію, якщо умова являється хибною. Інструкція <code>if</code> виглядає так:</p> + +<pre class="syntaxbox notranslate">if (умова) { + інструкція_1; +} else { + інструкція_2; +}</pre> + +<p>Тут <code>умова</code> може бути будь-яким виразом, що зводиться до <code>true</code> чи <code>false</code> (дивіться розділ <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a> для роз'яснення, що і як обчислюється до <code>true</code> чи <code>false</code>). Якщо <code>умова</code> обчислюється до <code>true</code>, виконується <code>інструкція_1</code>; інакше виконується <code>інструкція_2</code>. <code>інструкція_1</code> та <code>інструкція_2</code> можуть бути будь-якими, включаючи вкладені інструкції <code>if</code>.</p> + +<p>Можна також суміщувати інструкції у вигляді <code>else if</code>, щоб послідовно перевірити кілька умов, як-от, наприклад:</p> + +<pre class="syntaxbox notranslate">if (умова_1) { + інструкція_1; +} else if (умова_2) { + інструкція_2; +} else if (умова_n) { + інструкція_n; +} else { + інструкція_остання; +} +</pre> + +<p>У випадку наявності кількох таких умов буде виконано лише найперший обчислений до <code>true</code>. Щоб виконати кілька інструкцій, слід об'єднати їх у блок (<code>{ ... }</code>) .</p> + +<h4 id="Найкращі_практики">Найкращі практики</h4> + +<p>Загалом, хорошою практикою вважається завжди використовувати блоки інструкцій, особливо при вкладенні інструкцій <code>if</code>:</p> + +<pre class="syntaxbox notranslate">if (умова) { + інструкція_1_виконується_якщо_умова_правильна; + інструкція_2_виконується_якщо_умова_правильна; +} else { + інструкція_3_виконується_якщо_умова_хибна; + інструкція_4_виконується_якщо_умова_хибна; +} +</pre> + +<div>Не рекомендується використовувати звичайні присвоєння в умовних виразах, бо присвоєння можна сплутати з порівнянням при перегляді коду.</div> + +<div></div> + +<div>Наприклад, не слід писати ось так:</div> + +<pre class="example-bad brush: js notranslate">// Ймовірно, буде прочитано як "x == y" +if (x = y) { + /* statements here */ +} +</pre> + +<p>Якщо все ж таки потрібно використати присвоєння всередині умовного виразу, загальною практикою є додавання зайвих дужок навколо присвоєння, як-от:</p> + +<pre class="example-good brush: js notranslate">if ((x = y)) { + /* інструкції тут */ +} +</pre> + +<h4 id="Хибні_значення">Хибні значення</h4> + +<p>Наступні значення обчислюються до <code>false</code> (також знані як {{Glossary("Falsy")}} значення):</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>порожня стрічка (<code>""</code>)</li> +</ul> + +<p>Всі інші значення (включно з усіма об'єктами), обчислюються до <code>true</code> при передачі в умовний вираз.</p> + +<div class="blockIndicator note"> +<p><strong>Увага:</strong> не плутайте примітивні булеві значення <code>true</code> та <code>false</code> із істинними і хибними значеннями об'єкту {{jsxref("Boolean")}}. Наприклад:</p> + +<pre class="brush: js notranslate">var b = new Boolean(false); +if (b) // цей умовний вираз буде істинним +if (b == true) // цей умовний вираз буде хибним +</pre> +</div> + +<h4 id="Приклад_2"><strong>Приклад</strong></h4> + +<p>У наведеному далі прикладі функція <code>checkData</code> повертає <code>true</code>, якщо в об'єкті <code>Text</code> три символи, а інакше вона показує сповіщення та повертає <code>false</code>.</p> + +<pre class="brush: js notranslate">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert('Enter exactly three characters. ' + + document.form1.threeChar.value + ' is not valid.'); + return false; + } +}<code> +</code></pre> + +<h3 id="Інструкція_switch">Інструкція <code>switch</code></h3> + +<p>Інструкція <code>switch</code> дозволяє програмі оцінити вираз і спробувати співставити значення виразу з міткою <code>case</code>. Якщо відповідність знайдено , програма виконує пов'язану з цим інструкцію.</p> + +<p>Інструкція <code>switch</code> виглядає наступним чином:</p> + +<pre class="brush: js notranslate">switch (expression) { + case label_1: + statements_1 + [break;] + case label_2: + statements_2 + [break;] + ... + default: + statements_def + [break;] +}</pre> + +<p>JavaScript розуміє <code>switch</code> інструкцію наступним чином:</p> + +<ul> + <li>Програма спочатку шукає пункт <code>case</code> із міткою, що відповідає значенню виразу, а потім передає керування цьому пунктові, у якому виконуються відповідні інструкції.</li> + <li>Якщо відповідної мітки не знайдено, програма шукає необов'язковий пункт <code>default</code>: + <ul> + <li>Якщо пунт <code>default</code> знайдено, програма передає керування йому, виконуючи відповідні інструкції.</li> + <li>Якщо пункту <code>default</code> не знайдено, програма продовжує виконання інструкцій після закінчення <code>switch</code>.</li> + <li>(Традиційно, пункт <code>default</code> записується останнім, але це не обов'язково.)</li> + </ul> + </li> +</ul> + +<h4 id="Інструкція_break">Інструкція <code>break</code></h4> + +<p>Необов'язкова інструкція <code>break</code>, пов’язана із кожним пунктом <code>case</code>, забезпечує те, що програма виходить з конструкції <code>switch</code>, якщо виконується відповідна умова, і продовжує виконання інструкцій після конструкції <code>switch</code>. Якщо <code>break</code> не використовується, програма продовжує виконання інструкції наступних пунктів всередині <code>switch</code>, не перевіряючи умови.</p> + +<h5 id="Приклад_3"><strong>Приклад</strong></h5> + +<p>У наступному прикладі, якщо <code>fruittype</code> дорівнює "Bananas", програма виконує пов'язану з пукнтом "Bananas" інструкцію. Коли виникає <code>break</code>, програма припиняє <code>switch</code> та виконує наступну після <code>switch</code> інструкцію. Якщо <code>break</code> б була опущена, інструкції для пункту "Cherries" також би виконалися.</p> + +<pre class="brush: js notranslate">switch (fruittype) { + case 'Oranges': + console.log('Oranges are $0.59 a pound.'); + break; + case 'Apples': + console.log('Apples are $0.32 a pound.'); + break; + case 'Bananas': + console.log('Bananas are $0.48 a pound.'); + break; + case 'Cherries': + console.log('Cherries are $3.00 a pound.'); + break; + case 'Mangoes': + console.log('Mangoes are $0.56 a pound.'); + break; + case 'Papayas': + console.log('Mangoes and papayas are $2.79 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + fruittype + '.'); +} +console.log("Is there anything else you'd like?");</pre> + +<h2 id="Інструкції_для_обробки_винятків">Інструкції для обробки винятків</h2> + +<p>Використовуючи інструкцію <code>throw</code> , можна викидати виключення і обробляти їх за допомогою інструкцій <code>try...catch</code>.</p> + +<ul> + <li><a href="#throw_statement">Інструкція <code>throw</code></a></li> + <li><a href="#try...catch_statement">Інструкція <code>try...catch</code></a></li> +</ul> + +<h3 id="Типи_винятків">Типи винятків</h3> + +<p>В якості виключення у JavaScript можна викинути практично будь-який об'єкт. Тим не менш, не всі викинуті об'єкти створено однаковими. Позаяк доволі звичною практикою є викидати числа чи стрічки в якості помилок, часто краще використовувати якийсь із типів винятків, спеціально створених для цих потреб:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">Винятки ECMAScript</a></li> + <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li> +</ul> + +<h3 id="Оператор_throw">Оператор <code>throw</code></h3> + +<p>Скористайтеся оператором <code>throw</code>, щоб викинути виняток. Коли викидаєте виняток, ви вказуєте вираз, що містить значення, яке викидається:</p> + +<pre class="syntaxbox notranslate">throw expression; +</pre> + +<p>Ви можете викинути будь-який вираз, не тільки вирази окремих типів. Наступний код викидає кілька винятків різних типів:</p> + +<pre class="brush: js notranslate">throw 'Error2'; // тип String +throw 42; // тип Number +throw true; // тип Boolean +throw {toString: function() { return "Я об'єкт!"; } }; +</pre> + +<div class="note"><strong>Примітка:</strong> Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці <code>catch</code>.</div> + +<pre class="brush: js notranslate">// Створити об'єкт UserException +function UserException(message) { + this.message = message; + this.name = 'UserException'; +} + +// Гарненько оформити виняток у разі використання в якості рядка +// (наприклад, у консолі помилок) +UserException.prototype.toString = function() { + return this.name + ': "' + this.message + '"'; +} + +// Створити екземпляр об'єкта та викинути його +throw new UserException('Значення завелике');</pre> + +<h3 id="Інструкція_try...catch">Інструкція <code>try...catch</code></h3> + +<p>Інструкція <code>try...catch</code> позначає блок інструкцій, які програма спробує виконати, і вказує одну чи більше реакцій на викинутий виняток. Коли викидається виняток, інструкція <code>try...catch</code> його ловить.</p> + +<p>Інструкція <code>try...catch</code> складається з блока <code>try</code>, що містить одну чи більше інструкцій, і блоку <code>catch</code>, що містить інструкції до виконання у разі, якщо у блоці <code>try</code> буде викинуто виняток.</p> + +<p>Інакше кажучи, ми хочемо, щоб блок <code>try</code> успішно виконався. Але якщо так не станеться, ми хочемо, щоб управління перейшло до блоку <code>catch</code>. Практично, якщо будь-яка з інструкцій всередині блоку <code>try</code> (або всередині функції, викликаної зсередини блоку <code>try</code>) викидає виняток, управління <em>одразу</em> передається до блоку <code>catch</code>. У разі, якщо блок <code>try</code> не викинув жодного винятку, блок <code>catch</code> пропускається. А блок <code>finally</code> виконується після виконання <code>try</code> та <code>catch</code> і до інструкцій, що слідують після Інструкції <code>try...catch</code>.</p> + +<p>Наступний приклад містить інструкцію <code>try...catch</code>. У прикладі викликається функція, що повертає назву місяця з масиву, керуючись номером, переданим у функцію. Якщо число не відповідає номерові місяця (<code>1</code>–<code>12</code>), викидається виняток зі стрічкою <code>"InvalidMonthNo"</code> в якості значення, а інструкції, описані у блоці <code>catch</code>, встановлюють значення змінної <code><var>monthName</var></code> у <code>'unknown'</code>.</p> + +<pre class="brush: js notranslate">function getMonthName(mo) { + mo = mo - 1; // Коригуємо порядковий номер місяця для використання в якості + // індекса масиву (1 = Jan, 12 = Dec) + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', + 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + if (months[mo]) { + return months[mo]; + } else { + throw 'InvalidMonthNo'; // тут застосуємо ключове слово throw + } +} + +try { // інструкції, які ми намагаємося виконати + monthName = getMonthName(myMonth); // функція може викинути виняток +} +catch (e) { + monthName = 'unknown'; + logMyErrors(e); // передаємо значення винятку в обробник помилок (наприклад, вашу власну функцію) +} +</pre> + +<h4 id="Блок_catch">Блок <code>catch</code></h4> + +<p>Блок <code>catch</code> можна використовувати для обробки всіх винятків, що можуть виникнути при виконання блоку <code>try</code>.</p> + +<pre class="syntaxbox notranslate">catch (<var>catchID</var>) { + <var>інструкції</var> +}</pre> + +<p>Блок <code>catch</code> задає ідентифікатор (<code><var>catchID</var></code> у прикладі вище), що містить значення, вказане оператором <code>throw</code>. За допомогою цього ідентифікатора можна отримати інформацію про виняток, який було викинуто.</p> + +<p>JavaScript створює цей ідентифікатор, як тільки управління переходить до блоку <code>catch</code>. Ідентифікатор існує доти, доки виконується <code>catch</code>. Як тільки блок <code>catch</code> завершує роботу, ідентифікатор знищується.</p> + +<p>Наприклад, наступний код викидає виняток. Коли це відбувається, управління передається до блоку <code>catch</code>.</p> + +<pre class="brush: js notranslate">try { + throw 'myException'; // створює виняток +} +catch (e) { + // інструкції для обробки якихось винятків + logMyErrors(e); // передає об'єкт винятку до обробника помилок +} +</pre> + +<div class="blockIndicator note"> +<p><strong>Найкращі практики:</strong> Під час запису помилок до консолі всередині блоку <code>catch</code> для потреб зневадження рекомендується використовувати <code>console.error()</code> замість <code>console.log()</code>. Це одразу форматує повідомлення як помилку, і також додає його до загального списку помилок, що трапилися на сторінці. </p> +</div> + +<h4 id="Блок_finally">Блок <code>finally</code></h4> + +<p>Блок <code>finally</code> містить інструкції для виконання <em>після</em> завершення роботи блоку <code>try...catch</code>. Блок <code>finally</code> також виконається <em>перед</em> кодом, що слідує безпосередньо за оператором <code>try…catch…finally</code>.</p> + +<p>Також важливо зауважити, що блок <code>finally</code> буде виконано <em>незалежно від того,</em> чи було викинуто виняток. Однак, якщо виняток таки було викинуто, інструкції блоку <code>finally</code> буде виконано, навіть якщо жоден блок <code>catch</code> не обробив викинутий виняток.</p> + +<p>Блок <code>finally</code> можна використовувати, щоб заставити скрипт "м'яко впасти", коли трапляється виняток. Наприклад - для того, щоб звільнити ресурс, взятий скриптом.</p> + +<p>Приклад, наведений далі, відкриває файл і виконує певні дії з ним. (JavaScript на сервері дозволяє отримувати доступ до файлів.) Якщо викидається виняток, поки файл було відкрито, блок <code>finally</code> закриває файл перед тим, як скрипт впаде. Застосування <code>finally</code> тут <em>гарантує</em>, що файл ні в якому разі не залишиться відкритим, навіть якщо трапиться помилка.</p> + +<pre class="brush: js notranslate">openMyFile(); +try { + writeMyFile(theData); // Це може викинути помилку +} catch(e) { + handleError(e); // Обробити помилку, якщо вона трапиться +} finally { + closeMyFile(); // Завжди закривати ресурс +} +</pre> + +<p>Якщо блок <code>finally</code> повертає якесь значення, це значення стає результатом роботи всього блоку <code>try-catch-finally</code>, незалежно від будь-яких інструкцій <code>return</code> всередині <code>try</code> чи <code>catch</code>:</p> + +<pre class="brush: js notranslate">function f() { + try { + console.log(0); + throw 'bogus'; + } catch(e) { + console.log(1); + return true; // ця інструкція чекатиме + // допоки не виконається блок finally + console.log(2); // недосяжний код + } finally { + console.log(3); + return false; // переписує попередній "return" + console.log(4); // недосяжний код + } + // тепер виконується "return false" + console.log(5); // недосяжний код +} +f(); // console 0, 1, 3; returns false +</pre> + +<p>Переписування значень "return" блоком <code>finally</code> також стосується винятків, викинутих (можливо, повторно) всередині блоку <code>catch</code> :</p> + +<pre class="brush: js notranslate">function f() { + try { + throw 'bogus'; + } catch(e) { + console.log('упіймано внутрішній "bogus"'); + throw e; // ця інструкція чекатиме, + // допоки не виконається бльок finally + } finally { + return false; // переписує попередній "throw" + } + // тепер виконується "return false" +} + +try { + f(); +} catch(e) { + // цей код ніколи не виконається, бо "throw" + // усередині "catch" переписано + // "return"ом у "finally" + console.log('упіймано зовнішній "bogus"'); +} + +// ВИВІД: +// упіймано внутрішній "bogus"</pre> + +<h4 id="Вкладені_інструкції_try...catch">Вкладені інструкції try...catch</h4> + +<p>Можна вкладати одну чи більше інструкцій <code>try...catch</code>. Якщо внутрішня інструкція <code>try...catch</code> не має блоку <code>catch</code>, мусить бути блок <code>finally</code>, і блок <code>catch</code> зовнішної інструкції <code>try...catch</code> буде перевірено на збіг. За детальнішою інфорацією див. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a> на сторінці <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>.</p> + +<h3 id="Обробка_обєктів_Error">Обробка об'єктів <code>Error</code></h3> + +<p>Залежно від типу помилки, ви зможете використати властивості 'name' і 'message' для покращеного повідомлення. 'name' переважно називає клас, похідний від класу Error (напр., 'DOMException' або 'Error'), а 'message' традиційно дає стисліше повідомлення, ніж те, що виходить після конвертування об'єкта помилки у string.</p> + +<p>Якщо ви викидаєте влавні винятки, то для користі з цих властивостей (напр., щоб ваш блок catch відрізняв ваші винятки від системних) сожете скористатися конструктором Error. Наприклад:</p> + +<pre class="brush: js notranslate">function doSomethingErrorProne() { + if (ourCodeMakesAMistake()) { + throw (new Error('Повідомлення')); + } else { + doSomethingToGetAJavascriptError(); + } +} +.... +try { + doSomethingErrorProne(); +} catch (e) { + console.log(e.name); // logs 'Error' + console.log(e.message); // logs 'Повідомлення' або JavaScript error message) +}</pre> + +<h2 id="Обіцянки_Promises">Обіцянки (Promises)</h2> + +<p>Починаючи з ECMAScript2015, JavaScript дістав підтримку об'єктів {{jsxref("Promise")}}, що дає змогу контролювати плин відкладених і асинхронних операцій.</p> + +<p><code>Обіцянка (Promise)</code> має один зі станів:</p> + +<ul> + <li><em>очікування (pending)</em>: початковий стан, не виконаний ані відхилений.</li> + <li><em>виконано (fulfilled)</em>: успішна операція</li> + <li><em>відхилено (rejected)</em>: операція провалилася.</li> + <li><em>вирішено (settled)</em>: виконано або відхилено, але не очікування.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> + +<h3 id="Завантаження_образу_з_допомогою_XHR">Завантаження образу з допомогою XHR</h3> + +<p>Простий приклад використання Обіцянки (<code>Promise)</code> і <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> для завантаження образу міститься в репозиторії MDN GitHub<a href="https://github.com/mdn/js-examples/tree/master/promises-test"> js-examples</a> repository. Ви також можете бачити її в дії: <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Кожен крок прокоментовано, що дає змогу зблизька побачити архітектуру Обіцянок (Promises) і XHR. Тут наведено розкоментовану версію, що показує плин Обіцянки (<code>Promise)</code> , тож ви можете схопити ідею:</p> + +<pre class="brush: js notranslate">function imgLoad(url) { + return new Promise(function(resolve, reject) { + var request = new XMLHttpRequest(); + request.open('GET', url); + request.responseType = 'blob'; + request.onload = function() { + if (request.status === 200) { + resolve(request.response); + } else { + reject(Error('Image didn\'t load successfully; error code:' + + request.statusText)); + } + }; + request.onerror = function() { + reject(Error('There was a network error.')); + }; + request.send(); + }); +}</pre> + +<p>За деталями звертайтеся до сторінки {{jsxref("Promise")}} і посібника <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using Promises</a>.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html new file mode 100644 index 0000000000..5e756710dd --- /dev/null +++ b/files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html @@ -0,0 +1,760 @@ +--- +title: Докладно про об'єктну модель +slug: Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model +tags: + - Guide + - Intermediate + - JavaScript + - Object +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> + +<p class="summary">JavaScript - це об'єктна мова, що заснована на прототипах, а не на класах. У зв'язку з цим може бути менш очевидно, як саме JavaScript дозволяє створювати ієрархії об'єктів із наслідуванням їх властивостей та значень. Цей розділ є спробою дещо прояснити цей механізм.</p> + +<p>Вміст цього розділу розрахований на те, що ви вже, принаймні, дещо знайомі з мовою JavaScript, і застосовували його функції для створення простих об'єктів.</p> + +<h2 id="Мови_з_класовою_та_прототипною_моделлю">Мови з класовою та прототипною моделлю</h2> + +<p>Об'єктно-орієнтовані мови з класовою моделлю, такі як Java і C++, засновані на концепції двох окремих сутностей: класів та екземплярів.</p> + +<ul> + <li><em>Клас</em> визначає всі властивості (включаючи поля та методи у Java, чи фукнції-члени у C++, як властивості), що характеризують певний набір об'єктів. Класс - це абстрактна річ, на відміну від будь-якого окремого об'єкту із набору, який він описує. Наприклад, клас <code>Employee</code> може представляти групу всіх робітників.</li> + <li><em>Екземпляр</em>, з іншого боку, є реалізацією класу. Наприклад, <code>Victoria</code> може бути екземпляром класу <code>Employee</code>, представляючи окрему особу в якості працівника. Екземпляр має точно ті самі властивості, що і батьківський клас (не більше, не менше).</li> +</ul> + +<p>Мови з прототипною моделлю наслідування, такі як JavaScript, не розділяють ці сутності: у них просто є об'єкти. Такі мови реалізовують поняття <em>об'єкту-прототипу</em> — об'єкту, що використовується як зразок, з якого вибираються початкові властивості для нового об'єкту. Будь-який об'єкт може вказати власні властивості, як в момент створення, так і під час виконання. Ну і на додачу, будь-який об'єкт можна задати в якості прототипу з іншого об'єкту — таким чином перший об'єкт розділить свої властивості з другим.</p> + +<h3 id="Задання_і_визначення_класу">Задання і визначення класу</h3> + +<p>У мовах із класовою моделлю, класс задається у окремому <em>визначенні класу</em>. У цому визначенні можна вказати особливі методи, що називаються <em>конструкторами</em>, щоб створити екземпляри класу. Метод-конструктор може задати початкові значення властивостей екземпляру, і виконати якісь інші задачі прямо у момент створення. Для створення екземплярів застосовується оператор <code>new</code> у комбінації із методом-конструктором.</p> + +<p>JavaScript слідує подібній моделі, проте не має відокремленого від конструктора визначення класу. Натомість, ви одразу задаєте функцію-конструктор, щоб створити об'єкти із відповідним початковим набором властивостей та значень. Будь-яка JavaScript-функція може використовуватись як конструктор. Для створення нового об'єкту так само використовується оператор <code>new</code> із фукнцією-конструктором.</p> + +<p> </p> + +<div class="blockIndicator note"> +<p>Зауважте, що ECMAScript 2015 вводить <a href="/uk/docs/Web/JavaScript/Reference/Classes">визначення класу</a>:</p> + +<blockquote> +<p>Класи JavaScript, введені стандартом ECMAScript 2015, є лише синтаксичним цукром поверх уже наявного у JavaScript прототипного наслідування. Тобто ці класи <em>не вводять</em> у JavaScript нової моделі наслідуваня.</p> +</blockquote> +</div> + +<p> </p> + +<h3 id="Дочірні_класи_і_наслідування">Дочірні класи і наслідування</h3> + +<p>У мові з класовою моделлю наслідкування ієрархія класів створюється через визначення класу. У цьому визначенні можна окремо вказати, що новий клас являється <em>дочірнім</em> стосовно уже наявного класу. Дочірній клас отримає всі властивості батьківського і може привнести нові (або ж змінити успадковані). Наприклад, припустимо, що клас <code>Employee</code> включає в себе лише поля <code>name</code> та <code>dept</code>, і <code>Manager</code> - це дочірній клас <code>Employee</code>, що додає властивість <code>reports</code>. У цьому випадку, екземпляр класу <code>Manager</code> матиме три властивості: <code>name</code>, <code>dept</code>, та <code>reports</code>.</p> + +<p>JavaScript реалізовує наслідування дещо інакше. Він дозволяє пов'язувати об'єкт-прототип із будь-якою фукнцією-конструктором. Тобто ви можете точнісінько реалізувати приклад <code>Employee</code> — <code>Manager</code>, проте використовуючи дещо інші терміни. Спершу ви визначаєте конструктор <code>Employee</code>, задаючи властивості <code>name</code> та <code>dept</code>. Далі ви визначаєте фукнцію-конструктор <code>Manager</code>, що викликає конструктор <code>Employee</code> та задає властивість <code>reports</code>. Насамкінець, призначаєте новий об'єкт, отриманий з <code>Employee.prototype</code> в якості прототипу конструктора <code>Manager</code>. Надалі, при створенні екземпляра <code>Manager</code> він наслідує властивості <code>name</code> і <code>dept</code> з об'єкту <code>Employee</code>.</p> + +<h3 id="Додавання_і_видалення_властивостей">Додавання і видалення властивостей</h3> + +<p>Зазвичай у мовах із класовою моделлю наслідування класи створюються під час компіляції, а екземпляри класів - під час компіляції чи виконання програми. Після того, як його було визначено, не можна змінити кількість або тип його властивостей. Однак, у JavaScript можна додавати чи видаляти властивості будь-якого об'єкту безпосередньо під час виконання програми. Якщо додати нову властивість до об'єкту-прототипу певного набору об'єктів, вони всі також отримають цю властивість.</p> + +<h3 id="Підсумок_відмінностей_класової_і_прототипної_моделей">Підсумок відмінностей класової і прототипної моделей</h3> + +<p>Наступна таблиця надає короткий підсумок цих відмінностей. Решта розділу розкриває деталі застосування JavaScript-конструкторів і прототипів для створення ієрархії об'єктів, та порівнює це із тим, як би це робилось у Java.</p> + +<table class="standard-table"> + <caption>Порівняння мови із класовою моделлю наслідування (Java) і прототипною (JavaScript)</caption> + <thead> + <tr> + <th scope="col">Класова модель (Java)</th> + <th scope="col">Прототипна модель (JavaScript)</th> + </tr> + </thead> + <tbody> + <tr> + <td>Клас та його екземпляр - окремі сутності.</td> + <td>Всі об'єкти можуть наслідувати інші об'єкти.</td> + </tr> + <tr> + <td>Визначення класу описує його; екземпляри створюються методами-конструкторами.</td> + <td>Функції-конструктори і описують, і створюють набори об'єктів.</td> + </tr> + <tr> + <td>Окремий об'єкт створюється оператором <code>new</code>.</td> + <td>Так само.</td> + </tr> + <tr> + <td>Ієрархія об'єктів формується при визначенні класів, шляхом задання нащадків для уже наявних класів.</td> + <td>Ієрархія об'єктів формується шляхом призначення об'єкту прототипом функції-конструктора.</td> + </tr> + <tr> + <td>Властивості наслідуються згідно ланцюжка класів.</td> + <td>Властивості наслідуються згідно ланцюжка прототипів.</td> + </tr> + <tr> + <td>Визначення класу задає <em>всі</em> властивості всіх екземплярів класу. Неможливо динамічно додавати властивості під час виконання програми.</td> + <td>Функція-конструктор чи прототип задають лише <em>початковий набір</em> властивостей. Можна додавати чи видаляти властивості як окремого об'єкту, так певного їх набору.</td> + </tr> + </tbody> +</table> + +<h2 id="Приклад_із_робітником_Employee">Приклад із робітником "Employee"</h2> + +<p>Надалі у розділі ієрархія робітників, що показана на наступному зображенні.</p> + +<div style="display: table-row;"> +<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;"> +<p>Проста ієрархія об'єктів, сформована із наступних елементів:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p> +</div> + +<div style="display: table-cell; vertical-align: middle; padding: 10px;"> +<ul> + <li><code>Employee</code> має поля <code>name</code> (із порожнім рядком в якості значення за замовчуванням) та <code>dept</code> (у якого значення за замовчуванням — "general").</li> + <li><code>Manager</code> заснований на <code>Employee</code>. Він додає властивість <code>reports</code> (за замовчуванням містить порожній масив для об'єктів <code>Employee</code>).</li> + <li><code>WorkerBee</code> також заснований на <code>Employee</code>. Він додає властивість <code>projects</code> (за замовчуванням містить порожній масив, призначений для рядків).</li> + <li><code>SalesPerson</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>quota</code> (за замовчуванням — число 100). Він також перевизначае властивість <code>dept</code>, надаючи їй нове значенням "sales" (що означає, що всі <code>SalesPerson</code> відносяться до одного відділу).</li> + <li><code>Engineer</code> заснований на <code>WorkerBee</code>. Він додає властивість <code>machine</code> (значення за замовчуванням — порожній рядок) і перевизначає властивість <code>dept</code>, задаючи їй значення "engineering".</li> +</ul> +</div> +</div> + +<h2 id="Створення_ієрархії">Створення ієрархії</h2> + +<p>Існує декілька способів задати відповідні функції-конструктори, щоб реалізувати ієрархію робітників. Який спосіб обрати — значною мірою залежить від того, які можливості ви хочете отримати від вашого додатку.</p> + +<p>Цей розділ показує, як використовувати дуже прості (і відносно негнучкі) визначення, і таким чином демонструє, як отримати робочий механізм наслідування. У цих визначеннях не можна задати жодного значення при створенні об'єкту — він отримає властивості із значеннями за замовчуванням, які можна буде змінити пізніше.</p> + +<p>У реальному додатку ви б, ймовірно, визначали конструктор, що дозволяє задавати значення в момент створення об'єкту (докладніше у <a href="#Більш_гнучкі_конструктори">Більш гнучкі конструктори</a>). А наразі ці прості визначення покажуть, як загалом відбувається наслідування.</p> + +<p>Наступні визначення <code>Employee</code> у Java та JavaScript ідентичні. Єдина відмінність — у Java необхідно явно вказувати тип кожної властивості, на відміну від JavaScript (так як Java — <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">мова із сильною типізацією</a>, а JavaScript — із слабкою).</p> + +<div class="twocolumns"> +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function Employee() { + this.name = ''; + this.dept = 'general'; +} +</pre> + +<h4 id="Java"><br> + Java</h4> + +<pre class="brush: java">public class Employee { + public String name = ""; + public String dept = "general"; +} +</pre> +</div> + +<p>Визначення <code>Manager</code> і <code>WorkerBee</code> показують різницю у заданні батьківського об'єкту. У JavaScript ви додаєте екземпляр прототипу в якості значення поля <code>prototype</code> функції-конструктора, а потім перевизначаєте <code>prototype.constructor</code>, щоб це поле вказувало на функцію-конструктор. Ви можете це зробити в будь-якому місці після визначення конструктора. У Java надклас задається всередині визначення класу, і його ніяк не можна змінити зовні визначення класу.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">function Manager() { + Employee.call(this); + this.reports = []; +} +Manager.prototype = + Object.create(Employee.prototype); +<span class="diff_add">Manager.prototype.constructor = Manager;</span> + +function WorkerBee() { + Employee.call(this); + this.projects = []; +} +WorkerBee.prototype = + Object.create(Employee.prototype); +<span class="diff_add">WorkerBee.prototype.constructor = WorkerBee;</span> +</pre> + +<h4 id="Java_2"><br> + Java</h4> + +<pre class="brush: java">public class Manager extends Employee { + public Employee[] reports = + new Employee[0]; +} + + + +public class WorkerBee extends Employee { + public String[] projects = new String[0]; +} + + +</pre> +</div> + +<p> </p> + +<p>Визначення <code>Engineer</code> та <code>SalesPerson</code> створюють об'єкти, що наслідуються вже від <code>WorkerBee</code>, а, отже, і від <code>Employee</code>. Об'єкти цих типів мають властивості всіх об'єктів вище у ланцюжку наслідування. Надодачу, ці визначення перевизначають успадковані значення поля <code>dept</code>, змінюючи їх відповідно до нового типу.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js">function SalesPerson() { + WorkerBee.call(this); + this.dept = 'sales'; + this.quota = 100; +} +SalesPerson.prototype = + Object.create(WorkerBee.prototype); +<span class="diff_add">SalesPerson.prototype.constructor = SalesPerson;</span> + +function Engineer() { + WorkerBee.call(this); + this.dept = 'engineering'; + this.machine = ''; +} +Engineer.prototype = + Object.create(WorkerBee.prototype); +<span class="diff_add">Engineer.prototype.constructor = Engineer;</span> +</pre> + +<h4 id="Java_3"><br> + Java</h4> + +<pre class="brush: java">public class SalesPerson extends WorkerBee { + public String dept = "sales"; + public double quota = 100.0; +} + + +public class Engineer extends WorkerBee { + public String dept = "engineering"; + public String machine = ""; +} + +</pre> +</div> + +<p>Таким чином, ви можете створювати екземпляри об'єктів із уже заданими значеннями для своїх властивостей. Наступна схема ілюструє застосування цих JavaScript-визначень для створення нових об'єктів, і демонструє значення їх властивостей.</p> + +<div class="note"> +<p><strong>Зауважте, що:</strong> термін <em><em>екземпляр</em></em> має специфічний технічний зміст у мовах із класовою моделлю. У цих мовах екземпляр являється окремою реалізацією класу і корінним чином відрізняється від його визначення. У JavaScript, "екземпляр" не має такого особливого змісту, бо сам JavaScript не має такої значної відмінності класів від їх реалізацій. Однак, у контексті JavaScript, "екземпляр" може неформально позначати об'єкт, створений певною функцією-конструктором. Тому, згідно наступного прикладу, можна неформально стверджувати, що <code><code>jane</code></code> є екземпляром класу <code><code>Engineer</code></code>. Так само, хоча терміни <em><em>предок</em>, <em>нащадок</em>, дочірній і батьківський класи</em> не мають формального смісту в JavaScript, їх можна застосовувати для позначення об'єктів, що знаходяться вище чи нижче у ланцюжку прототипів.</p> +</div> + +<h3 id="Створення_об'єктів_за_допомогою_простих_визначень">Створення об'єктів за допомогою простих визначень</h3> + +<div class="twocolumns"> +<h4 id="Ієрархія_об'єктів">Ієрархія об'єктів</h4> + +<p>Наступна ієрархія створена за допомогою коду у правій частині.</p> + +<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p> + +<h4 id="Окремі_об'єкти_Jim_Sally_Mark_Fred_Jane_etc._Екземпляри_створені_конструктором">Окремі об'єкти = Jim, Sally, Mark, Fred, Jane, etc.<br> + "Екземпляри", створені конструктором</h4> + +<pre class="brush: js">var jim = new Employee; +// Дужки можна опустити, якщо +// конструктор не приймає аргументів. +// jim.name має значення '' +// jim.dept має значення 'general' + +var sally = new Manager; +// sally.name має значення '' +// sally.dept має значення 'general' +// sally.reports має значення [] + +var mark = new WorkerBee; +// mark.name має значення '' +// mark.dept має значення 'general' +// mark.projects має значення [] + +var fred = new SalesPerson; +// fred.name має значення '' +// fred.dept має значення 'sales' +// fred.projects має значення [] +// fred.quota має значення 100 + +var jane = new Engineer; +// jane.name має значення '' +// jane.dept має значення 'engineering' +// jane.projects має значення [] +// jane.machine має значення '' +</pre> +</div> + +<h2 id="Властивості_(поля)_об'єкту">Властивості (поля) об'єкту</h2> + +<p>Ця секція описує, як об'єкти наслідують властивості інших об'єктів у ланцюжку прототипів, і що відбувається, якщо додати властивість під час виконання програми.</p> + +<h3 id="Наслідування_властивостей">Наслідування властивостей</h3> + +<p>Припустимо, такою інструкцією ви створили екземпляр <code>WorkerBee</code> — об'єкт <code>mark</code>:</p> + +<pre class="brush: js">var mark = new WorkerBee; +</pre> + +<p>Коли JavaScript бачить оператор <code>new</code>, він створює загальний об'єкт і неявно встановлює <code>WorkerBee.prototype</code> значенням внутрішньої властивості [[Prototype]], і передає цей новий об'єкт як значення <em><code>this</code></em> до фукнції-конструктора <code>WorkerBee</code>. Внутрішня властивість [[Prototype]] визначає ланцюжок прототипів для виводу значень полів. Коли ці властивості задані, JavaScript повертає новий об'єкт, а інструкція присвоєння задає його в якості значення змінної <code>mark</code>.</p> + +<p>Описаний процес явно не встановлює значення об'єкту <code>mark</code> для властивостей (<em>локальні</em> значення), які <code>mark</code> наслідує з ланцюжка прототипів. Коли ви запитуєте значення властивості, JavaScript в першу чергу перевіряє наявність цього значення у об'єкті, і повертає його, якщо знаходить. Якщо ж ні, JavaScript перевіряє весь ланцюжок прототипів (за допомогою властивості [[Prototype]]). Якщо об'єкт у ланцюжку має таку властивість - буде повернуто її значення (або повідомлення, що об'єкт не має такої властивості, якщо її все-таки не було знайдено). Таким чином, об'єкт <code>mark</code> має наступні властивості і значення:</p> + +<pre class="brush: js">mark.name = ''; +mark.dept = 'general'; +mark.projects = []; +</pre> + +<p>З конструктора Employee об'єкту <code>mark</code> призначено локальні значення для властивостей <code>name</code> та <code>dept</code>, а з конструктора <code>WorkerBee</code> — значення властивості <code>projects</code>. Таким чином ми отримуємо наслідування властивостей і їх значень у JavaScript. Деякі тонкощі цього процесу додатково висвітлені у <a href="#Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</a>.</p> + +<p>Так як ці конструктори не дозволяють задати специфічні для екземпляру значення, це являється загальним прикладом. В якості значень властивостей взяті значення за замовчуванням, що розповсюджуються на всі об'єкти, створені на основі <code>WorkerBee</code>. Звісно, значення цих властивостей можна змінити. Наприклад, так можна встановити їх значення для об'єкту <code>mark</code>:</p> + +<pre class="brush: js">mark.name = 'Doe, Mark'; +mark.dept = 'admin'; +mark.projects = ['navigator'];</pre> + +<h3 id="Додавання_властивостей">Додавання властивостей</h3> + +<p>У JavaScript, можна додавати властивості до об'єкту безпосередно під час виконання. Ви не обмежені застосуванням лише властивостей, наданих конструктором. Щоб додати нову властивість до окремого об'єкту, просто призначте йому нове значення, як наведено далі:</p> + +<pre class="brush: js">mark.bonus = 3000; +</pre> + +<p>Тепер об'єкт <code>mark</code> містить властивість <code>bonus</code>, проте більше ніхто із <code>WorkerBee</code> її не має.</p> + +<p>Якщо додати нову властивість до об'єкту-прототипу іншого конструктора, то ця властивість з'явиться у всіх об'єктів, що наслідують властивості від прототипу. Наприклад, ось так можна додати властивість <code>specialty</code> всім робітникам:</p> + +<pre class="brush: js">Employee.prototype.specialty = 'none'; +</pre> + +<p>Як тільки JavaScript виконає інструкцію, об'єкт <code>mark</code> матиме властивість <code>specialty</code> із значенням <code>"none"</code>. Наступна схема ілюструє ефект від додавання цієї властивості до прототипу <code>Employee</code> і її перевизначення у прототипі <code>Engineer</code>.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> + <small><strong>Додавання властивостей</strong></small></p> + +<h2 id="Більш_гнучкі_конструктори">Більш гнучкі конструктори</h2> + +<p>Наведені раніше функції-конструктори не дозволяють задавати значення під час створенні екземпляру. Як і у Java, можна надати конструктору аргументи для ініціалізації значень властивостей у об'єктів. Наступна схема показує один із способів це зробити.</p> + +<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> + <small><strong>Задання властивостей у конструкторі, варіант 1</strong></small></p> + +<p>Таблиця далі показує визначення цих об'єктів у Java і JavaScript.</p> + +<div class="twocolumns"> +<h4 id="JavaScript_4">JavaScript</h4> + +<h4 id="Java_4">Java</h4> +</div> + +<div class="twocolumns"> +<pre class="brush: js">function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; +} +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class Employee { + public String name; + public String dept; + public Employee () { + this("", "general"); + } + public Employee (String name) { + this(name, "general"); + } + public Employee (String name, String dept) { + this.name = name; + this.dept = dept; + } +} +</pre> +</div> + +<div class="twocolumns"> +<pre class="brush: js">function WorkerBee(projs) { + + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this(new String[0]); + } + public WorkerBee (String[] projs) { + projects = projs; + } +} +</pre> +</div> + +<div class="twocolumns"> +<pre class="brush: js"> +function Engineer(mach) { + this.dept = 'engineering'; + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<pre class="brush: java">public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> +</div> + +<p>Ці JavaScript-визначення застосовують особливу ідіому для задання значення за замовчуванням:</p> + +<pre class="brush: js">this.name = name || ''; +</pre> + +<p>Логічний оператор АБО у JavaScript (<code>||</code>) обчислює перше значення. Якщо результат можна привести до <code>true</code>, оператор повертає його, а інакше - значення другого аргументу. Таким чином, ця стрічка коду перевіряє, чи <code>name</code> має якесь корисне значення для властивості <code>name</code>. Якщо так — <code>this.name</code> отримує її значення, а інакше значенням <code>this.name</code> стає порожній рядок. У розділі ця ідіома застосовується для стислості; однак вона може бути неочевидною на перший погляд.</p> + +<div class="note"> +<p><strong>Зауважте, що:</strong> це може працювати не так, як очікується, якщо конструктор викликається із аргументами, що приводяться до <code><code>false</code></code> (число <code>0</code> і порожній рядок (<code><code>""</code></code>). У цьому випадку буде обрано значення за замовчуванням.</p> +</div> + +<p>Таким чином можливо задати значення для властивостей на місці, безпосередньо під час створення екземпляру об'єкту. Наступною інструкцією ви можете створити новий екземпляр <code>Engineer</code>:</p> + +<pre class="brush: js">var jane = new Engineer('belau'); +</pre> + +<p>Властивості <code>Jane</code> тепер виглядають так:</p> + +<pre class="brush: js">jane.name == ''; +jane.dept == 'engineering'; +jane.projects == []; +jane.machine == 'belau'; +</pre> + +<p>Зауважте, що таким визначенням ви не можете задати первинне значення для наслідуваного поля <code>name</code>. Для задання значення наслідуваним властивостям у JavaScript, необхідно додати трохи більше коду до фукнції-конструктора.</p> + +<p>Поки що фукнція-конструктор створила загальний об'єкт, задала на місці властивості і значення нового об'єкту. Можна зробити, щоб конструктор додавав властивості безпосередньо викликаючи конструктор об'єкта, вищого у ієрархії прототипів. Власне, як зображено у наступній схемі.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> + <small><strong>Задання властивостей у конструкторі, варіант 2</strong></small></p> + +<p>Розгляньмо детальніше одне із цих визначень. Ось новий конструктор <code>Engineer</code>:</p> + +<pre class="brush: js">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> + +<p>Припустимо, ви ось так створюєте новий об'єкт <code>Engineer</code>:</p> + +<pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +</pre> + +<p>Тут JavaScript виконує наступні кроки:</p> + +<ol> + <li>Оператор <code>new</code> створює загальний об'єкт і задає <code>Engineer.prototype</code> значенням його властивості <code>__proto__</code> .</li> + <li>Оператор <code>new</code> передає новий об'єкт у конструктор <code>Engineer</code> в якості значення <code>this</code>.</li> + <li>Конструктор створює нову властивість <code>base</code> для цього об'єкту і присвоює їй значення конструктора <code>WorkerBee</code>. Так конструктор <code>WorkerBee</code> стає методом об'єкту <code>Engineer</code>. Назва властивості <code>base</code> не є чимось особливим. Ви можете використати будь-яке дозволене ім'я властивості, а <code>base</code> просто звучить змістовно для даного випадку.</li> + <li>Конструктор викликає метод <code>base</code>, передаючи в нього два своїх аргументи (<code>"Doe, Jane"</code> і <code>["navigator", "javascript"]</code>) і новий рядок <code>"engineering"</code>. Явно вказаний <code>"engineering"</code> у конструкторі означає, що всі об'єкти <code>Engineer</code> матимуть одне значення для наслідуваної властивості <code>dept</code>, і це значення заміщує успадковане від <code>Employee</code>.</li> + <li>Так як метод <code>base</code> належить <code>Engineer</code>, всередині виклику <code>base</code> JavaScript прив'язує значення <code>this</code> до об'єкту, створеного на першому етапі. Таким чином функція <code>WorkerBee</code>, в свою чергу, передає аргументи <code>"Doe, Jane"</code> та <code>"engineering"</code> до конструктора <code>Employee</code>. Після повернення з конструктора <code>Employee</code> функція <code>WorkerBee</code> задає останнім аргументом поле <code>projects</code>.</li> + <li>Після повернення з методу <code>base</code> конструктор <code>Engineer</code> ініціалізовує властивість <code>machine</code> об'єкту значенням <code>"belau"</code>.</li> + <li>Після повернення з конструктору JavaScript присвоює новий об'єкт змінній <code>jane</code>.</li> +</ol> + +<p>Може скластися враження, що, викликавши конструтктор <code>WorkerBee</code> зсередини конструктора <code>Engineer</code>, ви вкажете наслідування відповідно для об'єктів <code>Engineer</code>. Насправді виклик конструктора <code>WorkerBee</code> гарантує, що об'єкт <code>Engineer</code> матиме всі властивості, вказані у всіх викликаних конструкторах. Однак, якщо пізніше додати нові властивості до прототипів <code>Employee</code> чи <code>WorkerBee</code>, вони не будуть успадковані об'єктом <code>Engineer</code>. Припустимо, у нас є наступні інструкції:</p> + +<pre class="brush: js">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +Employee.prototype.specialty = 'none'; +</pre> + +<p>Об'єкт <code>jane</code> не наслідує властивість <code>specialty</code>. Вам все ще необхідно явно вказувати прототип для гарантії динамічного наслідування. Натомість розглянемо такий набір інструкцій:</p> + +<pre class="brush: js">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; +var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); +Employee.prototype.specialty = 'none'; +</pre> + +<p>Тепер значенням властивості <code>specialty</code> об'єкту <code>jane</code> являється "none".</p> + +<p>Іншим способом наслідування являється використання методів <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> чи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>. Ось дві еквівалентні ділянки коду:</p> + +<div class="twocolumns"> +<pre class="brush: js">function Engineer(name, projs, mach) { + this.base = WorkerBee; + this.base(name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> + +<pre class="brush: js">function Engineer(name, projs, mach) { + WorkerBee.call(this, name, 'engineering', projs); + this.machine = mach || ''; +} +</pre> +</div> + +<p>Використання методу <code>call()</code> дає більш чисту реалізацію, так як <code>base</code> більше не потрібен.</p> + +<h2 id="Іще_раз_про_наслідування_властивостей">Іще раз про наслідування властивостей</h2> + +<p>У попередніх частинах було описано, як конструктори і прототипи JavaScript дозволяють реалізовувати ієрархію та наслідування. Ця частина розглядає деякі тонкощі, які, можливо, не були очевидними у наведеному вище тексті.</p> + +<h3 id="Локальні_і_успадковані_змінні">Локальні і успадковані змінні</h3> + +<p>Коли ви викликаєте властивість, JavaScript виконує наступні кроки (як описано вище у главі):</p> + +<ol> + <li>Перевіряє наявність цієї змінної прямо в об'єкті, і повертає її значення, якщо знаходить.</li> + <li>Якщо її немає серед локальних змінних - перевіряє ланцюжок прототипів (використовуючи властивість <code>__proto__</code>).</li> + <li>Якщо прототип у ланцюжку має значення вказаної властивості — повертає це значення.</li> + <li>Якщо вказана властивість не знайдена — значить, об'єкт її не має.</li> +</ol> + +<p>Результат виконання цих кроків залежить від того, як ви задаєте значення і об'єкти. Перший приклад мав такі визначення:</p> + +<pre class="brush: js">function Employee() { + this.name = ''; + this.dept = 'general'; +} + +function WorkerBee() { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p>Припустимо, враховуючи ці визначення, що наступною інструкцією ви створили екземпляр <code>WorkerBee</code> у змінній <code>amy</code>:</p> + +<pre class="brush: js">var amy = new WorkerBee; +</pre> + +<p>Об'єкт <code>amy</code> має одну локальну змінну — <code>projects</code>. Значення властивостей <code>name</code> та <code>dept</code> насправді не належать <code>amy</code>, і тому виводяться через поле її поле <code>__proto__</code>. Отже, <code>amy</code> має такі значення властивостей:</p> + +<pre class="brush: js">amy.name == ''; +amy.dept == 'general'; +amy.projects == []; +</pre> + +<p>Тепер припустимо, що ви змінили значення властивості <code>name</code> у прототипі, асоційованому з <code>Employee</code>:</p> + +<pre class="brush: js">Employee.prototype.name = 'Unknown'; +</pre> + +<p>На перший погляд, можна очікувати, що нове значення пошириться на всі екземпляри <code>Employee</code>. Однак, це не так.</p> + +<p>При створенні <em>будь-якого</em> екземпляру об'єкту <code>Employee</code>, цей екземпляр отримає <strong>локальне значення</strong> для властивості <code>name</code> (порожній рядок). Тобто, коли ми задаємо прототип <code>WorkerBee</code> шляхом створення нового об'єкту <code>Employee</code>, <code>WorkerBee.prototype</code> має локальне значення властивості <code>name</code>. Отже, коли JavaScript шукає властивість <code>name</code> об'єкту <code>amy</code> (екземпляр <code>WorkerBee</code>), він знаходить місцеве значення властивості у <code>WorkerBee.prototype</code>. І тому він не намагається шукати далі в ланцюжку прототипів до <code>Employee.prototype</code>.</p> + +<p>Якщо ви хочете змінити значення властивості під час виконання, та ще й так, щоб воно поширилось на всіх нащадків об'єкту, слід визначати це значення не у конструкторі об'єкту, а у прототипі конструктора. Припустимо, наприклад, що ви змінили попередній варіант реалізації на такий:</p> + +<pre class="brush: js">function Employee() { + this.dept = 'general'; // Зауважте, що тут немає this.name (локальної змінної) +} +Employee.prototype.name = ''; // Одна копія + +function WorkerBee() { + this.projects = []; +} +WorkerBee.prototype = new Employee; + +var amy = new WorkerBee; + +Employee.prototype.name = 'Unknown'; +</pre> + +<p>У цьому випадку, властивість <code>amy</code> <code>name</code> стане "Unknown".</p> + +<p>Як ілюструють ці приклади, якщо вам потрібно і мати значення за замовчуванням для властивостей об'єктів, і можливість змінювати ці значення за замовчуванням під час виконання, слід задавати властивості у прототипі конструктора, а не у самому конструкторі.</p> + +<h3 id="Визначення_відносин_екземпляру">Визначення відносин екземпляру</h3> + +<p>Пошук властивості у JavaScript виконується серед власних властивостей об'єкту, і, якщо властивість з даним іменем не була знайдена, пошук переходить всередину особливої властивості <code>__proto__</code>. Це відбувається рекурсивно, і цей процес називається "пошук у ланцюжку прототипів".</p> + +<p>Властивість <code>__proto__</code> встановлюється у момент конструювання об'єкту; вказує вона на властивість <code>prototype</code> конструктора. Тобто вираз <code>new Foo()</code> створює об'єкт із<code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Відповідно, зміни у <code class="moz-txt-verticalline">Foo.prototype</code> впливають на пошук властивості всіх об'єктів, створених через <code>new Foo()</code>.</p> + +<p>Кожен об'єкт має властивість <code>__proto__</code> (за винятком <code>Object</code>); кожна функція має властивість <code>prototype</code>. Тобто об'єкти можуть відноситись один до одного згідно "прототипного наслідування". Перевірити наслідування можна, порівнюючи властивість <code>__proto__</code> об'єкту із об'єктом <code>prototype</code> функції. JavaScript надає скорочення: оператор <code>instanceof</code> порівнює об'єкт і функцію, і повертає <font face='consolas,"Liberation Mono",courier,monospace'>true</font>, якщо об'єкт є нащадком прототипу функції. Наприклад:</p> + +<pre class="brush: js">var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> + +<p>Для більш докладного прикладу, припустимо, що у нас є набір визначень із показаних у <a href="#Наслідування_властивостей">Наслідування властивостей</a>. Створімо об'єкт <code>Engineer</code>:</p> + +<pre class="brush: js">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji'); +</pre> + +<p>Наступні вирази стосовно цього об'єкту являються істинними:</p> + +<pre class="brush: js">chris.__proto__ == Engineer.prototype; +chris.__proto__.__proto__ == WorkerBee.prototype; +chris.__proto__.__proto__.__proto__ == Employee.prototype; +chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +</pre> + +<p>Враховуючи це, ми можемо ось так написати функцію <code>instanceOf</code>:</p> + +<pre class="brush: js">function instanceOf(object, constructor) { + object = object.__proto__; + while (object != null) { + if (object == constructor.prototype) + return true; + if (typeof object == 'xml') { + return constructor.prototype == XML.prototype; + } + object = object.__proto__; + } + return false; +} +</pre> + +<div class="note"><strong>Зверніть увагу, що:</strong> ця реалізація додатково перевіряє відношення об'єкту до типу "xml", щоб обійти особливість уявлення XML-об'єктіву останніх версіях JavaScript. Дивіться {{ bug(634150) }}, якщо вам потрібна докладніша інформація.</div> + +<p>Наступні вирази із визначеною вище функцією instanceOf являються істинними:</p> + +<pre class="brush: js">instanceOf(chris, Engineer) +instanceOf(chris, WorkerBee) +instanceOf(chris, Employee) +instanceOf(chris, Object) +</pre> + +<p>Проте такий приклад в результаті видасть <code>false</code>:</p> + +<pre class="brush: js">instanceOf(chris, SalesPerson) +</pre> + +<h3 id="Глобальна_інформація_у_конструкторах">Глобальна інформація у конструкторах</h3> + +<p>Потрібно бути уважним при створенні конструкторів, якщо ви задаєте в них якісь глобальні дані. Наприклад, припустимо, нам потрібно автоматично задавати унікальний ID кожному новому робітнику. Ви можете об'явити <code>Employee</code> так:</p> + +<pre class="brush: js">var idCounter = 1; + +function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + this.id = idCounter++; +} +</pre> + +<p>Згідно цього визначення <code>Employee</code>, під час створення нового екземпляру конструктор призначає йому наявний ID, і потім підвищує на 1 глобальний лічильник ID. Тобто, якщо виконати наступні інструкції, <code>victoria.id</code> буде 1, а <code>harry.id</code> — 2:</p> + +<pre class="brush: js">var victoria = new Employee('Pigbert, Victoria', 'pubs'); +var harry = new Employee('Tschopik, Harry', 'sales'); +</pre> + +<p>На перший погляд все чудово. Однак, <code>idCounter</code> змінюється кожного разу, коли створюється екземпляр <code>Employee</code>, байдуже для чого. Якщо створити всю ієрархію <code>Employee</code>, наведену у цьому розділі, конструктор <code>Employee</code> буде викликано кожного разу при заданні прототипу. Припустимо, у нас є наступний код:</p> + +<pre class="brush: js">var idCounter = 1; + +function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + this.id = idCounter++; +} + +function Manager(name, dept, reports) {...} +Manager.prototype = new Employee; + +function WorkerBee(name, dept, projs) {...} +WorkerBee.prototype = new Employee; + +function Engineer(name, projs, mach) {...} +Engineer.prototype = new WorkerBee; + +function SalesPerson(name, projs, quota) {...} +SalesPerson.prototype = new WorkerBee; + +var mac = new Engineer('Wood, Mac'); +</pre> + +<p>Далі припустимо, що визначення, що опущені тут мають властивість <code>base</code> і викликають констуктор, що знаходиться вище у ланцюжку прототипів. У цьому випадку, у момент створення об'єкту <code>mac</code>, <code>mac.id</code> буде 5.</p> + +<p>Залежно від застосування, таке додаткове збільшення лічильника може мати, чи не мати значення. Якщо для вас важливе справжнє значення лічильника, один із варіантів рішення матиме такий вигляд конструктора:</p> + +<pre class="brush: js">function Employee(name, dept) { + this.name = name || ''; + this.dept = dept || 'general'; + if (name) + this.id = idCounter++; +} +</pre> + +<p>При створенні екземпляру <code>Employee</code> для застосування в якості прототипу аргументи не задаються. Згідно цього визначення конструктора, коли ми не передаємо аргументи, конструктор не задає значення <code>id</code> та не оновлює лічильник. Таким чином, щоб отримати <code>Employee</code> із призначеним <code>id</code>, необхідно задати ім'я робітника. У цьому випадку <code>mac.id</code> буде дорівнювати 1.</p> + +<p>Інший варіант <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>—</span> створювати копію об'єкту-прототипу <span style='background-color: #eeeeee; color: #333333; direction: ltr; display: inline !important; float: none; font-family: consolas,monaco,"Andale Mono",monospace; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 24px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre;'>Employee</span>, щоб потім присвоювати її WorkerBee:</p> + +<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype); +// instead of WorkerBee.prototype = new Employee +</pre> + +<h3 id="Відсутність_множинного_успадкування">Відсутність множинного успадкування</h3> + +<p>Деякі об'єктно-орієнтовані мови програмування дозволяють множинне успадкування. Це означає, що об'єкт може наслідувати поля і властивості від незалежних батьківських об'єктів. JavaScript не підтримує такий тип наслідування.</p> + +<p>Наслідування значення властивості відбувається в момент виконання програми, коли JavaScript шукає значення властивості у ланцюжку прототипів об'єкту. Так як об'єкт має лише один прототип, JavaScript не може виконувати наслідування від більш ніж одного прототипного ланцюжка.</p> + +<p>У JavaScript ми можемо мати функцію-конструктор, що викликає два чи більше інших конструкторів під час виконання. Це дає певну ілюзію множинного наслідування. Наприклад, припустимо, у нас є такі інструкції:</p> + +<pre class="brush: js">function Hobbyist(hobby) { + this.hobby = hobby || 'scuba'; +} + +function Engineer(name, projs, mach, hobby) { + this.base1 = WorkerBee; + this.base1(name, 'engineering', projs); + this.base2 = Hobbyist; + this.base2(hobby); + this.machine = mach || ''; +} +Engineer.prototype = new WorkerBee; + +var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo'); +</pre> + +<p>Далі припустимо, що визначення <code>WorkerBee</code> відповідає вказаному вище у розділі. У цьому випадку об'ект <code>dennis</code> матиме такі значення властивостей:</p> + +<pre class="brush: js">dennis.name == 'Doe, Dennis'; +dennis.dept == 'engineering'; +dennis.projects == ['collabra']; +dennis.machine == 'hugo'; +dennis.hobby == 'scuba'; +</pre> + +<p>Тобто <code>dennis</code> отримує поле <code>hobby</code> з конструктора <code>Hobbyist</code>. Однак, якщо ми потім додамо нову властивість до прототипу конструктора <code>Hobbyist</code>:</p> + +<pre class="brush: js">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd']; +</pre> + +<p>Об'єкт <code>dennis</code> не успадковує цю нову властивість.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> diff --git a/files/uk/web/javascript/guide/functions/index.html b/files/uk/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..fcc14568b3 --- /dev/null +++ b/files/uk/web/javascript/guide/functions/index.html @@ -0,0 +1,655 @@ +--- +title: Функції +slug: Web/JavaScript/Guide/Functions +translation_of: Web/JavaScript/Guide/Functions +--- +<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p> + +<p>Функції є одним з фундаментальних блоків у JavaScript. Функція є процедурою JavaScript, це набір команд, які виконують ту чи іншу задачу, або розраховують значення. Щоб використати функцію, ви маєте десь її визначити у тій області видимості, звідки ви бажаєте її викликати.</p> + +<p>Щоб дізнатись більше, дивіться <a href="/en-US/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a>.</p> + +<h2 id="Визначення_функції">Визначення функції</h2> + +<h3 id="Оголошення_функції">Оголошення функції</h3> + +<p><strong>Визначення функції</strong> (також називається <strong>оголошенням функції</strong>, або <strong>функціональним оператором</strong>) складається з ключового слова <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> , після чого слідує:</p> + +<ul> + <li>Ім'я функції.</li> + <li>В дужках йде список параметрів, які передаються функції.</li> + <li>Команди JavaScript, які визначають фунцію, поміщаються у фігурні дужки <code>{ }</code>.</li> +</ul> + +<p>Для прикладу, наступний код визначає просту функцію на ім'я <code>square</code>:</p> + +<pre class="brush: js">function square(number) { + return number * number; +}</pre> + +<p><font face="sans-serif, Arial, Verdana, Trebuchet MS">Функція </font><code>square</code> приймає один параметр <code>number</code>. Функція складається з однієї команди, що повертає результат множення агрумента (<code>number</code>) самого на себе. Оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> визначає, яке значення повертає функція:</p> + +<pre class="brush: js">return number * number; +</pre> + +<p><span id="result_box" lang="uk"><span>Примітивні параметри (такі, як число) передаються функціям <strong>за</strong> <strong>значенням</strong>;</span> <span>значення передається до функції, але якщо функція змінює значення параметра, <strong>ця зміна не відображається глобально або у функції виклику.</strong></span></span></p> + +<p><span id="result_box" lang="uk"><span>Якщо ви передаєте об'єкт (тобто, непримітивне значення, наприклад, {{jsxref ("Array")}} або визначений користувачем об'єкт) у якості параметра, і функція змінює властивості об'єкта, ця зміна видима за межами функції</span><span>, як показано на наступному прикладі:</span></span></p> + +<pre class="brush: js">function myFunc(theObject) { + theObject.make = 'Toyota'; +} + +var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +var x, y; + +x = mycar.make; // x отримує значення "Honda" + +myFunc(mycar); +y = mycar.make; // y отримує значення "Toyota" + // (властивість make була змінена функцією) +</pre> + +<h3 id="Функціональні_вирази"><span class="short_text" id="result_box" lang="uk"><span>Функціональні вирази</span></span></h3> + +<p><span id="result_box" lang="uk"><span>Хоча оголошення функцій вище синтаксично є виразом, функції також можуть бути створені за допомогою функціональних виразів.</span> <span>Така функція може бути <strong>анонімною</strong>;</span> їй не обов'язково мати ім'я<span>.</span> <span>Наприклад, </span></span><code>square</code><span lang="uk"><span> можна визначити як:</span></span></p> + +<pre class="brush: js">var square = function(number) { return number * number; }; +var x = square(4); // x gets the value 16</pre> + +<p><span id="result_box" lang="uk"><span class="alt-edited">Проте, ім'я може бути надане у функціональному виразі, і може бути використане всередині функції, щоб звернутися до самої себе, або в налагоджувач, щоб визначити функцію в трасуванні стеку:</span></span></p> + +<pre class="brush: js">var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); }; + +console.log(factorial(3)); +</pre> + +<p><span id="result_box" lang="uk"><span>Функціональні вирази зручні при передачі функції як аргументу до іншої функції.</span> <span>Наступний приклад показує функцію map, яка повинна отримати функцію як перший аргумент, а масив як другий аргумент.</span></span></p> + +<pre class="brush: js">function map(f, a) { + var result = [], // Створення нового масиву + i; + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p><span id="result_box" lang="uk"><span class="alt-edited">У наступному коді наша функція приймає функцію, визначену функціональним виразом, та виконує її для кожного елемента масиву, отриманого в якості другого аргументу.</span></span></p> + +<pre class="brush: js">function map(f, a) { + var result = []; // Створення нового масиву + var i; // <span class="short_text" id="result_box" lang="uk"><span>Оголошення змінної</span></span> + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +var f = function(x) { + return x * x * x; +} +var numbers = [0,1, 2, 5,10]; +var cube = map(f,numbers); +console.log(cube);</pre> + +<p>Функція повертає: [0, 1, 8, 125, 1000].</p> + +<p><span id="result_box" lang="uk"><span>У JavaScript функція може бути визначена на основі умови</span></span>. <span id="result_box" lang="uk"><span>Наприклад, наступне визначення функції визначає</span></span> <code>myFunc</code> тільки якщо <code>num</code> дорівнює 0:</p> + +<pre class="brush: js">var myFunc; +if (num === 0) { + myFunc = function(theObject) { + theObject.make = 'Toyota'; + } +}</pre> + +<p class="brush: js"><span lang="uk"><span>На додаток до визначення функцій, як описано тут, ви також можете використовувати конструктор {{jsxref ("Function")}} для створення функцій з текстового рядка під час виконання, як і </span></span>{{jsxref("eval", "eval()")}}<span lang="uk"><span>.</span></span></p> + +<p><span id="result_box" lang="uk"><span class="alt-edited"><strong>Метод</strong> - це функція, яка є властивістю об'єкта.</span> <span>Докладніше про об'єкти та методи у</span></span> <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>.</p> + +<h2 id="Виклик_функцій">Виклик функцій</h2> + +<p><span id="result_box" lang="uk"><span>Визначення функції не виконує її.</span> <span>Визначення функції просто називає функцію і вказує, що робити, коли викликається функція.</span> <span><strong>Виклик</strong> функції, власне, виконує вказані дії з вказаними параметрами.</span> <span>Наприклад, якщо ви визначили функцію</span></span> <code>square</code>, <span class="short_text" id="result_box" lang="uk"><span>ви можете викликати її наступним чином:</span></span></p> + +<pre class="brush: js">square(5); +</pre> + +<p><span id="result_box" lang="uk"><span>Наведений вираз викликає функцію з аргументом 5. Функція виконує свої команди та повертає значення 25.</span></span></p> + +<p><span id="result_box" lang="uk"><span class="alt-edited">Функції повинні бути в області видимості під час виклику, але оголошення функції може підніматись (бути записаним нижче виклику), як у цьому прикладі:</span></span></p> + +<pre class="brush: js">console.log(square(5)); +/* ... */ +function square(n) { return n * n; } +</pre> + +<p><span id="result_box" lang="uk"><span class="alt-edited">Областю видимості функції є функція, в якій вона оголошена, або вся програма, якщо вона оголошена на верхньому рівні.</span></span></p> + +<div class="blockIndicator note"> +<p><strong>Примітка:</strong> <span id="result_box" lang="uk"><span>Це працює тільки при визначенні функції за допомогою наведеного вище синтаксису</span></span> (тобто <code>function funcName(){}</code>). <span id="result_box" lang="uk"><span>Наведений нижче код не буде працювати.</span> <span>Це означає, що підняття функції працює тільки для оголошення функції, а не для функціонального виразу.</span></span></p> +</div> + +<pre class="brush: js">console.log(square); // square піднімається з початковим значенням undefined. +console.log(square(5)); // TypeError: square is not a function +var square = function(n) { + return n * n; +} +</pre> + +<p><span id="result_box" lang="uk"><span>Аргументи функції не обмежені рядками та числами.</span> <span>Ви можете передавати цілі об'єкти у функцію.</span></span> Функція <code>show_props()</code> (визначена у <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>) <span id="result_box" lang="uk"><span>є прикладом функції, яка приймає об'єкт у якості аргумента.</span></span></p> + +<p><span id="result_box" lang="uk"><span class="alt-edited">Функція може викликати сама себе.</span> <span class="alt-edited">Наприклад, ось функція, яка обчислює факторіал рекурсивно:</span></span></p> + +<pre class="brush: js">function factorial(n) { + if ((n === 0) || (n === 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p><span id="result_box" lang="uk"><span>Далі ви можете обчислити факторіали від одного до п'яти наступним чином:</span></span></p> + +<pre class="brush: js">var a, b, c, d, e; +a = factorial(1); // a отримує значення 1 +b = factorial(2); // b отримує значення 2 +c = factorial(3); // c отримує значення 6 +d = factorial(4); // d отримує значення 24 +e = factorial(5); // e отримує значення 120 +</pre> + +<p><span id="result_box" lang="uk"><span>Є й інші способи виклику функцій.</span> <span>Часто бувають випадки, коли функцію потрібно назвати динамічно, або кількість аргументів функції може змінюватись, або контекстом виклику функції повинен бути заданий певний об'єкт, визначений під час виконання.</span> <span class="alt-edited">Виявляється, що функції самі є об'єктами, і ці об'єкти, у свою чергу, мають методи</span></span> (див. об'єкт {{jsxref("Function")}}). Один з них, метод {{jsxref("Function.apply", "apply()")}} , <span class="short_text" id="result_box" lang="uk"><span>може бути використаний для досягнення цієї мети.</span></span></p> + +<h2 id="Область_видимості_функції">Область видимості функції</h2> + +<p>Змінні, визначені всередині функції, недоступні ззовні цієї функції, бо змінна визначається тільки у області видимості функції. Проте, функція може звертатись до усіх змінних та функцій, визначених у області видимості, де вона оголошена. Іншими словами, функція, оголошена у глобальній області видимості, може звертатись до усіх змінних, оголошених у глобальній області видимості. Функція, оголошена всередині іншої функції, має доступ до усіх змінних, оголошених у батьківській функції, а також до будь-якої змінної, до якої має доступ батьківська функція.</p> + +<pre class="brush: js">// Ці змінні визначені у глобальній області видимості +var num1 = 20, + num2 = 3, + name = 'Chamahk'; + +// Ця функція визначена у глобальній області видимості +function multiply() { + return num1 * num2; +} + +multiply(); // Повертає 60 + +// Приклад вкладеної функції +function getScore() { + var num1 = 2, + num2 = 3; + + function add() { + return name + ' scored ' + (num1 + num2); + } + + return add(); +} + +getScore(); // Повертає "Chamahk scored 5" +</pre> + +<h2 id="Область_видимості_та_стек_функції">Область видимості та стек функції</h2> + +<h3 id="Рекурсія">Рекурсія</h3> + +<p>A function can refer to and call itself. There are three ways for a function to refer to itself:</p> + +<ol> + <li>the function's name</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> + <li>an in-scope variable that refers to the function</li> +</ol> + +<p>For example, consider the following function definition:</p> + +<pre class="brush: js">var foo = function bar() { + // statements go here +}; +</pre> + +<p>Within the function body, the following are all equivalent:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>A function that calls itself is called a <em>recursive function</em>. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). For example, the following loop:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" is the loop condition + // do stuff + x++; +} +</pre> + +<p>can be converted into a recursive function and a call to that function:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") + return; + // do stuff + loop(x + 1); // the recursive call +} +loop(0); +</pre> + +<p>However, some algorithms cannot be simple iterative loops. For example, getting all the nodes of a tree structure (e.g. the <a href="/en-US/docs/DOM">DOM</a>) is more easily done using recursion:</p> + +<pre class="brush: js">function walkTree(node) { + if (node == null) // + return; + // do something with node + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>Compared to the function <code>loop</code>, each recursive call itself makes many recursive calls here.</p> + +<p>It is possible to convert any recursive algorithm to a non-recursive one, but often the logic is much more complex and doing so requires the use of a stack. In fact, recursion itself uses a stack: the function stack.</p> + +<p>The stack-like behavior can be seen in the following example:</p> + +<pre class="brush: js">function foo(i) { + if (i < 0) + return; + console.log('begin: ' + i); + foo(i - 1); + console.log('end: ' + i); +} +foo(3); + +// Output: + +// begin: 3 +// begin: 2 +// begin: 1 +// begin: 0 +// end: 0 +// end: 1 +// end: 2 +// end: 3</pre> + +<h3 id="Nested_functions_and_closures">Nested functions and closures</h3> + +<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a <em>closure</em>. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p> + +<p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p> + +<p>To summarize:</p> + +<ul> + <li>The inner function can be accessed only from statements in the outer function.</li> +</ul> + +<ul> + <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li> +</ul> + +<p>The following example shows nested functions:</p> + +<pre class="brush: js">function addSquares(a, b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2, 3); // returns 13 +b = addSquares(3, 4); // returns 25 +c = addSquares(4, 5); // returns 41 +</pre> + +<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p> + +<pre class="brush: js">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it +result = fn_inside(5); // returns 8 + +result1 = outside(3)(5); // returns 8 +</pre> + +<h3 id="Preservation_of_variables">Preservation of variables</h3> + +<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p> + +<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p> + +<h3 id="Multiply-nested_functions">Multiply-nested functions</h3> + +<p>Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (Why it is called "chaining" will be explained later.)</p> + +<p>Consider the following example:</p> + +<pre class="brush: js">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // logs 6 (1 + 2 + 3) +</pre> + +<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>. This can be done because:</p> + +<ol> + <li><code>B</code> forms a closure including <code>A</code>, i.e. <code>B</code> can access <code>A</code>'s arguments and variables.</li> + <li><code>C</code> forms a closure including <code>B</code>.</li> + <li>Because <code>B</code>'s closure includes <code>A</code>, <code>C</code>'s closure includes <code>A</code>, <code>C</code> can access both <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code> in that order.</li> +</ol> + +<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p> + +<h3 id="Name_conflicts">Name conflicts</h3> + +<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:</p> + +<pre class="brush: js">function outside() { + var x = 5; + function inside(x) { + return x * 2; + } + return inside; +} + +outside()(10); // returns 20 instead of 10 +</pre> + +<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> + +<h2 id="Closures">Closures</h2> + +<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the inner function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> + +<pre class="brush: js">var pet = function(name) { // The outer function defines a variable called "name" + var getName = function() { + return name; // The inner function has access to the "name" variable of the outer function + } + return getName; // Return the inner function, thereby exposing it to outer scopes +} +myPet = pet('Vivie'); + +myPet(); // Returns "Vivie" +</pre> + +<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> + +<pre class="brush: js">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) { + sex = newSex; + } + } + } +} + +var pet = createPet('Vivie'); +pet.getName(); // Vivie + +pet.setName('Oliver'); +pet.setSex('male'); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent" and "encapsulated" data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> + +<pre class="brush: js">var getCode = (function() { + var apiCode = '0]Eal(eh&2'; // A code we do not want outsiders to be able to modify... + + return function() { + return apiCode; + }; +}()); + +getCode(); // Returns the apiCode +</pre> + +<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p> + +<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" + return { + setName: function(name) { // Enclosed function also defines a variable called "name" + name = name; // ??? How do we access the "name" defined by the outer function ??? + } + } +} +</pre> + +<h2 id="Using_the_arguments_object">Using the arguments object</h2> + +<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> + +<pre class="brush: js">arguments[i] +</pre> + +<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> + +<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> + +<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> + +<pre class="brush: js">function myConcat(separator) { + var result = ''; // initialize list + var i; + // iterate through arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> + +<pre class="brush: js">// returns "red, orange, blue, " +myConcat(', ', 'red', 'orange', 'blue'); + +// returns "elephant; giraffe; lion; cheetah; " +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// returns "sage. basil. oregano. pepper. parsley. " +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley'); +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that it has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p> +</div> + +<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<p>Starting with ECMAScript 2015, there are two new kinds of parameters: default parameters and rest parameters.</p> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p> + +<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiply</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p> + +<pre class="brush: js">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a * b; +} + +multiply(5); // 5 +</pre> + +<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5); // 5</pre> + +<p>For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p> + +<pre class="brush: js">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Arrow_functions">Arrow functions</h2> + +<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (previously, and now incorrectly known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> + +<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p> + +<h3 id="Shorter_functions">Shorter functions</h3> + +<p>In some functional patterns, shorter functions are welcome. Compare:</p> + +<pre class="brush: js">var a = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +var a2 = a.map(function(s) { return s.length; }); + +console.log(a2); // logs [8, 6, 7, 9] + +var a3 = a.map(s => s.length); + +console.log(a3); // logs [8, 6, 7, 9] +</pre> + +<h3 id="Lexical_this">Lexical <code>this</code></h3> + +<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> + +<pre class="brush: js">function Person() { + // The Person() constructor defines `this` as itself. + this.age = 0; + + setInterval(function growUp() { + // In nonstrict mode, the growUp() function defines `this` + // as the global object, which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> + +<pre class="brush: js">function Person() { + var self = this; // Some choose `that` instead of `self`. + // Choose one and be consistent. + self.age = 0; + + setInterval(function growUp() { + // The callback refers to the `self` variable of which + // the value is the expected object. + self.age++; + }, 1000); +}</pre> + +<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> + +<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> + +<pre class="brush: js">function Person() { + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the person object + }, 1000); +} + +var p = new Person();</pre> + +<h2 id="Predefined_functions">Predefined functions</h2> + +<p>JavaScript has several top-level, built-in functions:</p> + +<dl> + <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> + <dd> + <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> + </dd> + <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> + <dd> + <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> + </dd> + <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> + <dd> + <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> + </dd> + <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> + <dd> + <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 2015, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> + </dd> + <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> + <dd> + <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> + </dd> + <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> + </dd> + <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> + <dd> + <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Вирази_та_оператори")}}</p> diff --git a/files/uk/web/javascript/guide/grammar_and_types/index.html b/files/uk/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..415aaaff62 --- /dev/null +++ b/files/uk/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,716 @@ +--- +title: Граматика та типи +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - JavaScript + - 'l10n:priority' + - Посібник +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> + +<p class="summary">В цьому розділі розглядаються основи граматики JavaScript, оголошення змінних, типи даних і літерали.</p> + +<h2 id="Основи">Основи</h2> + +<p>Більшість свого синтаксису JavaScript запозичає у Java, C та C++, але на нього вплинули також Awk, Perl і Python.</p> + +<p>Мова JavaScript <strong>чутлива до регістру</strong> і використовує <span class="short_text" id="result_box" lang="uk"><span>набір</span> <span>символів</span></span> <strong>Unicode</strong>. Наприклад, слово Früh (що німецькою означає "рано") може використовуватись як ім'я змінної.</p> + +<pre class="brush: js notranslate">let Früh = "foobar"</pre> + +<p>Проте, змінна <code>früh</code> не одне й те саме, що <code>Früh</code>, тому що мова JavaScript чутлива до регістру.</p> + +<p>У JavaScript команди називаються <a href="/uk/docs/Glossary/Інструкція">інструкціями</a> і розділяються крапкою з комою (;).</p> + +<p>Немає необхідності ставити крапку з комою після інструкції, якщо вона написана на своєму власному рядку. Проте, якщо ви бажаєте мати більш, ніж одну інструкцію в рядку, тоді потрібно їх відділяти крапкою з комою.</p> + +<div class="blockIndicator note"> +<p>ECMAScript також має правила для автоматичної вставки крапки з комою (<a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Автоматична_вставка_крапки_з_комою">ASI</a>, Automatic semicolon insertion) в кінці інструкцій. (Щоб отримати більше інформації, перегляньте детальну довідку щодо <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar">лексичної граматики</a> JavaScript.)</p> +</div> + +<p>Однак, вважається найкращою практикою завжди ставити крапку з комою після інструкції, навіть якщо вона не вимагається. Ця практика зменшує шанси отримати помилки у коді.</p> + +<p>Текст скрипта у JavaScript сканується зліва направо та конвертується у послідовність вхідних елементів, якими є <em>токени</em>, <em>керівні символи, символи розриву рядка, коментарі,</em> або <a href="/uk/docs/Glossary/Whitespace">пробільні символи</a>. (Символи пробілів, табуляції та символи нового рядка вважаються пробільними символами).</p> + +<h2 id="Коментарі">Коментарі</h2> + +<p>Синтаксис <strong>коментарів</strong> такий самий, як у C++ та багатьох інших мовах програмування:</p> + +<pre class="brush: js notranslate">// однорядковий коментар + +/* а це довший, +* багаторядковий коментар +*/ + +/* Однак, не можна, /* вкладати коментарі */ SyntaxError */</pre> + +<p>Коментарі поводяться як пробіли та відкидаються під час виконання скрипта.</p> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: Ви можете також побачити третій тип синтаксису коментарів на початку деяких файлів JavaScript, який виглядає приблизно так: <code>#!/usr/bin/env node.</code></p> + +<p>Цей синтаксис називається <strong>шебанг</strong>, це спеціальний коментар, який використовується, щоб вказати шлях до певного рушія JavaScript, який має виконати скрипт. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Коментарі_шебанг">коментарі шебанг</a> для більш детальної інформації.</p> +</div> + +<h2 id="Оголошення">Оголошення</h2> + +<p>Існують три види оголошення змінних у JavaScript.</p> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Оголошує змінну та необов'язково ініціалізує її значенням.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.</dd> + <dt>{{jsxref("Statements/const","const")}}</dt> + <dd>Оголошує константу блочної області видимості, доступну тільки для читання.</dd> +</dl> + +<h3 id="Змінні">Змінні</h3> + +<p><span id="result_box" lang="uk"><span>Ви використовуєте змінні, як символічні імена для значень у вашій програмі.</span></span> Назви змінних, <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатори</a>, відповідають певним правилам.</p> + +<p>Ідентифікатори JavaScript повинні починатися з літери, знаку підкреслення (<code>_</code>) або знаку долара (<code>$</code>). Н<span class="short_text" id="result_box" lang="uk"><span>аступні символи можуть також бути цифрами</span></span> (<code>0</code>-<code>9</code>).</p> + +<p>Оскільки мова JavaScript чутлива до регістру, літери включають у себе символи від "<code>A</code>" до "<code>Z</code>" (у верхньому регістрі) та символи від "<code>a</code>" до "<code>z</code>" (у нижньому регістрі).</p> + +<p>Ви можете використовувати більшу частину літер ISO 8859-1 або Юнікоду, такі як <code>å</code> та <code>ü</code> у ідентифікаторах. (Для більш детальної інформації дивіться <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">цю статтю</a>.) Ви також можете використовувати <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду </a>в якості символів у ідентифікаторах.</p> + +<p>Деякі приклади допустимих назв: <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code> та <code>_name</code>.</p> + +<h3 id="Оголошення_змінних">Оголошення змінних</h3> + +<p>Ви можете оголосити змінну двома шляхами:</p> + +<ul> + <li>За допомогою ключого слова {{jsxref("Statements/var", "var")}}. Наприклад,<code>var x = 42</code>. <span id="result_box" lang="uk"><span>Цей синтаксис може використовуватись для оголошення як <strong>локальних</strong>, так і <strong>глобальних </strong>змінних, в залежності від <em>контексту виконання</em>.</span></span></li> + <li><span class="short_text" id="result_box" lang="uk"><span>За допомогою ключового слова {{jsxref("Statements/const", "const")}} або {{jsxref("Statements/let", "let")}}.Наприклад, <code>let y = 13</code>. Цей синтаксис може бути використаний для оголошення локальної змінної блочної області видимості. (Дивіться <a href="#Область_видимості_змінної">Область видимості змінної</a> нижче).</span></span></li> +</ul> + +<p>Ви також можете просто присвоїти змінній значення. Наприклад, <code>x = 42</code>. Ця форма створює <strong><a href="/uk/docs/Web/JavaScript/Reference/Statements/var#Опис">неоголошену глобальну</a> </strong>змінну. Вона також генерує попередження у JavaScript. Неоголошені глобальні змінні можуть привести до неочікуваної поведінки. Тому не рекомендується використовувати неоголошені глобальні змінні.</p> + +<h3 id="Обчислення_змінних">Обчислення змінних</h3> + +<p>Змінна, оголошена за допомогою <code>var</code> або <code>let</code>, без початкового значення, має значення {{jsxref("undefined")}}.</p> + +<p>Спроба звернення до неоголошеної змінної призведе до викидання винятку {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js notranslate">var a; +console.log('Значення a дорівнює ' + a); // Значення a дорівнює undefined + +console.log('Значення b дорівнює ' + b); // Значення b дорівнює undefined +var b; +// Це може спантеличити, доки ви не прочитаєте 'Підняття змінних' нижче + +console.log('Значення c дорівнює ' + c); // Uncaught ReferenceError: c is not defined + +let x; +console.log('Значення x дорівнює ' + x); // Значення x дорівнює undefined + +console.log('Значення y дорівнює ' + y); // Uncaught ReferenceError: y is not defined +let y; </pre> + +<p><span id="result_box" lang="uk"><span>Можна використати <code>undefined</code>, щоб з'ясувати, чи має змінна значення.</span> <span>У наступному коді змінній <code>input</code> не присвоюється значення, і умова в операторі </span></span><code><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else" title="uk/docs/JavaScript/Reference/Statements/if...else">if</a></code> набуває значення<span lang="uk"><span> <code>true</code>.</span></span></p> + +<pre class="brush: js notranslate">var input; +if (input === undefined) { + doThis(); +} else { + doThat(); +}</pre> + +<p>Значення <code>undefined</code> поводить себе як <code>false</code>, коли використовується в булевому контексті. Наприклад, <span id="result_box" lang="uk"><span>наступний код виконує функцію <code>myFunction</code>, оскільки елемент <code>myArray</code> дорівнює <code>undefined</code></span></span>:</p> + +<pre class="brush: js notranslate">var myArray = []; +if (!myArray[0]) myFunction(); </pre> + +<p>Значення <code>undefined</code> перетворюється на <code>NaN</code>, коли використовується у числовому контексті.</p> + +<pre class="brush: js notranslate">var a; +a + 2; // Обчислюється як NaN</pre> + +<p>Коли ви обчислюєте змінну {{jsxref("null")}}, значення null поводить себе як 0 у числовому контексті, та як false - у булевому. Наприклад:</p> + +<pre class="brush: js notranslate">var n = null; +console.log(n * 32); // Виведе 0 у консоль</pre> + +<h3 id="Область_видимості_змінної"> Область видимості змінної</h3> + +<p><span id="result_box" lang="uk">Коли ви оголошуєте змінну за межами будь-яких функцій, вона називається <em>глобальною</em> змінною, позаяк доступна для будь-якого іншого коду у поточному документі. Коли ви оголошуєте змінну всередині функції, вона називається <em>локальною </em>змінною, позаяк доступна лише в межах цієї функції.</span></p> + +<p>JavaScript до ECMAScript 2015 не має <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Блокова_інструкція">блочної</a> області видимості. Точніше, змінна, оголошена всередині блоку, є локальною для <em>функції</em> <em>(або глобальної області видимості)</em>, в якій розміщено цей блок.</p> + +<p>Наприклад, наступний код виведе <code>5</code>, тому що областю видимості <code>x</code> є глобальний контекст (або контекст функції, якщо код є частиною функції). Область видимості <code>x</code> не обмежується найближчим блоком конструкції <code>if</code>.</p> + +<pre class="brush: js notranslate">if (true) { + var x = 5; +} +console.log(x); // x дорівнює 5</pre> + +<p><span id="result_box" lang="uk"><span>Ця поведінка змінюється при використанні ключового слова <code>let</code>, (представленого в ECMAScript 2015).</span></span></p> + +<pre class="brush: js notranslate">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y is not defined</pre> + +<h3 id="Підняття_змінних">Підняття змінних</h3> + +<p><span id="result_box" lang="uk"><span>Ще однією особливістю змінних у JavaScript є те, що ви можете посилатися на змінну, оголошену пізніше, і це не призведе до винятку.</span></span></p> + +<p>Ця концепція має назву <strong>підняття (hoisting)</strong>. Змінні у JavaScript, <span id="result_box" lang="uk"><span>в певному сенсі, "піднімаються" на вершину функції або інструкції у коді.</span></span> <span id="result_box" lang="uk"><span>Однак, підняті змінні повертають значення</span></span> <code>undefined</code>. <span id="result_box" lang="uk"><span>Тому, навіть якщо ви оголосите та ініціалізуєте змінну після використання або посилання на цю змінну, вона все одно поверне <code>undefined</code>.</span></span></p> + +<pre class="brush: js notranslate">/** +* Приклад 1 +*/ +console.log(x === undefined); // true +var x = 3; + +/** +* Приклад 2 +*/ +// поверне значення undefined +var myvar = 'моє значення'; + +(function() { + console.log(myvar); // undefined + var myvar = 'локальна змінна'; +})();</pre> + +<p><span id="result_box" lang="uk"><span>Наведені вище приклади будуть тлумачитися так само, як</span></span>:</p> + +<pre class="brush: js notranslate">/** +* Приклад 1 +*/ +var x; +console.log(x === undefined); // true +x = 3; + +/** +* Приклад 2 +*/ +var myvar = 'моє значення'; + +(function() { + var myvar; + console.log(myvar); // undefined + myvar = 'локальна змінна'; +})();</pre> + +<p>Враховуючи підняття, всі оголошення через <code>var</code> всередині функції мають знаходитись якомога ближче до вершини функції. Така практика покращує зрозумілість коду.</p> + +<p>В ECMAScript 2015 <code>let</code> та <code>const</code> <strong>підіймаються, але не ініціалізуються. </strong>Результатом посилання на змінну в блоці до оголошення цієї змінної буде {{jsxref("ReferenceError")}}, тому що змінна перебуває у "тимчасовій мертвій зоні" від початку блоку до обробки її оголошення.</p> + +<pre class="brush: js notranslate">console.log(x); // ReferenceError +let x = 3;</pre> + +<h3 id="Підняття_функції">Підняття функції</h3> + +<p>У випадку з функціями, лише <em>оголошення</em> функцій піднімаються, але <em>не</em> <em>функціональні вирази</em>.</p> + +<pre class="brush: js notranslate">/* Оголошення функції */ + +foo(); // "ква" + +function foo() { + console.log('ква'); +} + +/* Функціональний вираз */ + +baz(); // TypeError: baz is not a function + +var baz = function() { + console.log('кря'); +};</pre> + +<h3 id="Глобальні_змінні">Глобальні змінні</h3> + +<p>Глобальні змінні насправді є властивостями <em>глобального об'єкта</em>.</p> + +<p>На веб-сторінках глобальним об'єктом є <code><a href="/uk/docs/Web/API/Window">window</a></code>, тому ви можете присвоювати значення та звертатись до глобальних змінних за допомогою синтаксису <code>window.<em>змінна</em></code>.</p> + +<p>Відповідно, ви можете звертатись до глобальних змінних, оголошених в одному вікні або фреймі, з іншого вікна або фрейму, вказавши при цьому ім'я цього вікна чи фрейму. Наприклад, якщо в документі оголошена змінна під назвою <code>phoneNumber</code>, ви можете звернутися до неї з <code>iframe</code> так: <code>parent.phoneNumber</code>.</p> + +<h3 id="Константи">Константи</h3> + +<p>Ви можете створити іменовану константу, призначену лише для читання, за допомогою ключового слова {{jsxref("Statements/const", "const")}}.</p> + +<p>Синтаксис ідентифікатора константи такий самий, як і синтаксис будь-якого ідентифікатора змінної: він повинен починатися з літери, підкреслення або знака долара (<code>$</code>) та може містити букви, цифри або символи підкреслення.</p> + +<pre class="brush: js notranslate">const PI = 3.14;</pre> + +<p>Константа не може змінювати значення за допомогою присвоювання або повторно оголошуватися протягом виконання скрипта. Вона повинна бути ініціалізована початковим значенням.</p> + +<p>Правила області видимості для констант такі ж, як для <code>let</code>-змінних блочної області видимості. Якщо ключове слово <code>const</code> не вказане, ідентифікатор вважається ідентифікатором змінної.</p> + +<p>Не можна оголошувати константу з таким самим ім'ям, як функція або змінна в тій самій області видимості. Наприклад:</p> + +<pre class="brush: js notranslate">// ЦЕ СПРИЧИНИТЬ ПОМИЛКУ +function f() {}; +const f = 5; + +// ЦЕ ТАКОЖ СПРИЧИНИТЬ ПОМИЛКУ +function f() { + const g = 5; + var g; + + //інструкції +}</pre> + +<p>Однак, властивості об'єктів, присвоєних константам, не захищені, тому наступна інструкція виконується без проблем.</p> + +<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'значення'}; +MY_OBJECT.key = 'іншезначення';</pre> + +<p>Вміст будь-якого масиву також не захищений, тому наступна інструкція виконується без проблем.</p> + +<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS']; +MY_ARRAY.push('JAVASCRIPT'); +console.log(MY_ARRAY); //виведе ['HTML','CSS','JAVASCRIPT']; +</pre> + +<h2 id="Структури_та_типи_даних">Структури та типи даних</h2> + +<h3 id="Типи_даних">Типи даних</h3> + +<p>Останній стандарт ECMAScript визначає вісім типів даних:</p> + +<ul> + <li>Сім типів даних, які є <a href="/uk/docs/Glossary/Primitive">простими типами</a>: + + <ol> + <li><a href="/uk/docs/Glossary/Boolean">Boolean</a>. <code>true</code> та <code>false</code>.</li> + <li><a href="/uk/docs/Glossary/null">null</a>. Спеціальне ключове слово, що позначає нульове значення. (Оскільки мова JavaScript чутлива до регістру, <code>null</code> це <em>не </em>одне й те саме, що <code>Null</code>, <code>NULL</code> чи будь-який інший варіант).</li> + <li><a href="/uk/docs/Glossary/undefined">undefined</a>. Властивість верхнього рівня, чиє значення не визначене.</li> + <li><a href="/uk/docs/Glossary/Number">Number</a>. Число, ціле або з плаваючою комою. Наприклад: <code>42</code> або <code>3.14159</code>.</li> + <li><a href="/uk/docs/Glossary/BigInt">BigInt</a>. Ціле число з довільною точністю. Наприклад: <code>9007199254740992n</code>.</li> + <li><a href="/uk/docs/Glossary/String">String</a>. Послідовність символів, що представляють текстове значення. Наприклад: "Привіт".</li> + <li><a href="/uk/docs/Glossary/Символ">Symbol</a> (новий в ECMAScript 2015). Тип даних, екземпляри якого унікальні та незмінні.</li> + </ol> + </li> + <li>та <a href="/uk/docs/Glossary/Object">Object</a></li> +</ul> + +<p>Хоча цих типів даних відносно мало, вони дозволяють виконувати корисні функції у ваших застосунках. {{jsxref("Object", "Об'єкти")}} та {{jsxref("Function", "функції")}} - це інші фундаментальні елементи мови. Об'єкти можна розглядати, як іменовані контейнери для значень, а функції - як процедури, які може виконувати скрипт. </p> + +<h3 id="Перетворення_типів_даних">Перетворення типів даних</h3> + +<p>JavaScript - це мова з <em>динамічною типізацією</em>. Це означає, що при оголошенні змінної не потрібно вказувати, якого вона типу. Це також означає, що типи даних автоматично перетворюються за необхідності під час виконання скрипта. </p> + +<p>Наприклад, ви можете визначити змінну таким чином:</p> + +<pre class="brush: js notranslate">var answer = 42;</pre> + +<p>А пізніше цій же змінній можна присвоїти значення рядкового типу даних, наприклад:</p> + +<pre class="brush: js notranslate">answer = 'Дякуємо за рибу...';</pre> + +<p>Оскільки JavaScript динамічно типізована мова, таке присвоєння не спричиняє повідомлення про помилку.</p> + +<h3 id="Числа_та_оператор">Числа та оператор '+'</h3> + +<p>У виразах, що включають числові й рядкові значення з оператором <code>+</code>, JavaScript перетворює числові значення на рядки. Наприклад:</p> + +<pre class="brush: js notranslate">x = 'Відповідь - ' + 42 // "Відповідь - 42" +y = 42 + ' - це відповідь' // "42 - це відповідь"</pre> + +<p>З усіма іншими операторами JavaScript <em>не</em> перетворює числові значення на рядки. Наприклад:</p> + +<pre class="brush: js notranslate">'37' - 7 // 30 +'37' + 7 // "377"</pre> + +<h3 id="Перетворення_рядків_на_числа">Перетворення рядків на числа</h3> + +<p>У випадку, коли значення, що представляє число, є в пам'яті у вигляді рядка, існують методи для перетворення.</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> + <li>{{jsxref("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt</code> повертає тільки цілі числа, тому його використання для десяткових чисел обмежене.</p> + +<div class="blockIndicator note"> +<p>Крім того, найкращою практикою для <code>parseInt</code> є завжди включати параметр <em>radix</em> (основа). Параметр radix вказує, яка система числення має використовуватись.</p> +</div> + +<pre class="brush: js notranslate">parseInt('101', 2) // 5</pre> + +<p>Альтернативним методом отримання числа з рядка є використання оператора <code>+</code> (унарний плюс):</p> + +<pre class="brush: js notranslate">'1.1' + '1.1' // '1.11.1' +(+'1.1') + (+'1.1') // 2.2 +// Зауважте: дужки не обов'язкові, вони додаються для ясності</pre> + +<h2 id="Літерали">Літерали</h2> + +<p><em>Літерали</em> (<em>англ.</em> literal - "буквальний") відображають значення у JavaScript. Це фіксовані значення, не змінні, які ви буквально вказуєте у сценарії. У цьому розділі описані наступні типи літералів:</p> + +<ul> + <li><a href="#Масивні_літерали">Масивні літерали</a></li> + <li><a href="#Булеві_літерали">Булеві літерали</a></li> + <li><a href="#Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</a></li> + <li><a href="#Числові_літерали">Числові літерали</a></li> + <li><a href="#Обєктні_літерали">Об'єктні літерали</a></li> + <li><a href="#Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів</a></li> + <li><a href="#Рядкові_літерали">Рядкові літерали</a></li> +</ul> + +<h3 id="Масивові_літерали">Масивові літерали</h3> + +<p>Масивовий літерал - це список з нуля чи більше виразів, які представляють елементи масиву, вкладений у квадратні дужки (<code>[]</code>). Коли ви створюєте масив, використовуючи масивовий літерал, він ініціалізується вказаними значеннями в якості своїх елементів, а його довжина дорівнює кількості вказаних аргументів.</p> + +<p>Наступний приклад створює масив <code>coffees</code> (кава) з трьома елементами та довжиною, що дорівнює три:</p> + +<pre class="brush: js notranslate">let coffees = ['Французька', 'Колумбійська', 'Кона'];</pre> + +<div class="note"> +<p><strong>Заувага:</strong> Літерал масиву - це тип <em>об'єктного ініціалізатора</em>. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Використання_обєктних_ініціалізаторів" title="uk/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Використання об'єктних ініціалізаторів</a>.</p> +</div> + +<p>Якщо масив створюється за допомогою літералів у скрипті верхнього рівня, JavaScript інтерпретує масив кожного разу, коли обчислює вираз, що містить літерал масиву. На додачу, літерал, що використовується у функції, створюється кожного разу, коли викликається функція.</p> + +<div class="blockIndicator note"> +<p><strong>Заувага:</strong> Літерали масиву також є об'єктами <code>Array</code>. Більш детальну інформацію щодо об'єктів <code>Array</code> дивіться у статтях {{jsxref("Array")}} та <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a>.</p> +</div> + +<h4 id="Додаткові_коми_у_масивних_літералах">Додаткові коми у масивних літералах</h4> + +<p>Вам не обов'язково вказувати всі елементи у масивному літералі. Якщо помістити дві коми поспіль, масив заповнить невказані елементи значеннями <code>undefined</code>. Наступний приклад створює масив <code>fish</code> (риба):</p> + +<pre class="brush: js notranslate">let fish = ['Крилатка', , 'Лящ'];</pre> + +<p>Цей масив має два елементи зі значеннями та один порожній елемент:</p> + +<ul> + <li><code>fish[0]</code> дорівнює "Крилатка",</li> + <li><code>fish[1]</code> дорівнює <code>undefined</code></li> + <li><code>fish[2]</code> дорівнює "Лящ"</li> +</ul> + +<p>Якщо в кінці списку елементів ви додаєте кінцеву кому, вона ігнорується.</p> + +<p>У наступному прикладі довжина масиву дорівнює трьом. Не існує елемента <code>myList[3]</code>. Усі інші коми у списку позначають новий елемент.</p> + +<div class="note"> +<p><strong>Заувага:</strong> коми в кінці можуть створювати помилки у старих версіях веб-переглядачів, тому краще їх видаляти.</p> +</div> + +<pre class="brush: js notranslate">let myList = ['дім', , 'школа', ];</pre> + +<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[0]</code> та <code>myList[2]</code> відсутні.</p> + +<pre class="brush: js notranslate">let myList = [ ,'дім', , 'школа'];</pre> + +<p>У наступному прикладі довжина масиву становить чотири, а елементи <code>myList[1]</code> та <code>myList[3]</code> відсутні. <strong>Ігнорується лише остання кома</strong>.</p> + +<pre class="brush: js notranslate">let myList = ['дім', , 'школа', , ];</pre> + +<p>Розуміння поведінки додаткових ком важливе для розуміння JavaScript як мови. </p> + +<p>Однак, при написанні власного коду, варто однозначно оголошувати відсутні елементи як <code>undefined</code>. Це підвищить зрозумілість та надійність вашого коду.</p> + +<h3 id="Булеві_літерали">Булеві літерали</h3> + +<p>Тип Boolean має два значення літералів: <code>true</code> та <code>false</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Будьте обережні:</strong> Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> зі значеннями true та false об'єкта {{jsxref("Boolean")}}.</p> +Об'єкт Boolean - це обгортка навколо примітивного булевого типу даних. Дивіться {{jsxref("Boolean")}} для отримання додаткової інформації.</div> + +<h3 id="Числові_літерали">Числові літерали</h3> + +<p>Типи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Число"><code>Number</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a> можна виразити у десятковій (основа 10), шістнадцятковій (основа 16), вісімковій (основа 8) та двійковій (основа 2) формі.</p> + +<ul> + <li><em>Десятковий</em> числовий літерал - це послідовність цифр без <code>0</code> (нуля) на початку.</li> + <li>Початковий <code>0</code> (нуль) або <code>0o</code> (або <code>0O</code>) у числовому літералі вказує, що він заданий у <em>вісімковій </em>системі числення. Вісімкове число може включати лише цифри <code><em>0</em></code>–<code><em>7</em></code>.</li> + <li>Символи <code><em>0x</em></code> (або <code>0X</code>) на початку вказують на <em>шістнадцяткове </em>представлення числа. Шістнадцяткове число може включати цифри (<code>0</code>–<code>9</code>) та літери <code>a</code> – <code>f</code> та <code>A</code> – <code>F</code>. (Регістр символу не має значення. Тому: <code>0xa</code> = <code>0xA</code> = <code>10</code> і <code>0xf</code> = <code>0xF</code> = <code>15</code>.)</li> + <li>Символи <code>0b</code> (або <code>0B</code>) на початку вказують на <em>двійкове </em>представлення. Двійкові числа можуть включати лише цифри <code>0</code> і <code>1</code>.</li> +</ul> + +<p>Деякі приклади числових літералів:</p> + +<pre class="brush: js notranslate">0, 117, -345, 123456789123456789n (десятковий, основа 10) +015, 0001, -0o77, 0o777777777777n (вісімковий, основа 8) +0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (шістнадцятковий, "hex" чи основа 16) +0b11, 0b0011, -0b11, 0b11101001010101010101n (двійковий, основа 2)</pre> + +<p>Для отримання додаткової інформації дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Числові_літерали">Числові літерали в довідці про лексичну граматику.</a></p> + +<h3 id="Літерали_з_рухомою_крапкою">Літерали з рухомою крапкою</h3> + +<p>Літерал з рухомою крапкою може мати такі частини:</p> + +<ul> + <li>Десяткове ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним),</li> + <li>Десяткову крапку ("<code>.</code>"),</li> + <li>Дробову частину (інше десяткове число),</li> + <li>Порядок.</li> +</ul> + +<p>Порядок позначається через "<code>e</code>" або "<code>E</code>", за яким іде ціле число, яке може мати знак ("<code>+</code>" або "<code>-</code>" перед ним). Літерал з рухомою крапкою повинен мати принаймні одну цифру, а також або десяткову крапку, або "<code>e</code>" (чи "<code>E</code>").</p> + +<p>Якщо стисло, синтаксис наступний:</p> + +<pre class="brush: js notranslate">[(+|-)][цифри].[цифри][(E|e)[(+|-)]цифри]</pre> + +<p>Наприклад:</p> + +<pre class="brush: js notranslate">3.1415926 +-.123456789 +-3.1E+12 +.1e-23</pre> + +<h3 id="Обєктні_літерали">Об'єктні літерали</h3> + +<p>Об'єктні літерали - це список з нуля або більше пар імен властивостей та асоційованих з ними значень об'єкта, взятих у фігурні дужки (<code>{}</code>).</p> + +<div class="blockIndicator warning"> +<p><strong>Не використовуйте об'єктні літерали на початку інструкції! </strong>Це призведе до помилки (або не поводитиметься так, як ви очікували), оскільки <code>{</code> буде інтерпретуватися як початок блоку.</p> +</div> + +<p>Нижче наведений приклад об’єктного літералу. Перший елемент об'єкта <code>car</code> (автомобіль) визначає властивість <code>myCar</code> та присвоює йому новий рядок "<code>Saturn</code>"; другому елементу, властивості <code>getCar</code>, негайно присвоюється результат виклику функції <code>(carTypes("Honda"))</code>; третій елемент, властивість <code>special</code>, використовує існуючу змінну (<code>sales</code>).</p> + +<pre class="brush: js notranslate">var sales = 'Toyota'; + +function carTypes(name) { + if (name === 'Honda') { + return name; + } else { + return "Вибачте, ми не продаємо автомобілі " + name + "."; + } +} + +var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; + +console.log(car.myCar); // Saturn +console.log(car.getCar); // Honda +console.log(car.special); // Toyota </pre> + +<p>Крім того, ви можете використовувати числовий або рядковий літерал в якості імені властивості, чи вкладати один об'єкт у інший. У наступному прикладі використовуються ці можливості.</p> + +<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda</pre> + +<p><span>Іменем властивості об'єкта може бути будь-який рядок, в тому числі порожній. Якщо ім'я властивості не є дозволеним <a href="/uk/docs/Glossary/ідентифікатор">ідентифікатором</a> JavaScript або числом, воно має бути записане в лапках.</span></p> + +<p>До імен властивостей, які не є дозволеними ідентифікаторами, не можна звертатись через крапку (<code>.</code>), але <em>можна </em>звертатись та присвоювати значення за допомогою подібної до масиву нотації ("<code>[]</code>").</p> + +<pre class="brush: js notranslate">var unusualPropertyNames = { + '': 'Порожній рядок', + '!': 'Бум!' +} +console.log(unusualPropertyNames.''); // SyntaxError: Unexpected string +console.log(unusualPropertyNames['']); // Порожній рядок +console.log(unusualPropertyNames.!); // SyntaxError: Unexpected token ! +console.log(unusualPropertyNames['!']); // Бум!</pre> + +<h4 id="Покращені_обєктні_літерали">Покращені об'єктні літерали</h4> + +<p>У ES2015 об'єктні літерали розширюються для підтримки встановлення прототипу при конструюванні, скороченого запису присвоєнь типу <code>foo: foo</code>, визначення методів, здійснення викликів <code>super</code> та обчислення імен властивостей з виразами.</p> + +<p>Разом вони також зближують об'єктні літерали та оголошення класів (<code>class</code>) і дозволяють об'єктно-орієнтованому дизайну користуватися деякими з тих самих зручностей.</p> + +<pre class="brush: js notranslate">var obj = { + // __proto__ + __proto__: theProtoObj, + // Скорочений запис для ‘handler: handler’ + handler, + // Методи + toString() { + // Виклики super + return 'd ' + super.toString(); + }, + // Обчислювані (динамічні) імена властивостей + [ 'prop_' + (() => 42)() ]: 42 +};</pre> + +<h3 id="Літерали_регулярних_виразів_RegExp">Літерали регулярних виразів (RegExp)</h3> + +<p>Літерал регулярного виразу (який докладно визначається <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">пізніше</a>) - це шаблон, записаний між слешами. Нижче наведено приклад літерала регулярного виразу:</p> + +<pre class="brush: js notranslate">var re = /ab+c/;</pre> + +<h3 id="Рядкові_літерали">Рядкові літерали</h3> + +<p>Рядковий літерал - це нуль або більше символів всередині подвійних (<code>"</code>) або одинарних (<code>'</code>) лапок. Рядок повинен бути позначений лапками одного типу (тобто, або двома одинарними лапками, або двома подвійними лапками).</p> + +<p>Нижче наведено приклади рядкових літералів:</p> + +<pre class="brush: js notranslate">'раз' +"два" +'1234' +'один рядок \n другий рядок' +"Мар'яна має кота"</pre> + +<p>Ви можете викликати будь-який з методів об'єкта {{jsxref("String")}} на рядковому літералі. JavaScript автоматично перетворює рядковий літерал на тимчасовий об'єкт String, викликає метод, а потім прибирає тимчасовий об'єкт String. Ви також можете використовувати властивість <code>String.length</code> з рядковим літералом:</p> + +<pre class="brush: js notranslate">// Надрукує кількість символів у рядку, враховуючи пробіли. +console.log("Мар'яна має кота".length) // В цьому випадку, 16.</pre> + +<p>У ES2015 також доступні <em>шаблонні літерали</em>. Шаблонні літерали пишуться у зворотніх лапках (<code>`</code>) (<a class="external external-icon" href="https://uk.wikipedia.org/wiki/%D0%93%D1%80%D0%B0%D0%B2%D1%96%D1%81_(%D0%B4%D1%96%D0%B0%D0%BA%D1%80%D0%B8%D1%82%D0%B8%D1%87%D0%BD%D0%B8%D0%B9_%D0%B7%D0%BD%D0%B0%D0%BA)" rel="noopener">гравіс</a>) замість одинарних або подвйних лапок.</p> + +<p>Шаблонні рядки надають синтаксичний цукор для конструювання рядків. (Це схоже на функції інтерполяції рядків у Perl, Python та інших).</p> + +<p>За бажанням може бути додано тег, що дозволить налаштовувати побудову рядка, уникаючи атак типу впровадження або конструюючи структури даних більш високого рівня з вмісту рядка.</p> + +<pre class="brush: js notranslate">// Створення базового рядкового літералу +`У JavaScript '\n' - це символ переводу рядка.` + +// Багаторядковий запис +`У JavaScript шаблонні рядки можуть бути записані +у кількох рядках, а текст в одинарних +чи подвійних лапках не може.` + +// Інтерполяція рядків +var name = 'Боб', time = 'сьогодні'; +`Привіт, ${name}, як ти ${time}?` + +// Створення префіксу HTTP-запиту, який інтерпретує заміни та конструювання +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> + +<p>Вам варто використовувати рядкові літерали, якщо немає потреби використовувати конкретно об'єкт String. Дивіться {{jsxref("String")}} для більш детальної інформації про об'єкти <code>String</code>.</p> + +<h4 id="Використання_спеціальних_символів_у_рядках">Використання спеціальних символів у рядках</h4> + +<p>Окрім звичайних символів, ви можете також включати до рядків спеціальні символи, як показано в наступному прикладі.</p> + +<pre class="brush: js notranslate">'один рядок \n другий рядок'</pre> + +<p>Наступна таблиця наводить спеціальні символи, які можна використовувати у рядках JavaScript.</p> + +<table class="standard-table"> + <caption>Таблиця: спеціальні символи JavaScript</caption> + <thead> + <tr> + <th scope="col">Символ</th> + <th scope="col">Значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Нуль-символ</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Повернення на крок</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Зміна сторінки</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Новий рядок</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Повернення каретки</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Горизонтальна табуляція</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Вертикальна табуляція</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Апостроф або одинарні лапки</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Подвійні лапки</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Зворотній слеш</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>Символ у кодуванні Latin-1, який містить до трьох цифр у вісімковій системі числення <em>XXX</em> між <code>0</code> та <code>377</code>. Наприклад, <code>\251</code> - це вісімкова послідовність для знаку охорони авторського права.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td>Символ у кодуванні Latin-1, вказаний двома цифрами у шістнадцятковій системі числення <em>XX</em> між <code>00</code> та <code>FF</code>. Наприклад, <code>\xA9</code> - це шістнадцяткова послідовність для знаку охорони авторського права.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>Символ Юнікоду, вказаний чотирма цифрами у шістнадцятковій системі числення <em>XXXX</em>. Наприклад, <code>\u00A9</code> - це Юнікодова послідовність для знаку охорони авторського права. Дивіться <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Рядкові_літерали">екрановані послідовності Юнікоду</a>.</td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td>Екранування кодів символів Юнікоду. Наприклад, <code>\u{2F804}</code> - це те саме, що й прості екранування Юнікоду <code>\uD87E\uDC04</code>.</td> + </tr> + </tbody> +</table> + +<h4 id="Екранування_символів">Екранування символів</h4> + +<p>Для символів, не перелічених у таблиці, зворотній слеш перед символом ігнорується, але таке використання не рекомендоване, і його слід уникати.</p> + +<p>Ви можете вставити лапки у рядок, поcтавивши перед ними зворотній слеш. Це називається <em>екрануванням</em> лапок. Наприклад:</p> + +<pre class="brush: js notranslate">var quote = "Він читав \"Кремацію Сема Маꥳ\" Р.Дж. Сервіса."; +console.log(quote);</pre> + +<p>Результатом цього буде:</p> + +<pre class="brush: js notranslate">Він читав "Кремацію Сема Маꥳ" Р.Дж. Сервіса.</pre> + +<p>Щоб включити у рядок сам зворотний слеш, ви маєте його екранувати. Наприклад, щоб присвоїти рядкові шлях до файлу <code>c:\temp</code>, використовуйте наступне:</p> + +<pre class="brush: js notranslate">var home = 'c:\\temp';</pre> + +<p>Ви також можете екранувати розрив рядка, поставивши перед ним зворотній слеш. І зворотній слеш, і розрив рядка видаляються зі значення рядка.</p> + +<pre class="brush: js notranslate">var str = 'цей текст \ +розбито \ +на кілька \ +рядків.' +console.log(str); // цей текст розбито на кілька рядків.</pre> + +<p>Хоча у JavaScript немає синтаксису "heredoc", ви можете наблизитися до нього, додавши в кінці кожного рядка екранування розриву рядка та екранування символа нового рядка:</p> + +<pre class="brush: js notranslate">var poem = +'Roses are red,\n\ +Violets are blue.\n\ +Sugar is sweet,\n\ +and so is foo.'</pre> + +<p>ECMAScript 2015 вводить новий тип літералів, а саме <a href="/uk/docs/Web/JavaScript/Reference/Template_literals"><strong>шаблонні літерали</strong></a>. Це додає багато нових функцій, в тому числі багаторядковий запис!</p> + +<pre class="brush: js notranslate" dir="rtl">var poem = +`Roses are red, +Violets are blue. +Sugar is sweet, +and so is foo.` </pre> + +<h2 id="Більше_інформації">Більше інформації</h2> + +<p>Цей розділ фокусується на базовому синтаксисі оголошень та типів. Щоб дізнатися більше про мовні конструкції JavaScript, дивіться також наступні розділи цього посібника:</p> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Потік керування та обробка помилок</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">Вирази та оператори</a></li> +</ul> + +<p>У наступному розділі ми розглянемо конструкції потоку керування та обробку помилок.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/uk/web/javascript/guide/index.html b/files/uk/web/javascript/guide/index.html new file mode 100644 index 0000000000..868d0b7864 --- /dev/null +++ b/files/uk/web/javascript/guide/index.html @@ -0,0 +1,131 @@ +--- +title: Посібник JavaScript +slug: Web/JavaScript/Guide +tags: + - Guide + - JavaScript + - 'l10n:priority' + - Посібник +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Посібник з JavaScript показує, як використовувати мову <a href="/uk/docs/Web/JavaScript">JavaScript</a>, і надає її попередній огляд. Та якщо ви шукаєте детальну інформацію щодо особливостей мови, зазирніть у <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a>.</p> + +<h2 id="Розділи">Розділи</h2> + +<p>Цей посібник поділено на декілька розділів:</p> + +<ul class="card-grid"> + <li><span><a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Introduction">Вступ</a></span> + + <p><a href="/uk/docs/Web/JavaScript/Guide/Introduction#Де_знайти_інформацію_з_JavaScrip">Про посібник</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Що_таке_JavaScript">Що таке JavaScript</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript та Java</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Початок_роботи_із_JavaScript">Початок роботи із JavaScript</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Introduction#Hello_World">Hello World</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types">Граматика і типи</a></span> + <p><a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Базовий синтаксис та коментарі</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Оголошення</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Область видимості змінної</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Підняття зміних</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Структури даних і типи</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Літерали</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Керування потоком та обробка помилок</a></span> + <p><code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Об'єкти помилок</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Проміси</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration">Цикли та ітерації</a></span> + <p><code><a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/ukdocs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Functions">Функції</a></span> + + <p><a href="/uk/docs/Web/JavaScript/Guide/Functions#Defining_functions">Визначення функцій</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Functions#Calling_functions">Виклик функцій</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Functions#Function_scope">Сфера досяжності функції</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Functions#Closures">Закритість</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Аргументи</a> та <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Functions#Function_parameters">параметри</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Стрілкові функції</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators">Вирази та оператори</a></span> + <p><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Призначення</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">порівняння</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Арифметичні оператори</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Побітові</a> та <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">логічні оператори</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Умовний (тернарний) оператор</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа і дати</a></span><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Числові літерали</a> + <p><a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object">Об'єкт <code>Number</code></a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object">Об'єкт <code>Math</code></a><br> + <a href="https://developer.mozilla.org/uk/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object">Об'єкт <code>Date</code></a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting">Форматування тексту</a></span> + <p><a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Рядкові літерали</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#String_objects">Об'єкт <code>String</code></a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Літерали шаблонних рядків</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Інтернаціоналізація</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярні вирази</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections">Індексовані колекції</a></span> + + <p><a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Масиви</a><br> + <a href="/uk/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Типізовані масиви</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Keyed_collections">Класифіковані колекції</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects">Робота з об'єктами</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Об'єкти та властивості</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Створення об'єктів</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Визначення методів</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Деталі об'єктної моделі</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">ООП, засноване на прототипах</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Створення ієрархії об'єктів</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Успадкування</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Проміси</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Гарантії</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Chaining">Ланцюгування</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Поширення помилок</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Composition">Композиція</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises#Timing">Координація</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Ітератори та генератори</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Ітератори</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Ітеровані</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Генератори</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Метапрограмування</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Обробники та пастки</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Відкликаний проксі</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/uk/web/javascript/guide/indexed_collections/index.html b/files/uk/web/javascript/guide/indexed_collections/index.html new file mode 100644 index 0000000000..0c4dfaef25 --- /dev/null +++ b/files/uk/web/javascript/guide/indexed_collections/index.html @@ -0,0 +1,578 @@ +--- +title: Indexed collections +slug: Web/JavaScript/Guide/Indexed_collections +translation_of: Web/JavaScript/Guide/Indexed_collections +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div> + +<p class="summary">У цьому розділ представлено набір даних, упорядкованих за значенням індексу. Це включає масиви та подібні до масиву конструкції, такі як об'єкти {{jsxref("Array")}} та {{jsxref("TypedArray")}} .</p> + +<h2 id="Обєкт_Array"><code>Об'єкт Array</code></h2> + +<p><em>Масив </em>- це упорядкований набір значень, на який ви посилаєтесь з ім'ям та індексом.</p> + +<p>Наприклад, розглянемо масив під назвою <code>emp</code>, який містить імена працівників, індексовані їх числовим номером співробітника. Так <code>emp[1] </code>буде працівником номер один, <code>emp[2] </code>працівником номером два, тощо.</p> + +<p>У JavaScript немає явного типу даних масиву. Однак ви можете використовувати заздалегідь заданий об’єкт <code>Array</code> та його методи для роботи з масивами у ваших програмах. Об'єкт <code>Array</code> має методи маніпулювання масивами різними способами, такими як з'єднання(joining), реверсування(reversing) та сортування. Він має властивість визначати довжину масиву та інші властивості для використання з регулярними виразами.</p> + +<h3 id="Створення_масиву">Створення масиву</h3> + +<p>Наступні операції створюють еквівалентні масиви:</p> + +<pre class="brush: js">let arr = new Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) +let arr = Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) +let arr = [<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +</pre> + +<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> - це список значень елементів масиву. Коли ці значення задані, масив ініціалізується з ними як елементами масиву. Властивість довжина (<code>length)</code> масиву встановлюється рівною кількості аргументів.</p> + +<p>Синтаксис дужки називається "літералом масиву" або "ініціалізатором масиву". Він коротший, ніж інші форми створення масиву, і тому загалом кращий. Докладніше див. <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Літерали_масивів">Літерали масиву</a>.</p> + +<p>Для створення масиву з ненульовою довжиною, але без будь-яких елементів, може бути використане будь-яке з наведеного нижче:</p> + +<pre class="brush: js">// This... +let arr = new Array(<var>arrayLength</var>) + +// ...буде такий саме масив як цей +let arr = Array(<var>arrayLength</var>) + +// Це має точно такий же ефект +let arr = [] +arr.length = <var>arrayLength</var> +</pre> + +<div class="note"> +<p><strong>Примітка:</strong> У наведеному вище коді, <code><var>arrayLength</var></code> повинен бути типу <code>Number</code>. У іншому випадку, буде створений масив з єдиним елементом (з наданим значенням). Виклик <code>arr.length</code> поверне <code><var>arrayLength</var></code>, але масив у дійсності убде містити порожні (undefined) елементи. Запуск циклу {{jsxref("Statements/for...in","for...in")}} для масиву не поверне жодного з елементів масиву.</p> +</div> + +<p>Крім нещодавно означеної змінної, як показано вище, масиви також можуть бути призначені як властивість для нового або існуючого об'єкта:</p> + +<pre class="brush: js">let obj = {} +// ... +obj.prop = [element0, element1, ..., elementN] + +// або +let obj = {prop: [element0, element1, ...., elementN]} +</pre> + +<p>Якщо Ви хочете ініціалізувати масив з єдиним елементом, а цей елемент є <code>Number</code>, ви повинні використовувати синтаксис квадратних дужок. Коли одне значення <code>Number</code> передається конструктору або функції <code>Array()</code>, воно інтерпретується як <code>arrayLength</code>, а не як окремий елемент.</p> + +<pre class="brush: js">let arr = [42] // Створює масив тільки з одним елементом: + // числом 42. + +let arr = Array(42) // Створює масив без жодного елементу + // і довжина масиву arr.length встановлена в 42. + // + // Це еквівалентно наступному: +let arr = [] +arr.length = 42 +</pre> + +<p>Виклик <code>Array(<var>N</var>)</code> призводить до <code>RangeError</code>, якщо <code><var>N</var></code> - це не ціле число, тобто дробова частина якого не дорівнює нулю. Наступний приклад ілюструє таку поведінку.</p> + +<pre class="brush: js">let arr = Array(9.3) // RangeError: Invalid array length +</pre> + +<p>Якщо ваш код потребує створення масивів з окремими елементами довільного типу даних, безпечніше використовувати літерали масиву. Крім того, спершу створіть порожній масив, перш ніж додати до нього один елемент.</p> + +<p>У ES2015 ви можете використовувати статичний метод {{jsxref("Array.of")}} для створення масивів з одним елементом.</p> + +<pre class="brush: js">let wisenArray = Array.of(9.3) // wisenArray містить тільки один елемент 9.3</pre> + +<h3 id="Заповнення_масиву">Заповнення масиву</h3> + +<p>Ви можете заповнити масив, призначивши значення його елементам. Наприклад:</p> + +<pre class="brush: js">let emp = [] +emp[0] = 'Casey Jones' +emp[1] = 'Phil Lesh' +emp[2] = 'August West' +</pre> + +<div class="note"> +<p><strong>Примітка:</strong> Якщо ви подасте неціле значення для оператора масиву в наведеному вище коді, буде створено властивість в об'єкті, що представляє масив, замість елемента масиву.</p> + +<pre class="brush: js">let arr = [] +arr[3.4] = 'Oranges' +console.log(arr.length) // 0 +console.log(arr.hasOwnProperty(3.4)) // true +</pre> +</div> + +<p>Ви також можете заповнити масив під час його створення:</p> + +<pre class="brush: js">let myArray = new Array('Hello', myVar, 3.14159) +// або +let myArray = ['Mango', 'Apple', 'Orange'] +</pre> + +<h3 id="Звернення_до_елементів_масиву">Звернення до елементів масиву</h3> + +<p>Ви звертаєтеся на елементи масиву, використовуючи порядковий номер елемента. Наприклад, припустимо, Ви означуєте такий масив:</p> + +<pre class="brush: js">let myArray = ['Wind', 'Rain', 'Fire'] +</pre> + +<p>Потім Ви звертаєтеся до першого елементу масиву як до <code>myArray[0]</code>, а до другого елементу масиву як до <code>myArray[1]</code>. Індекс елементів починається з нуля.</p> + +<div class="note"> +<p><strong>Примітка:</strong> Оператор масиву (квадратні дужки) також використовуються для доступу до властивостей масиву. (Масиви також є об'єктами в JavaScript). Наприклад:</p> + +<pre class="brush: js">let arr = ['one', 'two', 'three'] +arr[2] // three +arr['length'] // 3 +</pre> +</div> + +<h3 id="Довжина_масиву">Довжина масиву</h3> + +<p>На рівні реалізації масиви JavaScript фактично зберігають свої елементи як стандартні властивості об'єкта, використовуючи індекс масиву як ім'я властивості.</p> + +<p>Властивість <code>length</code> особлива. Вона завжди повертає індекс останнього елемента плюс один. (У наведеному нижче прикладі <code>'Dusty' </code>індексується на рівні 30, тому <code>cats.length</code> повертає <code>30 + 1</code>).</p> + +<p>Пам'ятайте, що індекси масиву JavaScript базуються на 0: вони починаються з <code>0</code>, а не <code>1</code>. Це означає, що властивість <code>length</code> буде на один більше, ніж найвищий індекс, що зберігається в масиві:</p> + +<pre class="brush: js">let cats = [] +cats[30] = ['Dusty'] +console.log(cats.length) // 31 +</pre> + +<p>Ви також можете записати значення у властивість <code>length</code> .</p> + +<p>Введення значення, коротшого за кількість збережених елементів, скорочує масив. Написання <code>0</code> спустошує масив повністю:</p> + +<pre class="brush: js">let cats = ['Dusty', 'Misty', 'Twiggy'] +console.log(cats.length) // 3 + +cats.length = 2 +console.log(cats) // logs "Dusty, Misty" - Twiggy видалено + +cats.length = 0 +console.log(cats) // logs []; масив cats array - порожній + +cats.length = 3 +console.log(cats) // logs [ <3 пустих елементи> ] +</pre> + +<h3 id="Ітерація_з_масивами">Ітерація з масивами</h3> + +<p>Поширена операція - це перебір значень масиву, з обробкою кожного елементу. Найпростіший спосіб зробити це наступним чином:</p> + +<pre class="brush: js">let colors = ['red', 'green', 'blue'] +for (let i = 0; i < colors.length; i++) { + console.log(colors[i]) +} +</pre> + +<p>Якщо ви знаєте, що жоден з елементів вашого масиву не повертає <code>false</code> в булевому контексті, наприклад, якщо ваш масив складається з вузлів <a href="/uk/docs/DOM" title="en-US/docs/DOM">DOM</a>, Ви можете використовувати більш ефективну ідіому:</p> + +<pre class="brush: js">let divs = document.getElementsByTagName('div') +for (let i = 0, div; div = divs[i]; i++) { + /* Process div in some way */ +} +</pre> + +<p>Це дозволяє уникнути накладних перевірок довжини масиву та гарантує, що змінна <code><var>div</var></code> для додаткової зручності переназначається поточному елементу на кожній ітерації .</p> + +<p>Метод {{jsxref("Array.forEach", "forEach()")}} забезпечує інший спосіб ітерації з масивом:</p> + +<pre class="brush: js">let colors = ['red', 'green', 'blue'] +colors.forEach(function(color) { + console.log(color) +}) +// red +// green +// blue +</pre> + +<p>Крім того, ви можете скоротити код для параметра forEach за допомогою функції стрілок ES2015:</p> + +<pre class="brush: js">let colors = ['red', 'green', 'blue'] +colors.forEach(color => console.log(color)) +// red +// green +// blue +</pre> + +<p>Функція, передана <code>forEach</code> , виконується один раз для кожного елемента масиву, при цьому елемент масиву передається як аргумент функції. Не присвоєні значення не перебираються в циклі <code>forEach</code>.</p> + +<p>Зауважте, що елементи масиву, опущені при означенні масиву, не перебираються під час ітерації <code>forEach</code>, але пеербираються, коли вручну елемнту було присвоєно <code>undefined</code>:</p> + +<pre class="brush: js">let array = ['first', 'second', , 'fourth'] + +array.forEach(function(element) { + console.log(element) +}) +// first +// second +// fourth + +if (array[2] === undefined) { + console.log('array[2] is undefined') // true +} + +array = ['first', 'second', undefined, 'fourth'] + +array.forEach(function(element) { + console.log(element) +}) +// first +// second +// undefined +// fourth +</pre> + +<p>Оскільки елементи JavaScript зберігаються як стандартні властивості об'єкта, не рекомендується проводити повторення через масиви JavaScript, використовуючи цикли {{jsxref("Statements/for...in","for...in")}} , оскільки будуть перебрані як нормальні елементи так і всі властивості масиву.</p> + +<h3 id="Методи_масивів">Методи масивів</h3> + +<p>Об'єкт {{jsxref("Array")}} має наступні методи:</p> + +<p>{{jsxref("Array.concat", "concat()")}} з'єднує два або більше масива і повертає новий масив.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3') +myArray = myArray.concat('a', 'b', 'c') +// myArray тепер такий ["1", "2", "3", "a", "b", "c"] +</pre> + +<p>{{jsxref("Array.join", "join(delimiter = ',')")}} об'єднує всі елементи масиву в рядок.</p> + +<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire') +let list = myArray.join(' - ') // list є "Wind - Rain - Fire" +</pre> + +<p>{{jsxref("Array.push", "push()")}} додає один або більше елементів в кінець масиву і повертає отриману довжину <code>length</code> масиву.</p> + +<pre class="brush: js">let myArray = new Array('1', '2') +myArray.push('3') // myArray тепер ["1", "2", "3"] +</pre> + +<p>{{jsxref("Array.pop", "pop()")}} видаляє останній елемент з масиву і повертає цей елемент.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3') +let last = myArray.pop() +// myArray тепер ["1", "2"], last = "3" +</pre> + +<p>{{jsxref("Array.shift", "shift()")}} видаляє перший елемент з масиву і повертає цей елемент.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3') +let first = myArray.shift() +// myArray тепер ["2", "3"], first є "1" +</pre> + +<p>{{jsxref("Array.unshift", "unshift()")}} додає один або більше елементів до передньої частини масиву і повертає нову довжину масиву.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3') +myArray.unshift('4', '5') +// myArray став ["4", "5", "1", "2", "3"] +</pre> + +<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} виймає частину масиву і повертає новий масив.</p> + +<pre class="brush: js">let myArray = new Array('a', 'b', 'c', 'd', 'e') +myArray = myArray.slice(1, 4) // починаючи з 1-го вимйає елементи до 4-го + // повертає [ "b", "c", "d"] +</pre> + +<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} видаляє елементи з масиву та (необов'язково) замінює їх. Він повертає елементи, вилучені з масиву.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3', '4', '5') +myArray.splice(1, 3, 'a', 'b', 'c', 'd') +// myArray тепер ["1", "a", "b", "c", "d", "5"] +// Цей код стартує з першого індексу (or where the "2" was), +// видаляє 3 елементи, а тоді вставляє всі підряд +// на це місце. +</pre> + +<p>{{jsxref("Array.reverse", "reverse()")}} транспонує масив: перший елемент масиву стає останнім, а останній стає першим. Він повертає посилання на масив.</p> + +<pre class="brush: js">let myArray = new Array('1', '2', '3') +myArray.reverse() +// транспонований масив myArray = ["3", "2", "1"] +</pre> + +<p>{{jsxref("Array.sort", "sort()")}} сортує елементи масиву на місці та повертає посилання на масив.</p> + +<pre class="brush: js">let myArray = new Array('Wind', 'Rain', 'Fire') +myArray.sort() +// відсортований масив myArray = ["Fire", "Rain", "Wind"] +</pre> + +<p><code>sort()</code> також може скористатися функцією зворотного виклику для визначення порівняння елементів масиву.</p> + +<p>Метод <code>sort</code> (та інші нижче), які приймають функцію зворотного виклику, відомі як ітераційні методи, оскільки певним чином вони перебирають весь масив. Кожен з них бере необов'язковий другий аргумент під назвою <code><var>thisObject</var></code>. Якщо <code><var>thisObject</var></code> передається, він стає значенням ключового слова <code>this</code> всередині тіла функції зворотного виклику. Якщо це не передбачено, як і в інших випадках, коли функція викликається поза явним контекстом об'єкта, <code>this</code> стосуватиметься глобального об'єкта (<a href="/uk/docs/Web/API/Window" title="The Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a>) при використанні функції вказівника зворотного виклику, або <code>undefined</code> при використанні нормальної функції зворотного виклику.</p> + +<p>Функція зворотного виклику викликається двома аргументами, які є елементами масиву.</p> + +<p>Функція нижче порівнює два значення і повертає одне з трьох значень:</p> + +<p>Наприклад, наступне буде сортувати за останньою літерою рядка:</p> + +<pre class="brush: js">let sortFn = function(a, b) { + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; +} +myArray.sort(sortFn) +// відсортований масив myArray = ["Wind","Fire","Rain"]</pre> + +<ul> + <li>якщо <code><var>a</var></code> за системою сортування менше <code><var>b</var></code> , поверне <code>-1</code> (або будь-яке від’ємне число)</li> + <li>якщо <code><var>a</var></code> за системою сортування більше, ніж <code><var>b</var></code> , поверне <code>1</code> (або будь-яке додатне число)</li> + <li>якщо <code><var>a</var></code> і <code><var>b</var></code> вважати еквівалентними, поверне <code>0</code>.</li> +</ul> + +<p>{{jsxref("Array.indexOf", "indexOf(searchElement[, fromIndex])")}} шукає масив для <code><var>searchElement</var></code> та повертає індекс першого збігу.</p> + +<pre class="brush: js">let a = ['a', 'b', 'a', 'b', 'a'] +console.log(a.indexOf('b')) // пише 1 + +// Тепер спробуйте ще раз, починаючи з останнього співпадіння +console.log(a.indexOf('b', 2)) // пише 3 +console.log(a.indexOf('z')) // пише -1, оскільки 'z' не було знайдено +</pre> + +<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}} працює як <code>indexOf</code>, але починає з кінця і шукає у зворотному порядку.</p> + +<pre class="brush: js">let a = ['a', 'b', 'c', 'd', 'a', 'b'] +console.log(a.lastIndexOf('b')) // пише 5 + +// Тепер спробуйте ще раз, починаючи з останнього співпадіння +console.log(a.lastIndexOf('b', 4)) // пише 1 +console.log(a.lastIndexOf('z')) // пише -1 +</pre> + +<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} виконує <code><var>callback</var></code> на кожному елементі масиву і повертає <code>undefined</code>.</p> + +<pre class="brush: js">let a = ['a', 'b', 'c'] +a.forEach(function(element) { console.log(element) }) +// logs each item in turn +</pre> + +<p>{{jsxref("Array.map", "map(callback[, thisObject])")}} повертає новий масив повернутого значення при виконанні зворотного виклику <code><var>callback</var></code> на кожному елементі масиву.</p> + +<pre class="brush: js">let a1 = ['a', 'b', 'c'] +let a2 = a1.map(function(item) { return item.toUpperCase() }) +console.log(a2) // logs ['A', 'B', 'C'] +</pre> + +<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}} повертає новий масив, що містить елементи, для яких <code><var>callback</var></code> повернув <code>true</code>.</p> + +<pre class="brush: js">let a1 = ['a', 10, 'b', 20, 'c', 30] +let a2 = a1.filter(function(item) { return typeof item === 'number'; }) +console.log(a2) // logs [10, 20, 30] +</pre> + +<p>{{jsxref("Array.every", "every(callback[, thisObject])")}} повертає <code>true</code>, якщо <code><var>callback</var></code> повертає <code>true</code> для кожного елемента масиву.</p> + +<pre class="brush: js">function isNumber(value) { + return typeof value === 'number' +} +let a1 = [1, 2, 3] +console.log(a1.every(isNumber)) // logs true +let a2 = [1, '2', 3] +console.log(a2.every(isNumber)) // logs false +</pre> + +<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} повертає <code>true</code> , якщо <code><var>callback</var></code> повертає <code>true </code>для принаймні одного елемента в масиві.</p> + +<pre class="brush: js">function isNumber(value) { + return typeof value === 'number' +} +let a1 = [1, 2, 3] +console.log(a1.some(isNumber)) // logs true +let a2 = [1, '2', 3] +console.log(a2.some(isNumber)) // logs true +let a3 = ['1', '2', '3'] +console.log(a3.some(isNumber)) // logs false +</pre> + +<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} застосовує <code><var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>currentIndex</var>[, <var>array</var>]])</code> для кожного значення масиву з метою зменшення списку елементів до одного значення. Функція зменшення повертає кінцеве значення, повернене функцією <code><var>callback</var></code> .</p> + +<p>Якщо вказано <code><var>initialValue</var></code> , тоді <code><var>callback</var></code> викликається <code><var>initialValue</var></code> як значення першого параметра, а значення першого елемента в масиві - як значення другого параметра.</p> + +<p>Якщо <code><var>initialValue</var></code> не вказана, першими двома параметрами <code><var>callback</var></code> будуть перший і другий елементи масиву. При кожному наступному виклику значенням першого параметра буде будь-який <code><var>callback</var></code> , повернутий при попередньому виклику, а значення другого параметра буде наступним значенням масиву.</p> + +<p>Якщо для <code><var>callback</var></code> потрібен доступ до індексу оброблюваного елемента, для доступу до всього масиву вони доступні як необов'язкові параметри.</p> + +<pre class="brush: js">let a = [10, 20, 30] +let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0) +console.log(total) // Prints 60 +</pre> + +<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} працює подібно <code>reduce()</code>, але починається з останнього елемента.</p> + +<p><code>reduce</code> та <code>reduceRight</code> - найменш очевидний із ітеративних методів масиву. Їх слід використовувати для алгоритмів, що поєднують два значення рекурсивно, щоб зменшити послідовність до одного значення.</p> + +<h3 id="Багатовимірні_масиви">Багатовимірні масиви</h3> + +<p>Масиви можуть бути вкладені, тобто масив може містити інший масив як елемент. Використовуючи цю характеристику масивів JavaScript, можна створити багатовимірні масиви.</p> + +<p>Наступний код створює багатовимірний масив.</p> + +<pre class="brush: js">let a = new Array(4) +for (let i = 0; i < 4; i++) { + a[i] = new Array(4) + for (let j = 0; j < 4; j++) { + a[i][j] = '[' + i + ', ' + j + ']' + } +} +</pre> + +<p>Цей приклад створює масив із таких рядків:</p> + +<pre>Row 0: [0, 0] [0, 1] [0, 2] [0, 3] +Row 1: [1, 0] [1, 1] [1, 2] [1, 3] +Row 2: [2, 0] [2, 1] [2, 2] [2, 3] +Row 3: [3, 0] [3, 1] [3, 2] [3, 3] +</pre> + +<h3 id="Масиви_та_регулярні_вирази">Масиви та регулярні вирази</h3> + +<p>Коли масив є результатом збігу між регулярним виразом і рядком, масив повертає властивості та елементи, які надають інформацію про збіг. Масив - це повернене значення {{jsxref("Global_Objects/RegExp/exec","RegExp.exec()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, і {{jsxref("Global_Objects/String/split","String.split()")}}. Інформацію про використання масивів з регулярними виразами див <a href="/uk/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a>.</p> + +<h3 id="Робота_з_масиво-подібними_обєктами">Робота з масиво-подібними об'єктами</h3> + +<p>Деякі об`єкти JavaScript, такі як <a href="/uk/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a> повертають <a href="/uk/docs/Web/API/Document/getElementsByTagName" title="returns an HTMLCollection of elements with the given tag name."><code>document.getElementsByTagName()</code></a> або об'єкт {{jsxref("Functions/arguments","arguments")}}, доступний в тілі функції, який виглядає і поводиться як масиви на поверхні, але не ділиться всіма їх методами. Наприклад, об'єкт <code>arguments</code> забезпечує атрибут {{jsxref("Global_Objects/Function/length","length")}} але не реалізує метод {{jsxref("Array.forEach", "forEach()")}}.</p> + +<p>Методи прототипу масиву можна викликати для інших об’єктів, подібних до масиву. наприклад:</p> + +<pre class="brush: js">function printArguments() { + Array.prototype.forEach.call(arguments, function(item) { + console.log(item) + }) +} +</pre> + +<p>Методи прототипу масиву також можна використовувати і для рядків, оскільки вони забезпечують послідовний доступ до своїх символів аналогічно масивам:</p> + +<pre class="brush: js">Array.prototype.forEach.call('a string', function(chr) { + console.log(chr) +}) +</pre> + +<h2 id="Типізовані_масиви">Типізовані масиви</h2> + +<p><a href="/uk/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> є схожими на масив об'єктів і забезпечують механізм доступу до необроблених бінарних даних. Як ви вже знаєте, об'єкт {{jsxref("Array")}} динамічно росте і скорочується і може мати будь-яке значення JavaScript. Рушії JavaScript виконують оптимізацію, щоб ці масиви були швидкими. Однак, оскільки веб-застосунки стають все більш потужними, додаючи такі функції, як маніпулювання аудіо та відео, доступ до необроблених даних за допомогою <a href="/uk/docs/WebSockets">WebSockets</a> тощо, стало зрозуміло, що є випадки, коли корисним буде код JavaScript для швидкого та легкого маніпулювати необробленими бінарними даними в типізованих масивах.</p> + +<h3 id="Буфери_та_представлення_типізовані_архітектури_масивів">Буфери та представлення: типізовані архітектури масивів</h3> + +<p>Щоб досягти максимальної гнучкості та ефективності, JavaScript типізовані масиви розділили реалізацію на буфери (<strong>buffers</strong>) та представлення(<strong>views</strong>). Буфер (реалізований об'єктом {{jsxref ("ArrayBuffer")}}) - це об'єкт, що представляє фрагмент даних; він не має формату, про який можна говорити, і не пропонує механізму доступу до його вмісту. Для доступу до пам'яті, що міститься в буфері, вам потрібно скористатися представленням. Представлення забезпечує контекст - тобто тип даних, початкове зміщення та кількість елементів - який перетворює дані у фактично набраний масив.</p> + +<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> + +<h3 id="ArrayBuffer">ArrayBuffer</h3> + +<p>{{jsxref("ArrayBuffer")}} - це тип даних, який використовується для репрезентації загального буфера даних бінарних даних фіксованої довжини. Ви не можете безпосередньо маніпулювати вмістом <code>ArrayBuffer</code>; натомість ви створюєте типізоване представлення масиву або {{jsxref("DataView")}} який представляє буфер у певному форматі, і використовують його для читання та запису вмісту буфера.</p> + +<h3 id="Типізоване_представлення_масиву">Типізоване представлення масиву</h3> + +<p>Типізовані представлення масивів мають самостійно описові назви та надають представлення для всіх звичайних числових типів, таких як <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> і так далі. Існує один спеціальний вид типізованого представлення масиву <code>Uint8ClampedArray</code>. Він фіксує значення між <code>0</code> та <code>255</code>. Це корисно, наприклад, для обробки даних <a href="/uk/docs/Web/API/ImageData">Canvas</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Type</th> + <th class="header" scope="col">Value Range</th> + <th class="header" scope="col">Size in bytes</th> + <th class="header" scope="col">Description</th> + <th class="header" scope="col">Web IDL type</th> + <th class="header" scope="col">Equivalent C type</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td><code>-128</code> to <code>127</code></td> + <td>1</td> + <td>8-bit two's complement signed integer</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td><code>0</code> to <code>255</code></td> + <td>1</td> + <td>8-bit unsigned integer (clamped)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td><code>-32768</code> to <code>32767</code></td> + <td>2</td> + <td>16-bit two's complement signed integer</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td><code>0</code> to <code>65535</code></td> + <td>2</td> + <td>16-bit unsigned integer</td> + <td><code>unsigned short</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td><code>-2147483648</code> to <code>2147483647</code></td> + <td>4</td> + <td>32-bit two's complement signed integer</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td><code>0</code> to <code>4294967295</code></td> + <td>4</td> + <td>32-bit unsigned integer</td> + <td><code>unsigned long</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> to <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> + <td>4</td> + <td>32-bit IEEE floating point number (7 significant digits e.g., <code>1.1234567</code>)</td> + <td><code>unrestricted float</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> to <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> + <td>8</td> + <td>64-bit IEEE floating point number (16 significant digits e.g., <code>1.123...15</code>)</td> + <td><code>unrestricted double</code></td> + <td><code>double</code></td> + </tr> + <tr> + <td>{{jsxref("BigInt64Array")}}</td> + <td><code>-2<sup>63</sup></code> to <code>2<sup>63</sup>-1</code></td> + <td>8</td> + <td>64-bit two's complement signed integer</td> + <td><code>bigint</code></td> + <td><code>int64_t (signed long long)</code></td> + </tr> + <tr> + <td>{{jsxref("BigUint64Array")}}</td> + <td><code>0</code> to <code>2<sup>64</sup>-1</code></td> + <td>8</td> + <td>64-bit unsigned integer</td> + <td><code>bigint</code></td> + <td><code>uint64_t (unsigned long long)</code></td> + </tr> + </tbody> +</table> + +<p>For more information, see <a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> and the reference documentation for the different {{jsxref("TypedArray")}} objects.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p> diff --git a/files/uk/web/javascript/guide/introduction/index.html b/files/uk/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..8f1d97d352 --- /dev/null +++ b/files/uk/web/javascript/guide/introduction/index.html @@ -0,0 +1,147 @@ +--- +title: Вступ +slug: Web/JavaScript/Guide/Introduction +tags: + - JavaScript + - Вступ + - Початківець + - Путівник +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Цей розділ розповідає про мову JavaScript та деякі засадничі її поняття.</p> + +<h2 id="Необхідний_рівень_підготовки">Необхідний рівень підготовки</h2> + +<p>Цей навчальний посібник передбачає, що ви маєте деякі початкові знання:</p> + +<ul> + <li>Загальне уявлення про {{Glossary("Internet", "Інтернет")}} та ({{Glossary("World_Wide_Web", "Всесвітнє павутиння")}});</li> + <li>Практичний досвід використання мови розмітки гіпертексту ({{Glossary("HTML")}});</li> + <li>Певний досвід программування. Якщо ви у цьому новачок, то спробуйте один з посібників із <a href="/uk/docs/Web/JavaScript">JavaScript</a> на головній сторінці.</li> +</ul> + +<h2 id="Де_знайти_інформацію_з_JavaScript">Де знайти інформацію з JavaScript</h2> + +<p>Документація з JavaScript на ресурсі MDN містить таке:</p> + +<ul> + <li><a href="/uk/Learn">Вивчення Web</a> містить інформацію для початківців, а також ознайомлює з основними концепціями програмування та Інтернету;</li> + <li><a href="/uk/docs/Web/JavaScript/Guide">Навчальний посібник з JavaScript</a> (цей посібник) містить огляд мови JavaScript та її об'єктів;</li> + <li><a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> містить докладні довідкові матеріали з JavaScript.</li> +</ul> + +<p>Якщо ви новачок у JavaScript, почніть із вивчення статей, розміщених у <a href="/uk/Learn">навчальній секції</a> (learning area) та <a href="/uk/docs/Web/JavaScript/Guide">Посібника з JavaScript</a>. Опанувавши основи, можете використовувати <a href="/uk/docs/Web/JavaScript/Reference">Довідник з JavaScript</a> для отримання більш детальної інформації про конкретні об'єкти та вирази (конструкції мови).</p> + +<h2 id="Що_таке_JavaScript">Що таке JavaScript?</h2> + +<p>JavaScript — кроссплатформна об'єктно-зорієнтована мова сценаріїв (скриптів). Рушій JavaScript підключається до об'єктів свого середовища виконання (зазвичай, веб-переглядача) та надає можливість керування ними.</p> + +<p>Мова JavaScript має стандартну бібліотеку об'єктів (таких як <code>Array</code>, <code>Date</code> та <code>Math</code>) і основний набір елементів мови програмування, таких як оператори, керівні структури та вирази.</p> + +<p>Ядро JavaScript може бути розширене для різних потреб шляхом доповнення його додатковими об'єктами. Наприклад:</p> + +<ul> + <li><em>На стороні клієнта JavaScript</em> розширює ядро мови, додаючи об'єкти керування переглядачем і його об'єктною моделлю документа — Document Object Model (DOM). Наприклад, клієнтські розширення дозволяють застосункам розміщувати елементи на HTML-формі та реагувати на дії користувача, такі як клацання миші, введення даних у форму і пересування сторінками.</li> + <li><em>На стороні сервера JavaScript</em> розширює ядро мови шляхом додавання об'єктів, що стосуються роботи JavaScript на сервері. Наприклад, серверні розширення дозволяють застосункам взаємодіяти з базою даних, забезпечувати безперервність потоку інформації від одного запущеного застосунку до іншого, або виконувати маніпуляції з файлами на сервері.</li> +</ul> + +<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript та Java</h2> + +<p>Мови програмування JavaScript та Java у окремих рисах схожі між собою, але все одно докорінно відрізняються одна від одної. Мова JavaScript чимось нагадує Java, але, на відміну від останньої, не має чіткої типізації даних та строгого контролю за типами.</p> + +<p>JavaScript наслідує синтаксис більшості виразів Java, також наслідуються угоди про іменування та основні конструкції керування перебігом виконання сценарію. Це і стало причиною того, що свого часу назву мови змінили з LiveScript на JavаScript.</p> + +<p>На відміну від системи часу коміляції декларативно побудованих класів у Java, мова JavaScript підтримує систему часу виконання, що ґрунтується на невеликій кількості типів даних, представлених числовим типом, логічними, та рядковими значеннями. JavaScript має об'єктну модель, що спирається на прототипи, замість більш поширеної, побудованої на класах, об'єктної моделі, властивої мові Java. Модель на базі прототипів надає можливість динамічного спадкування; тобто успадковане може бути різним для різних об'єктів. Також у JavaScript реалізована підтримка функцій без будь-яких особливих декларативних вимог. Функції можуть бути властивостями об'єктів, функціями, що виконуються, та слабко типізованими методами.</p> + +<p>Для JavaScript властива вільніша форма мови, ніж для Java. Вас не зобов'язують оголошувати всі змінні, класи та методи. JavaScript-програміста не турбує питання, є метод відкритим (public), закритим (private), чи захищеним (protected). Для змінних, параметрів, та типів, що повертаються функціями, не вказується явним чином їх тип.</p> + +<p>Java — це мова програмування, яка базується на класах, розроблена для швидкого виконання та забезпечення захищеності типів. Захищеність типів означає, що не можна, наприклад, привести тип integer до типу object reference, або отримати доступ до закритої пам'яті, маніпулюючи з байткодом Java. Базована на класах об'єктна модель означає, що програма повністю складається із класів та їх методів. Успадкування класів у Java та строга типізація взагалі вимагають існування тісно пов'язаних між собою ієрархій об'єктів. Ці вимоги роблять програмування на Java більш складним, ніж JavaScript-програмування.</p> + +<p>На противагу цьому, JavaScript, за своїм духом, близька до невеликих мов із динамічною типізацією, таких, як HyperTalk та dBASE. Ці скриптові мови надають інструменти програмування для більш широкого загалу користувачів, завдяки простоті синтаксису, вбудованим функціональним можливостям зі спеціалізації, та мінімальним вимогам до створення об'єктів.</p> + +<table class="standard-table"> + <caption>JavaScript у порівнянні з Java</caption> + <thead> + <tr> + <th scope="col">Мова JavaScript</th> + <th scope="col">Мова Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>Об'єктно орієнтована. Не має відмінностей між типами об'єктів. Спадкування здійснюється через механізм прототипів, а властивості та методи можуть бути динамічно додані до будь-якого об'єкту.</p> + </td> + <td> + <p>Базується на класах. Об'єкти поділяються на класи та екземпляри. Спадкування реалізоване через ієрархію класів. До класів та екземплярів не можна динамічно додавати властивості та методи.</p> + </td> + </tr> + <tr> + <td>Для змінних не декларуються типи даних (динамічна типізація).</td> + <td>Для змінних необхідне декларування типів даних (статична типізація)</td> + </tr> + <tr> + <td>Не може автоматично вести запис до жорсткого диску.</td> + <td>Може автоматично вести запис до жорсткого диску.</td> + </tr> + </tbody> +</table> + +<p>Щоб отримати більше інформації щодо відмінностей між JavaScript та Java, відвідайте цей розділ: <a href="/uk/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Докладно про об'єктну модель</a>.</p> + +<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript та специфікація ECMAScript</h2> + +<p>JavaScript стандартизований Європейською асоціаіцєю з стандартизації інформаційних та комунікаційних систем — <a class="external" href="http://www.ecma-international.org/">Ecma International</a> (спершу складноскорот ECMA позначав European Computer Manufacturers Association). Ця стандартизована версія JavaScript, що має назву ECMAScript, однаково працює у всіх застосунках, що підтримують стандарт. Різні компанії можуть використовувати цей відкритий стандарт для розробки своїх реалізацій JavaScript. ECMAScript стандарт задокументований у специфікації ECMA-262. Див. <a href="/uk/docs/Web/JavaScript/New_in_JavaScript">Нове у JavaScript</a>, щоб довідатись більше про різні версії JavaScript та про редакції специфікації ECMAScript.</p> + +<p>Стандарт ECMA-262 також затверджений <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization), як ISO-16262. Ви можете знайти специфікацію на сайті <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a>. Специфікація ECMAScript не описує об'єктну модель документа Document Object Model (DOM), яка стандартизована <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. DOM визначає спосіб, у який об'єкти HTML-документа стають доступними із вашого скрипта. Для отримання більш повного уявлення про технології, що використовуються при програмуванні на JavaScript, зверніться до статті <a href="/uk/docs/Web/JavaScript/JavaScript_technologies_overview">Огляд технологій JavaScript</a>.</p> + +<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">Документація з JavaScript та специфікація ECMAScript</h3> + +<p>Специфікація ECMAScript є низкою вимог до реалізації ECMAScript. Цих вимог слід дотримуватись, щоб запровадити відповідні стандартам можливості мови у реалізації ECMAScript, або, щоб створити рушій (наприклад, SpiderMonkey у Firefox або v8 у Chrome).</p> + +<p>Документ ECMAScript не призначений для того, щоб надавати допомогу у програмуванні скриптів. Для отримання інформації про написання скриптів слід використовувати документацію JavaScript.</p> + +<p>У специфікації ECMAScript використовується термінологія і синтаксис, з якими JavaScript-програмісти можуть бути і не знайомі. Не зважаючи на те, що опис мови у ECMAScript може бути дещо іншим, сама мова залишається такою самою. JavaScript підтримує весь функціонал, закладений у специфікації ECMAScript.</p> + +<p>Документація JavaScript описує аспекти мови, які використовує програміст JavaScript.</p> + +<h2 id="Початок_роботи_із_JavaScript">Початок роботи із JavaScript</h2> + +<p>Розпочати працювати з JavaScript дуже просто: все, що вам потрібно — сучасний переглядач. У даному посібнику розглядаються деякі можливості JavaScript, які, на даний час, реалізовані лише в останніх версіях Firefox, тому рекомендується використовувати саму останню версію Firefox.</p> + +<p>До Firefox вбудовано два інструменти, що роблять його використання дуже зручним для експериментів із JavaScript: Web Console та Scratchpad.</p> + +<h3 id="Веб-консоль_—_Web_Console">Веб-консоль — Web Console</h3> + +<p><a href="/uk/docs/Tools/Web_Console">Web Console</a> надає інформацію про поточну завантажену веб-сторінку, а також містить вбудовану <a href="/uk/docs/Tools/Web_Console#The_command_line_interpreter">командну стрічку (command line)</a>, у якій ви маєте змогу виконувати інструкції JavaScript у поточній сторінці.</p> + +<p>Щоб відкрити Web Console (<kbd>Ctrl + Shift + K</kbd>), оберіть пункт "Веб-консоль" із меню "Розробник" у меню Firefox. Вона з'явиться у нижній частині вікна переглядача. Внизу консолі, по всій її довжині, розміщено командну стрічку, до якої ви можете вводити команди та вирази JavaScript. Результати їх виконання одразу з'являться у панелі, що знаходиться вище:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Чернетка_—_Scratchpad">Чернетка — Scratchpad</h3> + +<p>Веб-консоль чудово підходить для виконання окремих рядків JavaScript, і, хоча, ви й можете вводити й виконувати рядки по одному, це не дуже зручно, і ви не можете зберігати зразки свого коду з використанням Веб-консолі. Таким чином, для виконання більш складних прикладів, є кращий інструмент — <a href="/uk/docs/Tools/Scratchpad">Чернетка (Scratchpad)</a>.</p> + +<p>Щоб відкрити Scratchpad (<kbd>Shift + F4</kbd>), оберіть "Чернетка" ("Scracthpad") у меню "Розробник" із меню Firefox. Він відкривається у окремому вікні і є редактором, який можна використовувати для запису і виконання JavaScript у переглядачі. Ви також можете зберегти скрипти до диску і завантажувати їх з диска.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Hello_World">Hello World</h3> + +<p>Щоб розпочати роботу з JavaScript, відкрийте Scratchpad та напишіть свою першу програму "Hello world":</p> + +<pre class="brush: js">function greetMe(yourName) { + alert("Hello " + yourName); +} + +greetMe("World"); +</pre> + +<p>Натисніть <kbd>Ctrl + R</kbd>, щоб побачити, як цей код буде виконано у переглядачі!</p> + +<p>На наступних сторінках цього посібника буде розглянуто синтаксис та можливості мови JavaScript, що дозволить вам створювати більш складні застосунки.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/uk/web/javascript/guide/iterators_and_generators/index.html b/files/uk/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..144a8c9ee0 --- /dev/null +++ b/files/uk/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,214 @@ +--- +title: Ітератори та генератори +slug: Web/JavaScript/Guide/Iterators_and_Generators +tags: + - JavaScript + - Посібник +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</div> + +<p class="summary">Обробка кожного елемента колекції є дуже розповсюдженою операцією. JavaScript надає численні способи перебору колекції, від простих циклів {{jsxref("Statements/for","for")}} до {{jsxref("Global_Objects/Array/map","map()")}} та {{jsxref("Global_Objects/Array/filter","filter()")}}. Ітератори та генератори додають концепцію перебору безпосередньо у базову мову та надають механізм налаштування поведінки циклів {{jsxref("Statements/for...of","for...of")}}.</p> + +<p>Більш детально дивіться у статтях:</p> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Statements/for...of","for...of")}}</li> + <li>{{jsxref("Statements/function*","function*")}} та {{jsxref("Generator")}}</li> + <li>{{jsxref("Operators/yield","yield")}} та {{jsxref("Operators/yield*","yield*")}}</li> +</ul> + +<h2 id="Ітератори">Ітератори</h2> + +<p>У JavaScript <strong>ітератор</strong> - це об'єкт, який визначає послідовність та, за бажанням, значення, що повертається по її завершенні. Якщо конкретніше, то ітератор - це будь-який об'єкт, що реалізує <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">протокол ітератора</a>, маючи метод <code>next()</code>, який повертає об'єкт з двома властивостями: <code>value</code>, наступне значення послідовності; та <code>done</code>, що дорівнює <code>true</code>, якщо останнє значення послідовності вже було отримане. Якщо поруч з <code>done</code> присутнє значення <code>value</code>, воно є поверненим значенням ітератора.</p> + +<p>Як тільки ітератор був створений, його можна явно обходити, викликаючи метод <code>next()</code>. Перебір ітератора називають споживанням ітератора, бо, загалом, це можна зробити лише один раз. Після того, як завершувальне значення було видане, додаткові виклики <code>next()</code> мають просто вертати <code>{done: true}</code>.</p> + +<p>Найтиповішим ітератором у Javascript є ітератор масиву, який просто повертає по черзі кожне значення відповідного масиву. Хоча легко уявити, що усі ітератори можна виразити у вигляді масивів, це не так. Масиви мають бути розташовані у пам'яті цілком, але ітератори споживаються лише за необхідності і, таким чином, можуть виражати послідовності необмеженого розміру, такі як діапазон цілих чисел між 0 та Infinity (нескінченністю).</p> + +<p>Ось приклад, який може робити саме це. Він дозволяє створювати ітератор простого діапазону, який визначає послідовність цілих чисел від <code>start</code> (включно) до <code>end</code> (не включно) з проміжком <code>step</code>. Його кінцеве повернене значення є розміром створеної послідовності, що відслідковується змінною iterationCount.</p> + +<pre class="brush: js">function makeRangeIterator(start = 0, end = Infinity, step = 1) { + let nextIndex = start; + let iterationCount = 0; + + const rangeIterator = { + next: function() { + let result; + if (nextIndex < end) { + result = { value: nextIndex, done: false } + nextIndex += step; + iterationCount++; + return result; + } + return { value: iterationCount, done: true } + } + }; + return rangeIterator; +}</pre> + +<p>Далі використання ітератора виглядає наступним чином:</p> + +<pre class="brush: js">let it = makeRangeIterator(1, 10, 2); + +let result = it.next(); +while (!result.done) { + console.log(result.value); // 1 3 5 7 9 + result = it.next(); +} + +console.log("Перебрано послідовність розміром: ", result.value); // [повертає 5 чисел з інтервалу від 0 до 10] + +</pre> + +<div class="note"> +<p>Неможливо знати, чи певний об'єкт є ітератором. Якщо вам необхідно це зробити, використовуйте <a href="#Iterables">ітерабельні об'єкти</a>.</p> +</div> + +<h2 id="Функції-генератори">Функції-генератори</h2> + +<p>Хоча користувацькі ітератори є потужним інструментом, їхнє створення вимагає обережного програмування через необхідність явно підтримувати їхній внутрішній стан. Функції-генератори надають потужну альтернативу: вони дозволяють визначати алгоритм перебору написанням єдиної функції, виконання якої не є безперервним. Функції-генератори пишуться за допомогою синтаксису {{jsxref("Statements/function*","function*")}}. При першому виклику функції-генератори не виконують свій код, замість цього вони повертають ітератор під назвою Generator. Коли значення споживається викликом методу об'єкта Generator <strong>next</strong>, функція-генератор виконується до тих пір, поки не зустріне ключове слово <strong>yield</strong>.</p> + +<p>Функція може викликатись будь-яку бажану кількість раз та кожен раз вертатиме новий об'єкт Generator, однак, кожний об'єкт Generator може перебиратись лише один раз.<br> + <br> + Тепер ми можемо адаптувати наведений вище приклад. Поведінка коду ідентична, але ця реалізація набагато простіша у написанні та читанні.</p> + +<pre class="brush: js">function* makeRangeIterator(start = 0, end = 100, step = 1) { + let iterationCount = 0; + for (let i = start; i < end; i += step) { + iterationCount++; + yield i; + } + return iterationCount; +}</pre> + +<h2 id="Ітерабельні_обєкти">Ітерабельні об'єкти</h2> + +<p>Об'єкт є <strong>ітерабельним</strong>, якщо він визначає свою ітераційну поведінку, наприклад, через які значення проходитиме цикл {{jsxref("Statements/for...of", "for...of")}}. Деякі вбудовані типи, такі як {{jsxref("Array")}} або {{jsxref("Map")}}, мають визначену за замовчуванням ітераційну поведінку, в той час, як інші типи (такі як {{jsxref("Object")}}) її не мають.</p> + +<p>Для того, щоб бути <strong>ітерабельним</strong>, об'єкт повинен реалізувати метод <strong>@@iterator</strong>, тобто, цей об'єкт (або один з об'єктів у його <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ланцюжку прототипів</a>) повинен мати властивість з ключем {{jsxref("Symbol.iterator")}}.<br> + <br> + Може бути можливо перебрати ітерабельний об'єкт більше одного разу, або лише один раз. Який варіант обирати, вирішує програміст. Ітерабельні об'єкти, які можна перебрати лише один раз (наприклад, об'єкти Generator) традиційно повертають <strong>this</strong> зі свого методу <strong>@@iterator</strong>, тоді як ті, які можна перебирати багаторазово, повинні повертати новий ітератор на кожний виклик <strong>@@iterator</strong>.</p> + +<pre class="brush: js">function* makeIterator() { + yield 1; + yield 2; +} + +const it = makeIterator(); + +for(const itItem of it) { + console.log(itItem); +} + +console.log(it[Symbol.iterator]() === it) // true; + +// Це приклад показує, що генератор(ітератор) є ітерабельним об'єктом, метод якого @@iterator повертає сам об'єкт (it), +// і з цієї причини цей об'єкт (it) можна перебирати лише один раз + + +// Якщо ми змінимо метод @@iterator об'єкта "it" на функцію/генератор, що вертає новий ітератор/генератор, цей об'єкт (it) +// можна буде перебирати багато разів + +it[Symbol.iterator] = function* () { + yield 2; + yield 1; +}; +</pre> + +<h3 id="Створені_користувачем_ітерабельні_обєкти">Створені користувачем ітерабельні об'єкти</h3> + +<p>Ми можемо створювати власні ітерабельні об'єкти наступним чином:</p> + +<pre class="brush: js">var myIterable = { + *[Symbol.iterator]() { + yield 1; + yield 2; + yield 3; + } +} + +for (let value of myIterable) { + console.log(value); +} +// 1 +// 2 +// 3 + +або + +[...myIterable]; // [1, 2, 3] +</pre> + +<h3 id="Вбудовані_ітерабельні_обєкти">Вбудовані ітерабельні об'єкти</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} та {{jsxref("Set")}} усі є вбудованими ітерабельними об'єктами, тому що всі їхні прототипи мають метод {{jsxref("Symbol.iterator")}}.</p> + +<h3 id="Синтаксис_що_очікує_на_ітерабельний_обєкт">Синтаксис, що очікує на ітерабельний об'єкт</h3> + +<p>Деякі оператори та вирази очікують на ітерабельні об'єкти, наприклад, цикли {{jsxref("Statements/for...of","for-of")}}, {{jsxref("Operators/yield*","yield*")}}.</p> + +<pre class="brush: js">for (let value of ['а', 'б', 'в']) { + console.log(value); +} +// "а" +// "б" +// "в" + +[...'абв']; // ["а", "б", "в"] + +function* gen() { + yield* ['а', 'б', 'в']; +} + +gen().next(); // { value: "а", done: false } + +[a, b, c] = new Set(['а', 'б', 'в']); +a; // "а" + +</pre> + +<h2 id="Просунуті_генератори">Просунуті генератори</h2> + +<p>Генератори обчислюють значення, які видають, на вимогу, це дозволяє їм ефективно відображати послідовності, затратні для обчислення, чи навіть нескінченні послідовності, як було продемонстровано вище.</p> + +<p>Метод {{jsxref("Global_Objects/Generator/next","next()")}} також приймає значення, які можуть використовуватись для модифікації внутрішнього стану генератора. Значення, передане у метод <code>next()</code> буде отримане оператором <code>yield</code>. Зауважте, що значення, передане у перший метод <code>next()</code>, завжди ігнорується.</p> + +<p>Ось генератор Фібоначчі, який використовує <code>next(x)</code>, щоб перезапустити послідовність:</p> + +<pre class="brush: js">function* fibonacci() { + var fn1 = 0; + var fn2 = 1; + while (true) { + var current = fn1; + fn1 = fn2; + fn2 = current + fn1; + var reset = yield current; + if (reset) { + fn1 = 0; + fn2 = 1; + } + } +} + +var sequence = fibonacci(); +console.log(sequence.next().value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2 +console.log(sequence.next().value); // 3 +console.log(sequence.next().value); // 5 +console.log(sequence.next().value); // 8 +console.log(sequence.next(true).value); // 0 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 1 +console.log(sequence.next().value); // 2</pre> + +<p>Ви можете змусити генератор викинути виняток, викликавши його метод {{jsxref("Global_Objects/Generator/throw","throw()")}} та передавши значення винятку, яке він має викинути. Цей виняток буде викинутий з поточного призупиненого контексту генератора, так, якби поточний оператор зупинки <code>yield</code> був оператором <code>throw <em>значення</em></code>.</p> + +<p>Якщо виняток не перехоплений всередині генератора, він поширюватиметься до виклику <code>throw()</code>, і наступні виклики методу <code>next()</code> отримають властивість <code>done</code>, що дорівнює <code>true</code>.</p> + +<p>Генератори мають метод {{jsxref("Global_Objects/Generator/return","return(value)")}}, який повертає надане значення та завершує сам генератор.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/uk/web/javascript/guide/loops_and_iteration/index.html b/files/uk/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..1b76102c0d --- /dev/null +++ b/files/uk/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,355 @@ +--- +title: Цикли та ітерації +slug: Web/JavaScript/Guide/Loops_and_iteration +tags: + - JavaScript + - Інструкція + - Синтаксис + - Цикл +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава <a href="/en-US/docs/Web/JavaScript/Guide">посібника JavaScript </a> представляє різні ітераційні оператори, доступні в JavaScript.</p> + +<p>Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:</p> + +<pre class="brush: js notranslate">var step; +for (step = 0; step < 5; step++) { + // Іти 5 разів від значення 0 до 4. + console.log('Іти на схід 1 крок'); +} +</pre> + +<p>Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.</p> + +<p>Оператори циклів у JavaScript:</p> + +<ul> + <li>{{anch("for statement")}}</li> + <li>{{anch("do...while statement")}}</li> + <li>{{anch("while statement")}}</li> + <li>{{anch("labeled statement")}}</li> + <li>{{anch("break statement")}}</li> + <li>{{anch("continue statement")}}</li> + <li>{{anch("for...in statement")}}</li> + <li>{{anch("for...of statement")}}</li> +</ul> + +<h2 id="Оператор_for">Оператор <code>for</code></h2> + +<p>Цикл {{jsxref("statements/for","for")}} повторюється, доки певний вираз не стане false. Цикл <code>for</code> у JavaScript подібний до циклу <code>for</code> у мовах Java і C. Має такий вигляд:</p> + +<pre class="syntaxbox notranslate">for ([початковийВираз(<code>initialExpression)</code>]; [умова(<code>condition)</code>]; [приріст(<code>incrementExpression)</code>]) + інструкція(<code>statement)</code> +</pre> + +<p>Коли цикл <code>for</code> виконується, відбувається наступне:</p> + +<ol> + <li>Виконується вираз <code>initialExpression</code>, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.</li> + <li>Оцінюється вираз <code>condition</code>. Якщо вираз приймає значення true, ітерація циклу виконується, якщо false - цикл завершується.</li> + <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Виконується </span></font>statement</code>. Щоб виконати кілька інструкцій, використовуйте (<code>{ ... }</code>), щоб згрупувати їх.</li> + <li>Потім виконується вираз <code>incrementExpression</code>.</li> + <li>Далі все повертається до кроку 2.</li> +</ol> + +<h3 id="Приклад"><strong>Приклад</strong></h3> + +<p>Наступна функція містить вираз <code>for</code>, що рахує цифри вибраних варіантів в прокручуваному списку (елемента {{HTMLElement("select")}} , що дозволяє мультивибір). Вираз <code>for</code> оголошує змінну <code>i</code> і задає їй значення 0. Перевіряється чи <code>i</code> менша чим кількість виборів в елементі <code><select></code> , виконує наступний вираз <code>if</code>та збільшує <code>i</code> на одиницю після кожного кроку цикла.</p> + +<pre class="brush: html notranslate"><form name="selectForm"> + <p> + <label for="musicTypes">Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="Скільки ви вибрали?" /></p> +</form> + +<script> +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +var btn = document.getElementById('btn'); +btn.addEventListener('click', function() { + alert('Кількість вибраних варіагьів: ' + howMany(document.selectForm.musicTypes)); +}); +</script> + +</pre> + +<h2 id="Оператор_do...while">Оператор <code>do...while</code></h2> + +<p>Оператор {{jsxref("statements/do...while", "do...while")}} повторює дії поки певна умова не прийме значення false. Оператор <code>do...while</code> виглядатиме наступним чином:</p> + +<pre class="syntaxbox notranslate">do + statement +while (condition); +</pre> + +<p><code>statement</code> завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати (<code>{ ... }</code>) щоб згрупувати ці вирази. Якщо <code>condition</code> приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла <code>do...while</code> зупиняються.</p> + +<h3 id="Приклади"><strong>Приклади</strong></h3> + +<p>В наступному прикладі цикл <code>do</code> ітерується принаймні один раз і повторюється доки i менша чим 5.</p> + +<pre class="brush: js notranslate">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5);</pre> + +<h2 id="Оператор_while">Оператор <code>while</code></h2> + +<p>Вираз {{jsxref("statements/while","while")}} виконується доти доки спеціальна умова приймає значення true. Вираз <code>while</code> виглядає наступним чином:</p> + +<pre class="syntaxbox notranslate">while (condition) + statement +</pre> + +<p>Якщо умова стає false, <code>statement</code> перестає виконуватись і відбувається вихід із цикла.</p> + +<p>Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, <code>statement</code> виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу <code>while</code>.</p> + +<p>Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.</p> + +<h3 id="Приклад_1"><strong>Приклад 1</strong></h3> + +<p>Наступний цикл <code>while</code> виконує цикл доти доки <code>n</code> менше трьох:</p> + +<pre class="brush: js notranslate">var n = 0; +var x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>З кожною ітерацією, цикл збільшує <code>n,</code> та додає це до значення <code>x</code>. Тому, <code>x</code> і <code>n</code> приймають наступні значення:</p> + +<ul> + <li>Після першого виконання: <code>n</code> = 1 і<code>x</code> = 1</li> + <li>Після другого виконання: <code>n</code> = 2 і <code>x</code> = 3</li> + <li>Після третього виконання: <code>n</code> = 3 і <code>x</code> = 6</li> +</ul> + +<p>Після третьої ітерації умова <code>n < 3</code> більше не <code>true</code>, тому цикл припиняється.</p> + +<h3 id="Приклад_2"><strong>Приклад 2</strong></h3> + +<p>Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі <code>while</code> виконуватиметься постійно тому, що умова ніколи не стане <code>false</code>:</p> + +<pre class="brush: js notranslate">while (true) { + console.log('Hello, world!'); +}</pre> + +<h2 id="Оператор_labeled">Оператор <code>labeled</code></h2> + +<p> {{jsxref("statements/label","label")}} забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати <code>label</code>, щоб позначити цикл, а потім скористатися операторами <code>break</code> або <code>continue,</code> щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.</p> + +<p>Синтаксис оператора виглядає наступним чином:</p> + +<pre class="syntaxbox notranslate">label : + statement +</pre> + +<p>Значення <code><em>label</em></code> може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. <code><em>statement</em></code>, який ви ідентифікуєте може бути будь-яким виразом.</p> + +<h3 id="Приклад_3"><strong>Приклад</strong></h3> + +<p>В цьому прикладі позначка <code>markLoop</code> ідентифікує цикл <code>while</code>.</p> + +<pre class="brush: js notranslate">markLoop: +while (theMark == true) { + doSomething(); +}</pre> + +<h2 id="Оператор_break">Оператор <code>break</code></h2> + +<p>Використовуйте оператор {{jsxref("statements/break","break")}} для виходу з циклу, <code>switch</code>, чи в поєднанні з оператором <code>label</code>.</p> + +<ul> + <li>Коли ви використовуєте <code>break</code> без <code>label</code>, це завершує поточний <code>while</code>, <code>do-while</code>, <code>for</code>, або <code>switch</code> і відразу переходить до наступного оператора.</li> + <li>Коли ви використовуєте <code>break</code> із <code>label</code>, це завершує конкретний вираз позначений за допомогою цього label.</li> +</ul> + +<p>Синтаксис оператора <code>break</code> виглядає наступним чином:</p> + +<pre class="syntaxbox notranslate">break [<em>label</em>]; +</pre> + +<p>Перша форма синтаксису завершує перший батьківський цикл, або оператор <code>switch</code>; Друга форма завершує певний оператор позначений за допомогоюю <code>label</code>.</p> + +<h3 id="Приклад_1_2"><strong>Приклад 1</strong></h3> + +<p>Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням <code>theValue</code>:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + if (a[i] == theValue) { + break; + } +}</pre> + +<h3 id="Приклад_2_Переривання_позначки"><strong>Приклад 2: </strong>Переривання позначки</h3> + +<pre class="brush: js notranslate">var x = 0; +var z = 0; +labelCancelLoops: while (true) { + console.log('Зовнішні цикли: ' + x); + x += 1; + z = 1; + while (true) { + console.log('Внутрішні цикли: ' + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +} +</pre> + +<h2 id="Оператор_continue">Оператор <code>continue</code></h2> + +<p>Оператор {{jsxref("statements/continue","continue")}} може використовуватись для перезапуску <code>while</code>, <code>do-while</code>, <code>for</code>, чи виразу <code>label</code>.</p> + +<ul> + <li>Коли ви використовуєте оператор <code>continue</code> без label, це завершує дану ітерацію цикла і переходить на наступну. На відміну від оператора <code>break</code>, <code>continue</code> не завершує виконання всього цикла. В циклі <code>while</code>, Воно повертається до умови, у циклі <code>for</code> воно переходить до <code>increment-expression</code>.</li> + <li>Коли ви використовуєте <code>continue</code> з label, це переходить до виразу цикла позначеного за допомогою label.</li> +</ul> + +<p>Синтаксис оператора <code>continue</code> виглядає наступним чином:</p> + +<pre class="syntaxbox notranslate">continue [<em>label</em>]; +</pre> + +<h3 id="Приклад_1_3"><strong>Приклад 1</strong></h3> + +<p>Наступний приклад показує цикл <code>while</code> з оператором <code>continue,</code> що виконується коли значення <code>i</code> дорівнює трьом. Тоді як, <code>n</code> приймає значення 1, 3, 7, 12.</p> + +<pre class="brush: js notranslate">var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + continue; + } + n += i; + console.log(n); +} +//1,3,7,12 + + +var i = 0; +var n = 0; +while (i < 5) { + i++; + if (i == 3) { + // continue; + } + n += i; + console.log(n); +} +// 1,3,6,10,15 +</pre> + +<h3 id="Приклад_2_2"><strong>Приклад 2</strong></h3> + +<p>Вираз позначений <code>checkiandj</code> містить вираз позначений <code>checkj</code>. Якщо <code>continue</code> зустрічається програма зупинить ітерацію <code>checkj</code> і почнеться з наступної ітерації. Кожен раз як <code>continue</code> зустрічається, <code>checkj</code> переітеровується поки вираз не поверне <code>false</code>. Коли <code>false</code> повертається, решта виразу <code>checkiandj</code> виконується і<code>checkiandj</code> переітеровується доки умова не поверне <code>false</code>. Коли<code>false</code> повертається програма продовжує вираз слідуючого<code>checkiandj</code>.</p> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Якщо </span></font>continue</code> має label <em><code>checkiandj</code></em>, програма буде продовжуватись зверху вираза<em><code>checkiandj.</code></em></p> + +<pre class="brush: js notranslate">var i = 0; +var j = 10; +checkiandj: + while (i < 4) { + console.log(i); + i += 1; + checkj: + while (j > 4) { + console.log(j); + j -= 1; + if ((j % 2) == 0) { + continue checkj; + } + console.log(j + ' is odd.'); + } + console.log('i = ' + i); + console.log('j = ' + j); + }</pre> + +<h2 id="Оператор_for...in">Оператор <code>for...in</code></h2> + +<p>Оператор {{jsxref("statements/for...in","for...in")}} ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Оператор<code>for...in</code> виглядає наступним чином:</p> + +<pre class="syntaxbox notranslate">for (variable in object) { + statements +} +</pre> + +<h3 id="Приклад_4"><strong>Приклад</strong></h3> + +<p>Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.</p> + +<pre class="brush: js notranslate">function dump_props(obj, obj_name) { + var result = ''; + for (var i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Для об'єкту <code>car</code> з властивостями <code>make</code> і <code>model</code>, <code>result</code> результат буде:</p> + +<pre class="brush: js notranslate">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Масиви"><strong>Масиви</strong></h3> + +<p>Також це може підходити для ітерування елементів {{jsxref("Array")}}, Оператор <strong>for...in</strong> буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл {{jsxref("statements/for","for")}} з номерними індексами коли ітеруєте масив, так як <strong>for...in</strong> ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.</p> + +<h2 id="Оператор_for...of">Оператор <code>for...of</code></h2> + +<p>Оператор {{jsxref("statements/for...of","for...of")}} створює цикл, що проходиться по <a href="/en-US/docs/Web/JavaScript/Guide/iterable">ітерованому об'єкту</a> (включно з {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, об'єкт {{jsxref("functions/arguments","arguments")}} і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.</p> + +<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) { + <em>statement +</em>}</pre> + +<p>Наступний приклад показує різницю між циклами <code>for...of</code> і {{jsxref("statements/for...in","for...in")}}. У той час як <code>for...in</code> проходиться по іменах властивостей, цикл <code>for...of</code> проходиться по значеннях цих властивостей:</p> + +<pre class="brush:js notranslate">var arr = [3, 5, 7]; +arr.foo = 'hello'; + +for (var i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (var i of arr) { + console.log(i); // logs 3, 5, 7 +} +</pre> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> + +<div id="gtx-trans" style="position: absolute; left: 29px; top: 10988px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/uk/web/javascript/guide/numbers_and_dates/index.html b/files/uk/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..71b7acd1bc --- /dev/null +++ b/files/uk/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,383 @@ +--- +title: Числа та дати +slug: Web/JavaScript/Guide/Numbers_and_dates +tags: + - Date + - JavaScript + - Math + - Number + - Дати + - Обчислення + - Посібник + - Числа +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</div> + +<p>У даному розділі представлені концепції, об'єкти та функції, які використовуються, щоб працювати та виконувати розрахунки з числами та датами у JavaScript. Це враховує використання чисел, записаних у різних системах числення, в тому числі десятковій, двійковій та шістнадцятковій, а також використання глобального об'єкта {{jsxref("Math")}} для виконання найрізноманітніших математичних операцій над числами.</p> + +<h2 id="Числа">Числа</h2> + +<p>У JavaScript, числа реалізовані у <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">64-бітному бінарному форматі IEEE 754 з подвійною точністю</a> (тобто, число між ±2<sup>−1022</sup> та ±2<sup>+1023</sup>, або приблизно від ±10<sup>−308</sup> до ±10<sup>+308</sup>, з числовою точністю у 53 біти). Цілі значення до ±2<sup>53 </sup>− 1 можуть бути відображені точно.</p> + +<p>Додатково числовий тип має три символьні значення: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}} та {{jsxref("NaN")}} (not-a-number - не число).</p> + +<p>Нещодавнім доповненням JavaScript є тип {{jsxref("BigInt")}}, який дає можливість оперувати з дуже великими цілими числами. Хоча існують застереження у використанні <code>BigInt</code>; наприклад, ви не можете змішувати та співставляти значення <code>BigInt</code> та {{jsxref("Number")}} в рамках однієї операції, і ви не можете використовувати об'єкт {{jsxref("Math")}} зі значеннями <code>BigInt</code>.</p> + +<p>У статті <a href="/uk/docs/Web/JavaScript/Data_structures">Типи та структури даних в JavaScript</a> числовий тип даних описаний в контексті інших примітивних типів JavaScript.</p> + +<p>Ви можете використовувати чотири типа числових літералів: десяткові, двійкові, вісімкові та шістнадцятковий.</p> + +<h3 id="Десяткові_числа">Десяткові числа</h3> + +<pre class="brush: js notranslate">1234567890 +42 + +// Будьте уважні при використанні нулів на початку числа + +0888 // 888 розбирається як десяткове число +0777 // розбирається як вісімкове число у нестрогому режимі (десяткове число 511)</pre> + +<p>Зверніть увагу, що десятковий літерал може починатися з нуля (<code>0</code>) за яким розташована інша десяткова цифра, але, якщо кожна цифра після <code>0</code> менша за 8, то число розбирається як вісімкове.</p> + +<h3 id="Двійкові_числа">Двійкові числа</h3> + +<p>Синтаксис двійковичх чисел використовує нуль попереду, за яким розташована латинська буква "B" (<code>0b</code> або <code>0B</code>). Якщо цифри після <code>0b</code> не є 0 або 1, викидається наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Missing binary digits after 0b".</p> + +<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h3 id="Вісімкові_числа">Вісімкові числа</h3> + +<p>Синтаксис вісімкових чисел теж використовує нуль попереду. Якщо числа після <code>0</code> не входять у діапазон від 0 до 7, то число буде інтерпретоване як десяткове.</p> + +<pre class="brush: js notranslate">var n = 0755; // 493 +var m = 0644; // 420</pre> + +<p>Строгий режим у ECMAScript 5 забороняє вісімковий синтаксис. Вісімковий синтаксис не є частиною ECMAScript 5, але він підтримується всіма переглядачами додаванням нуля попереду вісімкового числа: <code>0644 === 420</code>, а <code>"\045" === "%"</code>. У ECMAScript 2015 вісімкові значення підтримуються, якщо вони мають префікс <code>0o</code>, наприклад: </p> + +<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8</pre> + +<h3 id="Шістнадцяткові_числа">Шістнадцяткові числа</h3> + +<p>Синтаксис шістнадцяткових чисел використовує нуль попереду, за яким розташована латинська літера "X" (<code>0x</code> або <code>0X</code>). Якщо числа після 0x не входять у діапазон (0123456789ABCDEF), то буде викинутий наступний виняток <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>: "Identifier starts immediately after numeric literal".</p> + +<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10</pre> + +<h3 id="Експоненціальний_запис">Експоненціальний запис</h3> + +<pre class="brush: js notranslate">1E3 // 1000 +2e6 // 2000000 +0.1e2 // 10</pre> + +<h2 id="Обєкт_Number">Об'єкт <code>Number</code></h2> + +<p>Вбудований об'єкт {{jsxref("Число", "Number")}} має властивості для числових констант, такі як масимальне числове значення, не-число (not-a-number) та нескінченність. Ви не можете змінювати значення цих властивостей і використовуєте їх наступним чином:</p> + +<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN;</pre> + +<p>Ви завжди посилаєтесь на властивість попередньо визначенного об'єкта <code>Number</code>, як це показано вище, а не на властивість об'єкта <code>Number</code>, створеного вами.</p> + +<p>Наступна таблиця підсумовує властивості об'єкта <code>Number</code>.</p> + +<table class="standard-table"> + <caption>Властивості <code>Number</code></caption> + <thead> + <tr> + <th scope="col"><strong>Властивість</strong></th> + <th scope="col"><strong>Опис</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Число.MAX_VALUE", "Number.MAX_VALUE")}}</td> + <td>Найбільше число, доступне для відображення (<code>±1.7976931348623157e+308</code>)</td> + </tr> + <tr> + <td>{{jsxref("Число.MIN_VALUE", "Number.MIN_VALUE")}}</td> + <td> + <p>Найменше число, доступне для відображення (<code>±5e-324</code>)</p> + </td> + </tr> + <tr> + <td>{{jsxref("Число.NaN", "Number.NaN")}}</td> + <td>Спеціальне значення "не-число" (not-a-number)</td> + </tr> + <tr> + <td>{{jsxref("Число.NEGATIVE_INFINITY", "Number.NEGATIVE_INFINITY")}}</td> + <td>Спеціальне значення від'ємна нескінченність; повертається при переповненні</td> + </tr> + <tr> + <td>{{jsxref("Число.POSITIVE_INFINITY", "Number.POSITIVE_INFINITY")}}</td> + <td>Спеціальне значення додатна нескінченність; повертається при переповненні</td> + </tr> + <tr> + <td>{{jsxref("Число.EPSILON", "Number.EPSILON")}}</td> + <td>Різниця між <code>1</code> та найменшим числом, більшим за <code>1</code>, що може бути представлене об'єктом {{jsxref("Число", "Number")}} (<code>2.220446049250313e-16</code>)</td> + </tr> + <tr> + <td>{{jsxref("Число.MIN_SAFE_INTEGER", "Number.MIN_SAFE_INTEGER")}}</td> + <td>Мінімальне ціле безпечне число у JavaScript (−2<sup>53</sup> + 1 або <code>−9007199254740991</code>)</td> + </tr> + <tr> + <td>{{jsxref("Число.MAX_SAFE_INTEGER", "Number.MAX_SAFE_INTEGER")}}</td> + <td>Максимальне ціле безпечне число у JavaScript (+2<sup>53</sup> − 1 або <code>+9007199254740991</code>)</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Методи <code>Number</code></caption> + <thead> + <tr> + <th>Метод</th> + <th>Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Число.parseFloat()", "Number.parseFloat()")}}</td> + <td>Розбирає рядковий аргумент та повертає число з плаваючою крапкою, яке вдалося розпізнати.<br> + Аналог глобальної функції {{jsxref("parseFloat", "parseFloat()")}}.</td> + </tr> + <tr> + <td>{{jsxref("Число.parseInt()", "Number.parseInt()")}}</td> + <td>Розбирає рядковий аргумент та поверає ціле число в заданій системі числення.<br> + Аналог глобальної функції {{jsxref("parseInt", "parseInt()")}}.</td> + </tr> + <tr> + <td>{{jsxref("Число.isFinite()", "Number.isFinite()")}}</td> + <td>Визначає, чи є передане значення скінченним числом.</td> + </tr> + <tr> + <td>{{jsxref("Число.isInteger()", "Number.isInteger()")}}</td> + <td>Визначає, чи є передане значення цілим числом.</td> + </tr> + <tr> + <td>{{jsxref("Число.isNaN()", "Number.isNaN()")}}</td> + <td>Визначає, чи є передане значення {{jsxref("Global_Objects/NaN", "NaN")}}. Більш надійніша версія оригінальної глобальної функції {{jsxref("Global_Objects/isNaN", "isNaN()")}}.</td> + </tr> + <tr> + <td>{{jsxref("Число.isSafeInteger()", "Number.isSafeInteger()")}}</td> + <td>Визначає, чи є передане значення безпечним цілим числом.</td> + </tr> + </tbody> +</table> + +<p>Прототип <code>Number</code> надає методи для отримання інформації з об'єктів <code>Number</code> різноманітних форматів. Наступна таблиця наводить методи <code>Number.prototype</code>.</p> + +<table class="standard-table"> + <caption>Методи <code>Number.prototype</code></caption> + <thead> + <tr> + <th scope="col">Методи</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Число.toExponential", "toExponential()")}}</td> + <td>Повертає рядок, що експоненціальний запис числа.</td> + </tr> + <tr> + <td>{{jsxref("Число.toFixed", "toFixed()")}}</td> + <td>Повертає рядок, що містить запис числа у форматі з нерухомою крапкою.</td> + </tr> + <tr> + <td>{{jsxref("Число.toPrecision", "toPrecision()")}}</td> + <td>Повертає рядок, що містить запис числа із зазначеною точністю у форматі з нерухомою крапкою.</td> + </tr> + </tbody> +</table> + +<h2 id="Обєкт_Math">Об'єкт <code>Math</code></h2> + +<p>Вбудований об'єкт {{jsxref("Math")}} має властивості та методи для математичних констант та функцій. Наприклад, властивість <code>PI</code> об'єкту <code>Math</code> має значення пі (3.141...), яке використовується у застосунку так:</p> + +<pre class="brush: js notranslate">Math.PI</pre> + +<p>Аналогічно, стандартні математичні функції є методами об'єкта <code>Math</code>. Сюди входять тригонометричні, логарифмічні, експоненціальні та інші функції. Наприклад, якби вам знадобилась тригонометрична функція сінус, ви б написали</p> + +<pre class="brush: js notranslate">Math.sin(1.56)</pre> + +<p>Зверніть увагу, що всі тригонометричні методи об'єкта <code>Math</code> в якості аргументів приймають величини в радіанах.</p> + +<p>В даній таблиці наведені методи об'єкта <code>Math</code>.</p> + +<table class="standard-table"> + <caption>Методи <code>Math</code></caption> + <thead> + <tr> + <th scope="col">Методи</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Math.abs", "abs()")}}</td> + <td>Абсолютне значення</td> + </tr> + <tr> + <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> + <td>Стандартні тригонометричні функції; з аргументом в радіанах</td> + </tr> + <tr> + <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> + <td>Обернені тригонометричні функції; повертають значення в радіанах.</td> + </tr> + <tr> + <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> + <td>Гіперболічні функції; аргумент - гіперболічний кут.</td> + </tr> + <tr> + <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> + <td>Зворотні, гіперболічні функцій; повертають гіперболічний кут.</td> + </tr> + <tr> + <td> + <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p> + </td> + <td>Експоненційні та логарифмічні фукнції.</td> + </tr> + <tr> + <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> + <td>Повертає найбільне/найменше ціле, яке менше/більше або дорівнює аргументу.</td> + </tr> + <tr> + <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> + <td>Повертає мінімальне або максимальне (відповідно) значення зі списку розділених комою чисел, переданих як аргумент.</td> + </tr> + <tr> + <td>{{jsxref("Math.random", "random()")}}</td> + <td>Повертає випадкове число в інтервалі між 0 та 1.</td> + </tr> + <tr> + <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> + <td>Фукнції округлення та обрізання.</td> + </tr> + <tr> + <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> + <td> + <p>Квадратний корінь, кубічний корінь, корінь квадратний з суми квадратів аргументів.</p> + </td> + </tr> + <tr> + <td>{{jsxref("Math.sign", "sign()")}}</td> + <td>Знак числа, що вказує, чи є число додатним, від'ємним, чи нулем.</td> + </tr> + <tr> + <td>{{jsxref("Math.clz32", "clz32()")}},<br> + {{jsxref("Math.imul", "imul()")}}</td> + <td>Кількість перших нульових бітів у 32-бітному двійковому представлені.<br> + Результат C-подібного 32-бітного множення двох аргументів.</td> + </tr> + </tbody> +</table> + +<p>На відміну від багатьох інших об'єктів, вам не потрібно створювати екземпляри об'єкта <code>Math</code>. Завжди слід використоввати вбудований глобальний об'єкт <code>Math</code> безпосередньо.</p> + +<h2 id="Обєкт_Date">Об'єкт <code>Date</code></h2> + +<p>JavaScript не має окремого типу даних для дат. Однак, ви можете скористатись об'єктом {{jsxref("Date")}} та його методами для роботи з датою та часом у вашому проекті. Об'єкт <code>Date</code> має величезну кількість методів для встановлення, отримання та маніпулювання датами, але не має жодних властивостей.</p> + +<p>JavaScript оперує датами подібно до Java. Ці дві мови програмування мають багато подібних методів та зберігають дату як кількість мілісекунд, що минули з 00:00:00 1 січня 1970 року, в той час, як часова мітка Unix позначає кількість секунд, що минули з 00:00:00 1 січня 1970 року.</p> + +<p>Інтервал значень, які може приймати об'єкт <code>Date</code>, знаходиться від -100,000,000 до 100,000,000 днів відносно 1 січня 1970 року за UTC.</p> + +<p>Щоб створити об'єкт <code>Date</code>:</p> + +<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);</pre> + +<p>де <code>dateObjectName</code> - це ім'я створеного об'єкта <code>Date</code>; це може бути як новий об'єкт, так і властивість вже існуючого об'єкта.</p> + +<p>Виклик <code>Date</code> без оператора <code>new</code> повертає теперішню дату та час у вигляді рядка.</p> + +<p>Параметри (<code>parameters</code>) у наведеному записі можуть бути одним з наступних значень:</p> + +<ul> + <li>Порожнє значення: створюється сьогоднішня дата та час. Наприклад, <code>today = new Date();</code>.</li> + <li>Рядок, що представляє дату в наступній формі: "Місяць день, рік години:хвилини:секунди." Наприклад, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Якщо не вказані години, хвилини чи секунди, значення замінюються нулями.</li> + <li>Набір цілочисельних значень для року, місяця та дня. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> + <li>Набір цілочисельних значень для року, місяця, дня, годин, хвилин та секунд. Наприклад, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> +</ul> + +<h3 id="Методи_обєкта_Date">Методи об'єкта <code>Date</code></h3> + +<p>Методи об'єкта <code>Date</code> для роботи з датами та часом підпадають під такі категорії:</p> + +<ul> + <li>методи "set", для встановлення дати та часу в об'єктах <code>Date</code>.</li> + <li>методи "get", для отримання дати та часу з об'єктів <code>Date</code>.</li> + <li>методи "to", для отримання рядкових значень з об'єктів <code>Date</code>. </li> + <li>методи розбору та UTC, для розбору рядків <code>Date</code>.</li> +</ul> + +<p>За допомогою методів "get" та "set" можна встановлювати та отримувати значення секунд, хвилин, годин, днів місяця, днів тижня, місяць та рік окремо. Зверніть увагу на метод <code>getDay</code>, який повертає день тижня, але не існує відповідного методу <code>setDay</code>, оскільки день тижня визначається автоматично. Всі ці методи використовують цілі числа для представлення відповідних даних наступним чином:</p> + +<ul> + <li>Секунди та хвилини: від 0 до 59</li> + <li>Години: від 0 до 23</li> + <li>День: від 0 (неділя) до 6 (субота)</li> + <li>Дата: від 1 до 31 (день місяця)</li> + <li>Місяць: від 0 (січень) до 11 (грудень)</li> + <li>Рік: роки з 1900</li> +</ul> + +<p>Припустимо, ви визначаєте наступну дату:</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995');</pre> + +<p>Тоді <code>Xmas95.getMonth()</code> повертає 11, а <code>Xmas95.getFullYear()</code> повертає 1995.</p> + +<p>Методи <code>getTime</code> та <code>setTime</code> зручні для порівняння дат. Метод <code>getTime</code> повертає кількість мілесекунд від 00:00:00, 1 січня 1970 року.</p> + +<p>Наприклад, наступний код показує, скільки днів залишилось у цьому році:</p> + +<pre class="brush: js notranslate">var today = new Date(); +var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Встановлюємо день та місяць +endYear.setFullYear(today.getFullYear()); // Встановлюємо цей рік +var msPerDay = 24 * 60 * 60 * 1000; // Кількість мілісекунд в одному дні +var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; +var daysLeft = Math.round(daysLeft); //Повертає кількість днів, які залишилися в цьому році</pre> + +<p>Цей приклад створює об'єкт <code>Date</code> на ім'я <code>today</code>, який містить в собі сьогоднішню дату. Далі він створює об'єкт <code>Date</code> на ім'я <code>endYear</code>, якому присвоюється поточний рік. Потім, використовуючи кількість мілісекунд в одному дні, вираховує кількість днів між <code>today</code> та <code>endYear</code>, використовуючи <code>getTime</code> та округливши результат до цілого значення кількості днів.</p> + +<p>Метод <code>parse</code> корисний для присвоєння рядкових значень існуючим об'єктам <code>Date</code>. Наприклад, наступний код використовує <code>parse</code> та <code>setTime</code> для присвоєння дати об'єкту <code>IPOdate</code>:</p> + +<pre class="brush: js notranslate">var IPOdate = new Date(); +IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre> + +<h3 id="Приклад">Приклад</h3> + +<p>У наступному прикладі, функція <code>JSClock()</code> повертає час у форматі цифрового годинника.</p> + +<pre class="brush: js notranslate">function JSClock() { + var time = new Date(); + var hour = time.getHours(); + var minute = time.getMinutes(); + var second = time.getSeconds(); + var temp = '' + ((hour > 12) ? hour - 12 : hour); + if (hour == 0) + temp = '12'; + temp += ((minute < 10) ? ':0' : ':') + minute; + temp += ((second < 10) ? ':0' : ':') + second; + temp += (hour >= 12) ? ' P.M.' : ' A.M.'; + return temp; +}</pre> + +<p>Функція <code>JSClock</code> спочатку створює новий об'єкт <code>Date</code>, який називається <code>time</code>; оскільки жодних аргументів не надано, час створюється на основі поточної дати та часу. Далі викликами методів <code>getHours</code>, <code>getMinutes</code> та <code>getSeconds</code> присвоюються значення поточної години, хвилини та секунди змінним <code>hour</code>, <code>minute</code> та <code>second</code>.</p> + +<p>Наступні чотири інструкції створюють рядкове значення на основі значення часу. Перша інструкція створює змінну <code>temp</code>, присвоюючи їй значення за допомогою умовного виразу: якщо <code>hour</code> більше за 12, то (<code>hour - 12</code>), інакше просто <code>hour</code>, у випадку ж коли <code>hour</code> дорівнює 0, він набуває значення 12.</p> + +<p>Наступна інструкція додає значення <code>minute</code> до змінної <code>temp</code>. Якщо значення <code>minute</code> менше за 10, умовний вираз додає рядок з нулем попереду; інакше додається рядок з двокрапкою для розмежування. Далі аналогічним чином інструкція додає до <code>temp</code> секунди.</p> + +<p>Зрештою, умовний вираз додає "P.M." до <code>temp</code>, якщо <code>hour</code> дорівнює або більший за 12; інакше, додається "A.M.".</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Вирази_та_оператори", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/uk/web/javascript/guide/regular_expressions/index.html b/files/uk/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..e41b342ac7 --- /dev/null +++ b/files/uk/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,635 @@ +--- +title: Регулярні Вирази +slug: Web/JavaScript/Guide/Regular_Expressions +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary"><strong>Регулярні вирази</strong> це шаблони, що використовуються для пошуку збігу,співпадіння в тексті чи строках. В JavaScript регулярні вирази також є обʼєктами. Ці шаблони використовуются для пошуку збігу у тексті. Пропоную розібратись з регулярними виразами JavaScript детальніше.</p> + +<h2 id="Створення_регулярних_виразів">Створення регулярних виразів</h2> + +<p>Ви можете створювати регулярні вирази двома способами:</p> + +<p>Використовуючи літерал регулярного виразу, який складається з шаблону між символами "/" слеш:</p> + +<pre class="brush: js notranslate">var re = /ab+c/; +</pre> + +<p>Цей спосіб підійде для статичних, простих виразів, використовуйте його для покращення продуктивності.</p> + +<p>Або через створення обʼєкта {{jsxref("RegExp")}}:</p> + +<pre class="brush: js notranslate">var re = new RegExp("ab+c"); +</pre> + +<p>В такому випадку створюєтся об'єкт з методами {{jsxref("RegExp.exec", "exec")}} та {{jsxref("RegExp.test", "test")}} класу {{jsxref("RegExp")}}, та методами з {{jsxref("String")}} классу, а саме {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, та {{jsxref("String.split", "split")}}. </p> + +<p>Використовуйте цей спосіб у випадках, коли вам відомо, що шаблон регулярного виразу буде змінюватись. Наприклад для очікування дій користувача з подальшим виконанням якоїсь функції тощо, або для побудови URL маршутів.</p> + +<h2 id="Створення_шаблону_регулярного_виразу">Створення шаблону регулярного виразу</h2> + +<p>Шаблон регулярного виразу складається зі звичайних символів, наприклад <code>/abc/</code>, або комбінації звичайних та спеціальних символів – <code>/ab*c/</code> або <code>/Chapter (\d+)\.\d*/</code>. Останій приклад містить дужки, які використовуються як запамʼятовуючий пристрiй. Збіг з цією частиною шаблону запамʼятовується для подальшого використання, більш докладно про це в розділі {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p> + +<h3 id="Використання_простих_шаблонів">Використання простих шаблонів</h3> + +<p>Прості шаблони складаються з символів, для яких потрібно знайти прямий збіг. Наприклад, шаблон <code>/abc/</code> збігається з комбінацією символів в рядку тільки у випадку, коли символи 'abc' опиняються поруч саме в такому порядку. Збіг буде успішним у рядках типу "Hi, do you know your abc's?" та "The latest airplane designs evolved from sl<strong>abc</strong>raft." В обох випадках шаблон збігається з підрядком 'abc'. В рядку 'Grab crab' збігу не буде, так як він містить підрядок 'abc', що не збігається точно з послідовністю 'abc'.</p> + +<h3 id="Використання_спеціальних_символів">Використання спеціальних символів</h3> + +<p>Коли пошук збігу вимагає чогось більшого ніж прямий збіг, наприклад пошук одного чи більше символу 'b', або пошуку пробілів, шаблон включає спеціальні символи. Так, шаблон <code>/ab*c/</code> збігається з будь-якою символьною комбінацією, де за символом 'a' може бути багато повторів символу 'b' (<code>*</code> значить 0 чи більше випадків) за яким відразу йде символ 'c'. В рядку "cbb<strong>abbbbc</strong>debc," шаблон збігається з підрядком '<strong>abbbbc</strong>'.</p> + +<p>Наступна таблиця містить повний перелік та опис спеціальних символів, які використовуються в регулярних виразах.</p> + +<table class="standard-table"> + <caption>Спеціальні символи, що використовуються в регулярних виразах.</caption> + <thead> + <tr> + <th scope="col">Символ</th> + <th scope="col">Значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td> + <td> + <p>Відповідає одному з наступних правил:<br> + <br> + Зворотній слеш означає що наступний символ є спеціальним та не сприймається буквально. Наприклад, '<strong><code>b</code></strong>' без передуючого '\' збігається з літерою '<strong>b</strong>' у нижньому регістрі. Але вираз '<strong><code>\b</code></strong>' не відповідає жодному збігу; він утворює спеціальний символ, що збігається з <a href="#special-word-boundary" title="#special-word-boundary">межею слова</a>.<br> + <br> + Так, шаблон <strong><code>/a*/</code></strong> покладається на спецсимвол '<strong><code>*</code></strong>', щоб знайти збіг з 0 чи більше символів '<strong>a</strong>'. На відміну від цього, щаблон <strong><code>/a\*/</code></strong> усуває сприйняття '<strong><code>*</code></strong>', як спецсимвол, та дозволяє отримати збіг '<strong>a*</strong>'.<br> + <br> + Не забувайте екранувати символ '<strong>\</strong>' подвійним ' '\\' використовуючи його в нотації RegExp("pattern"), так як '<strong>\</strong>' є екрануючим символом в рядках.</p> + </td> + </tr> + <tr> + <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td> + <td>Шукати збіг окрім перед символом переносу рядка чи кінця строки.<br> + <br> + Наприклад, <strong><code>/^A/</code></strong> не має збігу з "an A", але має збіг в рядку "<strong>A</strong>n E".<br> + <br> + Символ '<strong><code>^</code></strong>' має також і інші значення, коли він вказуєтся на початку шаблону регулярного виразу. Ознайомтесь з розділом <a href="#special-negated-character-set" title="#special-negated-character-set">доповнений набір символів</a> для отримання деталей та прикладів.</td> + </tr> + <tr> + <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td> + <td> + <p>Вказує що на забігу має завершитись строка. </p> + + <p>Наприклад, <strong><code>/t$/</code></strong> не збігається з '<strong>t</strong>' в "eater", але має збіг в "ea<strong>t</strong>".</p> + </td> + </tr> + <tr> + <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td> + <td> + <p>Збіг повторюється 0 чи більше разів. Еквівалент <code>{0,}</code>.</p> + + <p>Наприклад, <strong><code>/bo*/</code></strong> збігається з '<strong>boooo</strong>' в "A ghost <strong>boooo</strong>ed" та з '<strong>b</strong>' in "A <strong>b</strong>ird warbled", але не має збігу в "A goat grunted".</p> + </td> + </tr> + <tr> + <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td> + <td> + <p>Відповідає попередньому символу, що повторюється щонайменше 1 чи більше разів. Еквівалент <code>{1,}</code>.</p> + + <p>Наприклад, <strong><code>/a+/</code></strong> збігається з '<strong>a</strong>' в "c<strong>a</strong>ndy" та з усіма '<strong>a</strong>' в "c<strong>aaaaaaa</strong>ndy", але не має збігів у "cndy".</p> + </td> + </tr> + <tr> + <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td> + <td>Пошук збігу 0 чи 1 раз. Еквівалент <code>{0,1}</code>.<br> + <br> + Наприклад, <code>/e?le?/</code> відповідає '<strong>el</strong>' в "ang<strong>el</strong>" та '<strong>le</strong>' в "ang<strong>le</strong>", а також '<strong>l</strong>' в "os<strong>l</strong>o".<br> + <br> + Якщо вказуєтся одразу після специмволів *, +, ?, або {}, робить їх більш суворими (збіг з найменш можливою кількістю символів), на відміну від типових результатів, на відміну від несуворих пошуків (збіг з максимально можливою кількістю символів). Наприклад, застосування <strong><code>/\d+/</code></strong> (пошук повторення десятичної цифри багато разів) до "<strong>123</strong>abc" знайде "<strong>123</strong>". Але застосування <strong><code>/\d+?/</code></strong> зробить його суворим і результом збігу буде перша цифра "<strong>1</strong>".<br> + </td> + </tr> + <tr> + <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td> + <td> + <p>(дрібна крапка) вказує пошук будь-якого одного символу, окрім початку строки.</p> + + <p>Наприклад, <strong><code>/.n/</code></strong> відповідає '<strong>an</strong>' та '<strong>on</strong>' в рядку "nay, <strong>an</strong> apple is <strong>on</strong> the tree", але не знайде збігів у 'nay'.</p> + </td> + </tr> + <tr> + <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td> + <td> + <p>Пошук 'x' і запам'ятати збіг. Ці дужки також називають <em>захоплюючи дужки</em>.<br> + <br> + '<strong><code>(foo)</code></strong>' та '<strong><code>(bar)</code></strong>' в шаблоні <strong><code>/(foo) (bar) \1 \2/</code></strong> збігаються з першими двома словами в рядку "<strong>foo bar</strong> foo bar" та запамʼятовують їх. А <code><strong>\1</strong></code> та <strong><code>\2</code></strong> в шаблоні відповідають двом останім словам. Зауважте, що <code><strong>\1</strong>, <strong>\2</strong>, <strong>\n</strong></code> використовуються в порівняльній частині регулярного виразу. В зміній частині регулярного виразу потрібно використовувати синтакс <code><strong>$1</strong>, <strong>$2</strong>, <strong>$n</strong></code>: <code>'bar foo'.replace( /(...) (...)/, '$2 $1' )</code>.</p> + </td> + </tr> + <tr> + <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td> + <td>Відповідає 'x', але не запамʼятовує збіг. Такий випадок називається <em>незахоплючими дужками</em>, і дозволяє вам визначати під-вирази для роботи з операторами ругулярних виразів. Розглянемо приклад <strong><code>/(?:foo){1,2}/</code></strong>. Якщо б шаблон був <strong><code>/foo{1,2}/</code></strong>, символи <code>{1,2}</code> застосовувались би тільки до останього символу '<strong>o</strong>' в 'fo<strong>o</strong>'. В незахоплюючих дужках <code>{1,2}</code> застосовується до всього слова 'foo'.</td> + </tr> + <tr> + <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td> + <td> + <p>Відповідає 'x' тільки якщо за 'x' йде 'y'. Це називається випередження.</p> + + <p>Наприклад, <code>/Jack(?=Sprat)/</code> збігатиметься з 'Jack' тількя якщо за ним йде 'Sprat'. <code>/Jack(?=Sprat|Frost)/</code> збігається з 'Jack' тільки якщо за ним йде 'Sprat' або 'Frost'. Проте, а ні 'Sprat', а ні 'Frost' не є частиною результату збігу.</p> + </td> + </tr> + <tr> + <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td> + <td> + <p>Відповідає 'x' тільки якщо за 'x' не йде 'y'. Це називається відʼємним випередженням.</p> + + <p>Наприклад, <strong><code>/\d+(?!\.)/</code></strong> матиме збіг з числом тільки якщо за ним відсутня десяткова точка. Регулярний вираз <code><strong>/\d+(?!\.)/</strong>.exec("3.<strong>141</strong>")</code> матиме збіг з '<strong>141</strong>', але не з '3.141'.</p> + </td> + </tr> + <tr> + <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td> + <td> + <p>Відповідає 'x' або 'y'.</p> + + <p>Наприклад, <strong><code>/green|red/</code></strong> збігається з '<strong>green</strong>' в "<strong>green</strong> apple" та з '<strong>red</strong>' в "<strong>red</strong> apple."</p> + </td> + </tr> + <tr> + <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td> + <td>Відповідає точній кількості n повторень попереднього виразу. N повино бути додатним цілим числом.<br> + <br> + Наприклад, <code>/a{2}/</code> не матиме збігів для 'a' в "candy," але збігатиметься з усіма <strong>a</strong> в "c<strong>aa</strong>ndy," та двом першим <strong>a</strong> в "c<strong>aa</strong>andy."</td> + </tr> + <tr> + <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td> + <td> + <p>Де <code>n</code> та <code>m</code> – додатні цілі числа та <code>n <= m</code>. Відповідає що найменше <code>n</code> та до <code>m</code> включно повторень передуючого виразу. Якщо <code>m</code> немає, вважається що <code>m = ∞</code>.</p> + + <p>Наприклад, <code>/a{1,3}/</code> не збігається з рядком "cndy", відповідає '<strong>a</strong>' в "c<strong>a</strong>ndy," та першим двом <strong>a</strong> в "c<strong>aa</strong>ndy," а також першим трьом <strong>a</strong> в "c<strong>aaa</strong>aaaandy". Зауважте що під час порівняння "c<strong>aaa</strong>aaaandy", відповідає лише "<strong>aaa</strong>", навіть якщо оригінальний рядок містить довший рядок з <strong>a</strong>.</p> + </td> + </tr> + <tr> + <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td> + <td>Набір символів. Відповідає збігу з будь-яким із символів шаблону, включаючи <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючі послідовності</a>. Спеціальні символи такі як точка (<code>.</code>) та зірочка (<code>*</code>) не є спецсимволами в середині набору символів та не потребують екранування. Ви можете задавати послідовності використовуючи дефіс, як в наступному прикладі.<br> + <br> + Шаблон<code> [a-d]</code>, що представляє теж саме що й <code>[abcd]</code>, збігається з '<strong>b</strong>' в "<strong>b</strong>risket" та з '<strong>c</strong>' в "<strong>c</strong>ity". Шаблони <code><strong>/[a-z.]+/</strong> та</code> <strong><code>/[\w.]+/</code></strong> збігаються зі всім рядком "test.i.ng".</td> + </tr> + <tr> + <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td> + <td> + <p>Відʼємний або компліментарний набір змін. Цей вираз відповідає збігу з будь-чим що не міститься в квадратних дужках. Ви можете зазначити діапазон використовуючи дефіс. Все що працює зі звичайним набором символів спрацює і в цьому випадку.</p> + + <p>Наприклад, <code>[^abc]</code> теж саме що й <code>[^a-c]</code>. Вони відповідають збігу 'r' в "brisket" та 'h' в "chop."</p> + </td> + </tr> + <tr> + <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td> + <td>Відповідає символу backspace (U+0008). Потрібно використовувати квадратні дужки, якщо ви бажаєте отримати збіг з літералом backspace. (Не треба плутати з <code>\b</code>.)</td> + </tr> + <tr> + <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td> + <td> + <p>Відповідає межі слова. Межа слова відповідає позиції де літерному символу не передує або слідує за ним інший літерний символ. Зауважте, що межа слова не включається до збігу. Іншими словами його довжина дорівнює нулю. (Не треба плутати з <code>[\b]</code>.)</p> + + <p>Приклади:<br> + <code>/\bm/</code> відповідає '<strong>m</strong>' в "<strong>m</strong>oon" ;<br> + <code>/oo\b/</code> не збігається з '<strong>oo</strong>' в "m<strong>oo</strong>n", тому що за '<strong>oo</strong>' йде символ '<strong>n</strong>', який є літерним символом;<br> + <code>/oon\b/</code> збігається з '<strong>oon</strong>' в "m<strong>oon</strong>", тому що '<strong>oon</strong>' є кінцем рядка, тож за ним не йде літерний символ;<br> + <code>/\w\b\w/</code> ніколи не буде мати збігу, тому що за літерним символом ніколи не буде йти не-літерний символ разом з літерним символом.</p> + + <div class="note"> + <p><strong>Примітка:</strong> Рушій регулярних виразів JavaScript визначає <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">особливий набір символів</a> що є літерними символами. Будь-який символ не з цього переліка вважається розділовим знаком - межею слова. Цей набір символів є доволі обмеженим: він складається тільки з символів латинської абетки в верхньому та нижньому регістрах, цифр та символу підкресленя. Акцентовані літери, такі як "é" або "ü", несподівано, вважаються розділовими знаками.</p> + </div> + </td> + </tr> + <tr> + <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td> + <td> + <p>Відповідає межі не-слова. Цей літерал відповідає позиції де попередній та наступний символи є символами одного типу: Тож обидва символи повині бути літерними, або не-літерними символами. Початок та кінець рядка вважаються не-літерними символами.</p> + + <p>Наприклад, <code>/\B../</code> відповідає '<strong>oo</strong>' в "n<strong>oo</strong>nday", та <code>/y\B./</code> збігається з 'ye' в "possibly <strong>ye</strong>sterday."</p> + </td> + </tr> + <tr> + <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td> + <td> + <p>Де <em>X</em> є символом в діапазоні від A до Z. Відповідає керуючим символам в рядку.</p> + + <p>Наприклад, <code>/\cM/</code> відповідає control-M (U+000D) в рядку.</p> + </td> + </tr> + <tr> + <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td> + <td> + <p>Відповідає цифровому символу. Еквівалент <code>[0-9]</code>.</p> + + <p>Наприклад, <code>/\d/</code> або <code>/[0-9]/</code> збігатиметься з '<strong>2</strong>' в "B<strong>2</strong> is the suite number."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td> + <td> + <p>Відповідає не-цифровому символу. Еквівалент <code>[^0-9]</code>.</p> + + <p>Наприклад, <code>/\D/</code> або <code>/[^0-9]/</code> збігатиметься з '<strong>B</strong>' в "<strong>B</strong>2 is the suite number."</p> + </td> + </tr> + <tr> + <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td> + <td>Відповідає символу прогону сторінки (U+000C).</td> + </tr> + <tr> + <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td> + <td>Відповідає символу переводу рядка (U+000A).</td> + </tr> + <tr> + <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td> + <td>Відповідає символу повернення каретки (U+000D).</td> + </tr> + <tr> + <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td> + <td> + <p>Відповідає одиничному пробільному символу, включаючи пробіл, табуляцію, прогін сторінки, перевод рядка. Еквівалент <code>[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>Наприклад, <code>/\s\w*/</code> збігається з ' <strong>bar</strong>' в "foo <strong>bar</strong>."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td> + <td> + <p>Відповідає одиничному непробільному символу. Еквівалент <code>[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>Наприклад, <code>/\S\w*/</code> відповідає '<strong>foo</strong>' в "<strong>foo</strong> bar."</p> + </td> + </tr> + <tr> + <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td> + <td>Відповідає табуляції (U+0009).</td> + </tr> + <tr> + <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td> + <td>Відповідає вертикальній табуляції (U+000B).</td> + </tr> + <tr> + <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td> + <td> + <p>Відповідає будь-якому літерно-цифровому символу включаючи символ підкреслювання. Еквівалент <code>[A-Za-z0-9_]</code>.</p> + + <p>Наприклад, <code>/\w/</code> відповідає '<strong>a</strong>' в "<strong>a</strong>pple," '<strong>5</strong>' в "$<strong>5</strong>.28," та '<strong>3</strong>' в "<strong>3</strong>D."</p> + </td> + </tr> + <tr> + <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td> + <td> + <p>Відповідає будь-якому не-літерному символу. Еквівалент <code>[^A-Za-z0-9_]</code>.</p> + + <p>Наприклад, <code>/\W/</code> або <code>/[^A-Za-z0-9_]/</code> відповідає '<strong>%</strong>' в "50<strong>%</strong>."</p> + </td> + </tr> + <tr> + <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td> + <td> + <p>Де <em>n</em> є додатним цілим числом, зворотнє посилання на останій збіг підрядка з <em>n</em>-х відповідних круглих дужок шаблона регулярного виразу (рахуючи від лівої дужки).</p> + + <p>Наприклад, <code>/apple(,)\sorange\1/</code> відповідає '<strong>apple, orange,</strong>' в "<strong>apple, orange,</strong> cherry, peach."</p> + </td> + </tr> + <tr> + <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td> + <td>Відповідає символу NULL (U+0000). Не використовуйте цей символ разом з іншими цифрами, тому що <code>\0<digits></code> є вісімковою <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">керуючою послідовністю</a>.</td> + </tr> + <tr> + <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td> + <td>Відповідає символу з кодом hh (два шістнадцяткові знаки)</td> + </tr> + <tr> + <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td> + <td>Відповідає символу з кодом hhhh (чотири шістнадцяткові знаки).</td> + </tr> + <tr> + <td><a href="#special-unicode-escape-es6" id="special-unicode-escape-es6" name="special-unicode-escape-es6"><code>\u{hhhh}</code></a></td> + <td>(тільки разом з прапором <strong>u</strong>) Відповідає символу Юнікод з коом hhhh (шістнадцяткові знаки).</td> + </tr> + </tbody> +</table> + +<p>Екранований ввід користувача буде вважатись літерною послідовністю після застосування регулярного виразу для простої заміни:</p> + +<pre class="brush: js notranslate">function escapeRegExp(string){ + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& - підстановка результату +}</pre> + +<h3 id="Використання_дужок">Використання дужок</h3> + +<p>Дужки навколо будь-якої частини регулярного виразу означають, що ця частина порівнюванного рядка буде збережена. Після цього, ця частина рядка може бути вкликана для повторного використання, більш докладно у {{ web.link("#Using_parenthesized_substring_matches", "Використання збігів підрядків у дужках") }}.</p> + +<p>Наприклад, шаблон <code>/Chapter (\d+)\.\d*/</code> показує додатково екрановані та спеціальні символи частини шаблону, яку потрібно запамʼятати. Він відповідає точному збігу слова 'Chapter ' за яким йде один чи більше цифрових символів (<strong><code>\d</code></strong> означає будь-який цифровий символ, а <strong><code>+</code></strong> означає 1 чи більше разів), за якими йде десяткова точка (яка сама по собі є спеціальним символом; додавання слеша <strong>\</strong> перед точкою дозволяє зробити її звичайним символом '<strong>.</strong>'), за якою йде будь-яке число, що повторюється від 0 та більше разів (<strong><code>\d</code></strong> означає числовий символ, <strong><code>*</code></strong><code> </code>означає 0 та більше разів). На додачу, дужки використовуються для того, щоб запамʼятати першу послідовність числових символів.</p> + +<p>Цей шаблон в рядку "Open Chapter 4.3, paragraph 6" знайде числовий символ '4' та запамʼятає його. Шаблон не знайде збігів в "Chapter 3 and 4", тому що рядок не містить точку після '3'.</p> + +<p>Для пошуку відповідності підрядка в дужках без його запамʼятовування. додавайте на початку шаблона в дужках комбінацію <strong><code>?:</code></strong>. Наприклад, <code>(?:\d+)</code> відповідає одному чи білше числовому символу але без їх запамʼятовування.</p> + +<h2 id="Робота_з_регулярними_виразами">Робота з регулярними виразами</h2> + +<p>Регулярні вирази використовуються разом з методами RegExp: test та exec, а також з методами String: mathc, replace, search та split. Ці методи детально описані в <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>.</p> + +<table class="standard-table"> + <caption>Методи, які використовують регулярні вирази</caption> + <thead> + <tr> + <th scope="col">Метод</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("RegExp.exec", "exec")}}</td> + <td>Метод <code>RegExp, який виконує пошук віповідностей у рядку. Він повертає список знайдених відповідностей.</code></td> + </tr> + <tr> + <td>{{jsxref("RegExp.test", "test")}}</td> + <td>Метод <code>RegExp, який перевіряє, чи рядок містить відповідність регулярному виразу. Повертає</code> true або false.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}</td> + <td>Метод <code>String</code> який виконує пошук відповідностей у рядку. Повертає список знайдених відповідностей, або null за невдачі.</td> + </tr> + <tr> + <td>{{jsxref("String.search", "search")}}</td> + <td>Метод <code>String</code> який перевіряє , чи рядок містить відповідність регулярному виразу. Повертає індекс відповідності або -1 в разі невдачі.</td> + </tr> + <tr> + <td>{{jsxref("String.replace", "replace")}}</td> + <td>Метод <code>String</code> який виконує пошук відповідності у рядку і заміну знайдених підрядків на заданий рядок заміни.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td>Метод <code>String</code> який застосовує регулярний вираз чи рядок-розділювач для розбиття рядку на список підрядків..</td> + </tr> + </tbody> +</table> + +<p>Коли Вам потрібно дізнатися чи міститься шаблон у рядку, використовуйте методи <code>test</code> або <code>search</code>, для детальнішої інформації використовуйте методи <code>exec</code> чи <code>match</code> (виконуються повільніше). Якщо методи <code>exec</code> або <code>match</code> знаходять відповідність вони повертають список і оновлюють властивості пов'язаного об'єкта регулярного виразу, а також передвизначеного об'єкта регулярного виразу, <code>RegExp</code>. В протилежному випадку, метод <code>exec</code> повертає <code>null</code> (який приводиться до <code>false</code>).</p> + +<p>В наступному прикладі, скрипт використовує метод <code>exec</code> для знаходження віповідності у рядку.</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec("cdbbdbsbz"); +</pre> + +<p>Якщо у Вас немє потреби мати доступ до властивостей регулярного виразу, альтернативний шлях створення <code>myArray</code> - у такому скрипті:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +</pre> + +<p>Ще один варіант цього скрипта, на випадок, якщо Вам потрібно сконструювати регулярний вираз з рядка:</p> + +<pre class="brush: js notranslate">var myRe = new RegExp("d(b+)d", "g"); +var myArray = myRe.exec("cdbbdbsbz"); +</pre> + +<p>Скрипти в цих прикладах знаходять відповідність, повертають список з результатами пошуку а також оновлюють властивості, показані в наступній таблиці.</p> + +<table class="standard-table"> + <caption>Результати виконання регулярного виразу</caption> + <thead> + <tr> + <th scope="col">Об'єкт</th> + <th scope="col">Властивість чи індекс</th> + <th scope="col">Опис</th> + <th scope="col">У цьому прикладі</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td></td> + <td>Відповідний рядок та всі запам'ятовані підрядки.</td> + <td><code>["dbbd", "bb"]</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>Індекс відповідності на основі 0 у вхідному рядку.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>Початковий рядок.</td> + <td><code>"cdbbdbsbz"</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Останні відповідні символи.</td> + <td><code>"dbbd"</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td>Індекс з якого починати наступне порівняння. (Ця властивість встановлюється лише якщо регулярний вираз використовує g опцію, описану в {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }}.)</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>Текст шаблону. Оновлений під час створення регулярного виразу, а не викионання.</td> + <td><code>"d(b+)d"</code></td> + </tr> + </tbody> +</table> + +<p>Як показано у другій формі цього прикладу, ви можете використовувати регулярні вирази створені через ініціалізатор об'єкта без привласнення їх до змінної. Однак якщо ви робите це, то кожен випадок це регулярний вирах. По цій причині, якщо ви використовуєте цю фору без привласнення до змінної, то у ви не зможете використовувати властивості регулярних виразів. Для прикладу, представте, що у вас є наступний скрипт:</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec("cdbbdbsbz"); +console.log("The value of lastIndex is " + myRe.lastIndex); + +// "Значення lastIndex є 5" +</pre> + +<p>Однак, якщо ви маєте цей скрипт:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec("cdbbdbsbz"); +console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex); + +// "Значення lastIndex є 0" +</pre> + +<p>Випадки <code>/d(b+)d/g</code> у цих двох виразах є різними об'єктами регулярних виразів, отже мають різні значення для їх <code>lastIndex</code> властивості. Якщо вам треба мати доступ до властивостей регулярного виразу, який був створений через ініціалізатор об'єкту, то спочатку вам треба привласнити його до змінної.</p> + +<h3 id="Використання_збігів_підрядків_у_дужках"><a id="Using_parenthesized_substring_matches" name="Using_parenthesized_substring_matches">Використання збігів підрядків у дужках</a></h3> + +<p>Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, <code>/a(b)c/</code> matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the <code>Array</code> elements <code>[1]</code>, ..., <code>[n]</code>.</p> + +<p>The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.</p> + +<p>The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the <code>$1</code> and <code>$2</code> in the replacement to denote the first and second parenthesized substring matches.</p> + +<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +var str = "John Smith"; +var newstr = str.replace(re, "$2, $1"); +console.log(newstr); +</pre> + +<p>This prints "Smith, John".</p> + +<h3 id="Advanced_searching_with_flags">Advanced searching with flags</h3> + +<p>Regular expressions have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p> + +<table class="standard-table"> + <caption>Regular expression flags</caption> + <thead> + <tr> + <th scope="col">Flag</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Global search.</td> + </tr> + <tr> + <td>i</td> + <td>Case-insensitive search.</td> + </tr> + <tr> + <td>m</td> + <td>Multi-line search.</td> + </tr> + <tr> + <td>y</td> + <td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}</td> + </tr> + </tbody> +</table> + +<p>To include a flag with the regular expression, use this syntax:</p> + +<pre class="brush: js notranslate">var re = /pattern/flags; +</pre> + +<p>or</p> + +<pre class="brush: js notranslate">var re = new RegExp("pattern", "flags"); +</pre> + +<p>Note that the flags are an integral part of a regular expression. They cannot be added or removed later.</p> + +<p>For example, <code>re = /\w+\s/g</code> creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +var str = "fee fi fo fum"; +var myArray = str.match(re); +console.log(myArray); +</pre> + +<p>This displays ["fee ", "fi ", "fo "]. In this example, you could replace the line:</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +</pre> + +<p>with:</p> + +<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g"); +</pre> + +<p>and get the same result.</p> + +<p>The <code>m</code> flag is used to specify that a multiline input string should be treated as multiple lines. If the <code>m</code> flag is used, <code>^</code> and <code>$</code> match at the start or end of any line within the input string instead of the start or end of the entire string.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following examples show some uses of regular expressions.</p> + +<h3 id="Changing_the_order_in_an_input_string">Changing the order in an input string</h3> + +<p>The following example illustrates the formation of regular expressions and the use of <code>string.split()</code> and <code>string.replace()</code>. It cleans a roughly formatted input string containing names (first name first) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.</p> + +<pre class="brush: js notranslate">// The name string contains multiple spaces and tabs, +// and may have multiple spaces between first and last names. +var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; + +var output = ["---------- Original String\n", names + "\n"]; + +// Prepare two regular expression patterns and array storage. +// Split the string into array elements. + +// pattern: possible white space then semicolon then possible white space +var pattern = /\s*;\s*/; + +// Break the string into pieces separated by the pattern above and +// store the pieces in an array called nameList +var nameList = names.split(pattern); + +// new pattern: one or more characters then spaces then characters. +// Use parentheses to "memorize" portions of the pattern. +// The memorized portions are referred to later. +pattern = /(\w+)\s+(\w+)/; + +// New array for holding names being processed. +var bySurnameList = []; + +// Display the name array and populate the new array +// with comma-separated names, last first. +// +// The replace method removes anything matching the pattern +// and replaces it with the memorized string—second memorized portion +// followed by comma space followed by first memorized portion. +// +// The variables $1 and $2 refer to the portions +// memorized while matching the pattern. + +output.push("---------- After Split by Regular Expression"); + +var i, len; +for (i = 0, len = nameList.length; i < len; i++){ + output.push(nameList[i]); + bySurnameList[i] = nameList[i].replace(pattern, "$2, $1"); +} + +// Display the new array. +output.push("---------- Names Reversed"); +for (i = 0, len = bySurnameList.length; i < len; i++){ + output.push(bySurnameList[i]); +} + +// Sort by last name, then display the sorted array. +bySurnameList.sort(); +output.push("---------- Sorted"); +for (i = 0, len = bySurnameList.length; i < len; i++){ + output.push(bySurnameList[i]); +} + +output.push("---------- End"); + +console.log(output.join("\n")); +</pre> + +<h3 id="Using_special_characters_to_verify_input">Using special characters to verify input</h3> + +<p>In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.</p> + +<p>Within non-capturing parentheses <code>(?:</code> , the regular expression looks for three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code> followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, (end non-capturing parenthesis <code>)</code>), followed by one dash, forward slash, or decimal point and when found, remember the character <code>([-\/\.])</code>, followed by three digits <code>\d{3}</code>, followed by the remembered match of a dash, forward slash, or decimal point <code>\1</code>, followed by four digits <code>\d{4}</code>.</p> + +<p>The <code>Change</code> event activated when the user presses Enter sets the value of <code>RegExp.input</code>.</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> + var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; + function testInfo(phoneInput){ + var OK = re.exec(phoneInput.value); + if (!OK) + window.alert(phoneInput.value + " isn't a phone number with area code!"); + else + window.alert("Thanks, your phone number is " + OK[0]); + } + </script> + </head> + <body> + <p>Enter your phone number (with area code) and then click "Check". + <br>The expected format is like ###-###-####.</p> + <form action="#"> + <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button> + </form> + </body> +</html> +</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/uk/web/javascript/guide/using_promises/index.html b/files/uk/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..d3b986e51a --- /dev/null +++ b/files/uk/web/javascript/guide/using_promises/index.html @@ -0,0 +1,363 @@ +--- +title: Використання промісів +slug: Web/JavaScript/Guide/Using_promises +tags: + - JavaScript + - Promise + - Посібник + - Проміс + - асинхронний +translation_of: Web/JavaScript/Guide/Using_promises +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<div>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> + +<p>{{jsxref("Promise")}} (з англ. - "обіцянка", далі - "проміс") - це об'єкт, що відображає кінцеве завершення або невдачу асинхронної операції. Оскільки більшість людей є споживачами раніше створенних промісів, цей посібник спочатку пояснить споживання повернених промісів, а далі пояснить, як їх створювати.</p> + +<p>Проміс, по суті, є поверненим об'єктом, до якого ви прикріплюєте функції зворотного виклику, замість того, щоб передавати їх у функцію.</p> + +<p>Уявіть собі функцію <code>createAudioFileAsync()</code>, яка асинхронно генерує звуковий файл, маючи конфігураційний запис та дві функції зворотного виклику, одна викликається, якщо аудіофайл був успішно створений, а інша викликається, якщо виникає помилка.</p> + +<p>Ось код, який використовує <code>createAudioFileAsync()</code>:</p> + +<pre class="brush: js line-numbers language-js notranslate">function successCallback(result) { + console.log("Аудіофайл створений за адресою: " + result); +} + +function failureCallback(error) { + console.log("Під час створення аудіофайлу виникла помилка: " + error); +} + +createAudioFileAsync(audioSettings, successCallback, failureCallback); +</pre> + +<p>Замість цього, сучасні функції повертають проміс, до якого ви можете приєднати функції зворотного виклику:</p> + +<p>Якщо переписати функцію <code>createAudioFileAsync()</code>, щоб вона повертала проміс, її використання буде ось таким простим:</p> + +<pre class="brush: js notranslate">createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</pre> + +<p>Це скорочений запис для:</p> + +<pre class="brush: js notranslate">const promise = createAudioFileAsync(audioSettings); +promise.then(successCallback, failureCallback);</pre> + +<p>Ми називаємо це <em>асинхронним викликом функції</em>. Ця конвенція має декілька переваг. Ми дослідимо кожну з них.</p> + +<h2 id="Гарантії">Гарантії</h2> + +<p>На відміну від старомодних колбеків, проміс постачається з певними гарантіями:</p> + +<ul> + <li>Функції зворотного виклику ніколи не будуть викликані до <a href="/uk/docs/Web/JavaScript/EventLoop">завершення поточного виконання</a> циклу подій JavaScript.</li> + <li>Функції зворотного виклику, додані за допомогою <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>, навіть <em>після</em> успіху або невдачі асинхронної операції, будуть викликані, як наведено вище.</li> + <li>Можна додати більше одного зворотного виклику, викликавши метод <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> декілька разів. Кожен зворотний виклик виконується один за одним, у тому порядку, в якому вони були додані.</li> +</ul> + +<p>Однією з величезних переваг промісів є <strong>ланцюгування</strong>.</p> + +<h2 id="Ланцюгування">Ланцюгування</h2> + +<p>Типовою потребою є виконання двох або більше асинхронних операцій одна за одною, коли кожна наступна операція починається, коли попередня успішно завершується, з результатом з попереднього кроку. Ми досягаємо цього, створюючи <strong>ланцюжок промісів</strong>.</p> + +<p>Ось вам магія: функція <code>then()</code> повертає <strong>новий проміс</strong>, що відрізняється від оригіналу:</p> + +<pre class="brush: js notranslate">const promise = doSomething(); +const promise2 = promise.then(successCallback, failureCallback); +</pre> + +<p>або</p> + +<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback); +</pre> + +<p>Цей другий проміс (<code>promise2</code>) представляє собою завершення не тільки <code>doSomething()</code>, але й <code>successCallback</code> або <code>failureCallback</code>, які ви передали, вони, в свою чергу, можуть бути іншими асинхронними функціями, що повертають проміс. В цьому випадку будь-які функції зворотного виклику, додані до <code>promise2</code>, стають в чергу за промісом, що повертається <code>successCallback</code> чи <code>failureCallback</code>.</p> + +<p>По суті, кожен проміс відображає завершення іншого асинхроннго кроку в ланцюжку.</p> + +<p>В старі часи виконання декількох асинхронних операцій підряд призвело б до класичної піраміди смерті з колбеків:</p> + +<pre class="brush: js notranslate">doSomething(function(result) { + doSomethingElse(result, function(newResult) { + doThirdThing(newResult, function(finalResult) { + console.log('Ось фінальний результат: ' + finalResult); + }, failureCallback); + }, failureCallback); +}, failureCallback); +</pre> + +<p>З сучасними функціями замість цього ми приєднуємо наші функції зворотного виклику до промісів, що повертаються, формуючи ланцюжок промісів.</p> + +<pre class="brush: js notranslate">doSomething().then(function(result) { + return doSomethingElse(result); +}) +.then(function(newResult) { + return doThirdThing(newResult); +}) +.then(function(finalResult) { + console.log('Ось фінальний результат: ' + finalResult); +}) +.catch(failureCallback); +</pre> + +<p>Аргументи до <code>then</code> є необов'язковими, а <code>catch(failureCallback)</code> - це скорочений запис для <code>then(null, failureCallback)</code>. Ви можете побачити це, виражене за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>:</p> + +<pre class="brush: js notranslate">doSomething() +.then(result => doSomethingElse(result)) +.then(newResult => doThirdThing(newResult)) +.then(finalResult => { + console.log(`Ось фінальний результат: ${finalResult}`); +}) +.catch(failureCallback); +</pre> + +<p><strong>Важливо</strong>: Завжди повертайте результати, інакше функції зворотного виклику не перехоплять результат попереднього проміса (у стрілкових функціях <code>() => x</code> є скороченим записом для <code>() => { return x; }</code>).</p> + +<h3 id="Ланцюгування_після_catch">Ланцюгування після catch</h3> + +<p>Ланцюгувати <em>після </em>невдачі можливо, наприклад, <code>catch</code> є корисним у разі виконання нових операцій навіть після того, як операція у ланцюжку завершилась неуспішно. Дивіться наступний приклад:</p> + +<pre class="brush: js notranslate">new Promise((resolve, reject) => { + console.log('Початковий'); + + resolve(); +}) +.then(() => { + throw new Error('Щось пішло не так'); + + console.log('Зробити це'); +}) +.catch(() => { + console.log('Зробити те'); +}) +.then(() => { + console.log('Зробити це, що б не відбувалось раніше'); +}); + +</pre> + +<p>Це виведе наступний текст:</p> + +<pre class="notranslate">Початковий +Зробити те +Зробити це, що б не відбувалось раніше +</pre> + +<p><strong>Зауважте:</strong> Текст "Зробити це" не був виведений, тому що помилка "Щось пішло не так" спричинила відхилення.</p> + +<h2 id="Спливання_помилок">Спливання помилок</h2> + +<p>Ви, можливо, пригадуєте, що тричі бачили <code>failureCallback</code> раніше, у піраміді смерті, у порівнянні з лише одним викликом наприкінці ланцюжку промісів.</p> + +<pre class="brush: js notranslate">doSomething() +.then(result => doSomethingElse(value)) +.then(newResult => doThirdThing(newResult)) +.then(finalResult => console.log(`Ось фінальний результат: ${finalResult}`)) +.catch(failureCallback); +</pre> + +<p>Якщо виникає виняток, переглядач передивляється ланцюжок у пошуках обробників <code>catch</code> або <code>onRejected</code>. Це дуже схоже на модель того, як працює синхронний код:</p> + +<pre class="brush: js notranslate">try { + let result = syncDoSomething(); + let newResult = syncDoSomethingElse(result); + let finalResult = syncDoThirdThing(newResult); + console.log(`Ось фінальний результат: ${finalResult}`); +} catch(error) { + failureCallback(error); +} +</pre> + +<p>Ця симетрія з асинхронним кодом сягає кульмінації в синтаксичному цукрі <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> в ECMAScript 2017:</p> + +<pre class="brush: js notranslate">async function foo() { + try { + let result = await doSomething(); + let newResult = await doSomethingElse(result); + let finalResult = await doThirdThing(newResult); + console.log(`Ось фінальний результат: ${finalResult}`); + } catch(error) { + failureCallback(error); + } +} +</pre> + +<p>Він будується на промісах, наприклад, <code>doSomething()</code> - це та сама функція, що й раніше. Ви можете прочитати більше про синтаксис <a href="https://developers.google.com/web/fundamentals/primers/async-functions">тут</a>.</p> + +<p>Проміси виправляють фундаментальну хибу з пірамідою смерті, перехоплюючи всі помилки, навіть викинуті винятки та помилки программування. Це критично важливо для функціональної композиції асинхронних операцій.</p> + +<h2 id="Події_відхилення_промісів">Події відхилення промісів</h2> + +<p>Коли проміс відхиляється, одна з двох подій надсилається у глобальну область видимості (загалом, це або <a href="/uk/docs/Web/API/Window"><code>window</code></a>, або, при використанні у веб-виконавці, це <a href="/uk/docs/Web/API/Worker"><code>Worker</code></a> або інший інтерфейс на базі виконавців). Ці дві події наступні:</p> + +<dl> + <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event" title="Подія rejectionhandled надсилається у глобальну область видимості скрипта (зазвичай, window, але також і Worker), коли об'єкт JavaScript Promise відхиляється, але після того, як відхилення було оброблене."><code>rejectionhandled</code></a></dt> + <dd>Надсилається, коли проміс відхиляється, після того, як відхилення було оброблене функцією виконавця <code>reject</code>.</dd> + <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event" title="Подія unhandledrejection надсилається у глобальну область видимості скрипта, коли об'єкт JavaScript Promise, який не має обробника відхилення, відхиляється; зазвичай, це window, але також може бути Worker."><code>unhandledrejection</code></a></dt> + <dd>Надсилається, коли проміс відхиляється, але немає доступного обробника відхилення.</dd> +</dl> + +<p>У обох випадках подія (типу <a href="/uk/docs/Web/API/PromiseRejectionEvent" title="Інтерфейс PromiseRejectionEvent відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript Promise відхиляються."><code>PromiseRejectionEvent</code></a>) має в якості полів властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/promise"><code>promise</code></a>, яка вказує відхилений проміс, та властивість <a href="/uk/docs/Web/API/PromiseRejectionEvent/reason"><code>reason</code></a>, яка передає надану причину відхилення проміса.</p> + +<p>Це робить можливою резервну обробку помилок для промісів, а також допомагає відлагоджувати проблеми в управлінні промісами. Ці обробники є глобальними за контекстом, тому усі помилки потраплятимуть в однакові обробники подій, незалежно від джерела.</p> + +<p>Один випадок особливої корисності: при написанні коду для {{Glossary("Node.js")}}, зазвичай, модулі, які ви включаєте у свій проект, можуть мати необроблені відхилені проміси. Вони виводяться у консоль середовищем виконання Node. Ви можете перехопити їх для аналізу та обробити у своєму коді — або просто уникнути захаращення ними виводу даних — додавши обробник події <a href="/uk/docs/Web/API/Window/unhandledrejection_event"><code>unhandledrejection</code></a>, ось так:</p> + +<pre class="brush: js notranslate">window.addEventListener("unhandledrejection", event => { + /* Ви можете почати тут, додавши код, щоб дослідити + вказаний проміс через event.promise та причину у + event.reason */ + + event.preventDefault(); +}, false);</pre> + +<p>Викликавши метод події <a href="/uk/docs/Web/API/Event/preventDefault" title="Метод інтерфейсу Event preventDefault() каже програмному агенту, що, якщо подія не була явно оброблена, її дія за замовчуванням не має виконуватись."><code>preventDefault()</code></a>, ви кажете середовищу виконання JavaScript не виконувати дію за замовчуванням, коли відхилений проміс лишається необробленим. Ця дія зазвичай містить виведення помилки у консоль, а це якраз випадок для Node.</p> + +<p>В ідеалі, звісно, ви маєте досліджувати відхилені проміси, щоб бути певними, що жоден з них не є насправді помилкою коду, перед тим, як відкидати ці події.</p> + +<h2 id="Створення_промісу_на_основі_старого_API_зі_зворотним_викликом">Створення промісу на основі старого API зі зворотним викликом</h2> + +<p>{{jsxref("Promise","Проміс")}} може бути створенний з нуля за допогою свого конструктора. Це необхідно лише для обгортки старих API.</p> + +<p>В ідеальному світі всі асинхронні функції повертали б проміси. На жаль, деякі API досі очікують старомодну передачу функцій зворотного виклику для успіху та/або невдачі. Найбільш очевидним прикладом є функція {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p> + +<pre class="brush: js notranslate">setTimeout(() => saySomething("Пройшло 10 секунд"), 10000); +</pre> + +<p>Змішування старомодних зворотних викликів та промісів є проблематичним. Якщо <code>saySomething</code> завершиться невдачею або міститиме помилку программування, ніщо її не перехопить.</p> + +<p>На щастя, ми можемо обгорнути <code>saySomething</code> у проміс. Найкращою практикою вважається обгортати проблематичні функції на якомога нижчому рівні і вже ніколи не звертатись до них прямо.</p> + +<pre class="brush: js notranslate">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); + +wait(10000).then(() => saySomething("10 секунд")).catch(failureCallback); +</pre> + +<p>По суті, конструктор промісу приймає функцію виконання, яка дозволяє вирішити або відхилити проміс вручну. Оскільки <code>setTimeout</code>, насправді, ніколи не завершується невдало, ми пропускаємо функцію відхилення в цьому випадку.</p> + +<h2 id="Композиція">Композиція</h2> + +<p>Методи {{jsxref("Promise.resolve()")}} та {{jsxref("Promise.відхилено", "Promise.reject()")}} є скороченими записами для створення вручну вже вирішених або відхилених промісів відповідно. Інколи це може бути корисно.</p> + +<p>Методи {{jsxref("Promise.all()")}} та {{jsxref("Promise.race()")}} є двома інструментами композиції для паралельного виконання асинхронних операції.</p> + +<p>Ми можемо почати операції паралельно та чекати, доки вони усі не завершаться ось так:</p> + +<pre class="brush: js notranslate">Promise.all([func1(), func2(), func3()]) +.then(([result1, result2, result3]) => { /* використати result1, result2 та result3 */ });</pre> + +<p>Послідовна композиція можлива з використанням певного розумного JavaScript:</p> + +<pre class="brush: js notranslate">[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve()) +.then(result3 => { /* використати result3 */ });</pre> + +<p>По суті, ми зменшуємо масив асинхронних функцій до ланцюжка промісів, еквівалентного: <code>Promise.resolve().then(func1).then(func2).then(func3);</code></p> + +<p>Це можна перетворити на композиційну функцію багаторазового використання, що є типовим у функціональному програмуванні:</p> + +<pre class="brush: js notranslate">const applyAsync = (acc,val) => acc.then(val); +const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));</pre> + +<p>Функція <code>composeAsync()</code> прийме будь-яку кількість функцій в якості аргументів і поверне нову функцію, яка приймає початкове значення, що має пройти крізь конвеєр композиції:</p> + +<pre class="brush: js notranslate">const transformData = composeAsync(func1, func2, func3); +const result3 = transformData(data); +</pre> + +<p>В ECMAScript 2017 послідовну композицію можна виконати простіше, за допомогою async/await:</p> + +<pre class="brush: js notranslate">let result; +for (const f of [func1, func2, func3]) { + result = await f(result); +} +/* використати останній результат (тобто, result3) */</pre> + +<h2 id="Хронометраж">Хронометраж</h2> + +<p>Щоб уникнути сюрпризів, функції, передані до <code>then()</code>, ніколи не викликатимуться синхронно, навіть для вже вирішеного проміса:</p> + +<pre class="brush: js notranslate">Promise.resolve().then(() => console.log(2)); +console.log(1); // 1, 2 +</pre> + +<p>Замість негайного виконання, передані функції ставляться у чергу мікрозадач. Це означає, що вони виконуються пізніше, коли черга стає порожньою в кінці поточного виконання циклу подій JavaScript, тобто, досить скоро:</p> + +<pre class="brush: js notranslate">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); + +wait().then(() => console.log(4)); +Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); +console.log(1); // 1, 2, 3, 4 +</pre> + +<h2 id="Вкладеність">Вкладеність</h2> + +<p>Прості ланцюжки промісів найкраще тримати рівними, без вкладень, оскільки вкладення можуть бути результатом недбалої композиції. Дивіться <a href="#Типові_помилки">типові помилки</a>.</p> + +<p>Вкладеність є контролюючою структурою для обмеження області видимості блоків <code>catch</code>. Зокрема, вкладений <code>catch</code> перехоплює лише помилки своєї області видимості та нижче, але не ті помилки, що знаходяться вище у ланцюжку поза вкладеною областю видимості. При правильному використанні це надає більшу точність у виявленні помилок:</p> + +<pre class="brush: js notranslate">doSomethingCritical() +.then(result => doSomethingOptional(result) + .then(optionalResult => doSomethingExtraNice(optionalResult)) + .catch(e => {})) // Ігнорувати, якщо не працює щось другорядне; продовжити. +.then(() => moreCriticalStuff()) +.catch(e => console.error("Критична помилка: " + e.message));</pre> + +<p>Зауважте, що необов'язкові кроки тут вкладені, не для відступів, але для передбачливого розташування зовнішніх дужок <code>(</code> та <code>)</code> навколо.</p> + +<p>Внутрішній нейтралізуючий блок <code>catch</code> перехоплює помилки тільки від <code>doSomethingOptional()</code> та <code>doSomethingExtraNice()</code>, після чого виконання коду продовжується у <code>moreCriticalStuff()</code>. Що важливо, якщо функція <code>doSomethingCritical()</code> завершується невдало, її помилка перехоплюється тільки кінцевим (зовнішнім) блоком <code>catch</code>.</p> + +<h2 id="Типові_помилки">Типові помилки</h2> + +<p>Ось деякі типові помилки, яких варто остерігатися при складанні ланцюжків промісів. Декілька з цих помилок проявляються у наступному прикладі:</p> + +<pre class="brush: js example-bad notranslate">// Поганий приклад! Помічено 3 помилки! + +doSomething().then(function(result) { + doSomethingElse(result) // Забули повернути проміс з внутрішнього ланцюжка + непотрібне вкладення + .then(newResult => doThirdThing(newResult)); +}).then(() => doFourthThing()); +// Забули завершити ланцюжок блоком catch! +</pre></pre> + +<p>Перша помилка - не завершувати ланцюжки як слід. Це відбувається, коли ми створюємо новий проміс, але забуваємо його повернути. Як наслідок, ланцюг переривається, чи, скоріше, ми отримуємо два конкуруючі ланцюжки. Це означає, що <code>doFourthThing()</code> не чекатиме на завершення <code>doSomethingElse()</code> чи <code>doThirdThing()</code> і запуститься паралельно з ними, скоріше за все, ненавмисно. В окремих ланцюжках також окремо обробляються помилки, що призводить до неперехоплених помилок.</p> + +<p>Друга помилка - непотрібна вкладеність, що уможливлює першу помилку. Вкладеність також обмежує область видимості внутрішніх обробників помилок, а це — якщо зроблене ненавмисно — може призвести до неперехоплених помилок. Варіантом цього є <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">антишаблон конструювання промісів</a>, який поєднує вкладення з надлишковим використанням конструктора промісів для загортання коду, який вже використовує проміси.</p> + +<p>Третя помилка - забувати завершувати ланцюжки блоком <code>catch</code>. Незавершені ланцюжки промісів призводять до неперехоплених відхилень промісів у більшості переглядачів.</p> + +<p>Гарний практичний підхід - завжди або повертати, або завершувати ланцюжки промісів, і, як тільки ви отримуєте новий проміс, повертати його негайно, щоб вирівняти ланцюжок:</p> + +<pre class="brush: js example-good notranslate">doSomething() +.then(function(result) { + return doSomethingElse(result); +}) +.then(newResult => doThirdThing(newResult)) +.then(() => doFourthThing()) +.catch(error => console.error(error));</pre> + +<p>Зауважте, що <code>() => x</code> є скороченням для <code>() => { return x; }</code>.</p> + +<p>Тепер ми маємо єдиний, детермінований ланцюжок з правильною обробкою помилок.</p> + +<p>Використання <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> вирішує більшість, якщо не всі ці проблеми — натомість, найпоширенішою помилкою при використанні цього синтаксису є забуте ключове слово <a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>.</p> + +<h2 id="Коли_зустрічаються_задачі_та_проміси">Коли зустрічаються задачі та проміси</h2> + +<p>Якщо ви стикаєтеся з ситуаціями, коли у вас є проміси та задачі (такі, як події або зворотні виклики), які запускаються у непередбачуваному порядку, можливо, вам буде корисно скористатись мікрозадачами, щоб перевірити статус або збалансувати проміси, коли створення промісів залежить від певних умов.</p> + +<p>Якщо ви вважаєте, що мікрозадачі могли б вирішити цю проблему, дивіться <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide">посібник з мікрозадач</a>, щоб дізнатись, як використовувати метод <code><a href="/uk/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask" title="The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.">queueMicrotask()</a></code>, щоб поставити функцію у чергу як мікрозадачу.</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li>{{jsxref("Promise.then()")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> </li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p> diff --git a/files/uk/web/javascript/guide/working_with_objects/index.html b/files/uk/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..214bae97aa --- /dev/null +++ b/files/uk/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,490 @@ +--- +title: Робота з об'єктами +slug: Web/JavaScript/Guide/Working_with_Objects +tags: + - JavaScript + - Object + - Документ + - Об'єкт + - Посібник +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</div> + +<p class="summary">Мова JavaScript базується на простій, заснованій на об'єктах парадигмі. Об'єкт - це колекція властивостей, а властивість - це асоціація між іменем (або <em>ключем</em>) та значенням. Значення властивості може бути функцією, в цьому випадку властивість відома як метод. На додачу до об'єктів, попередньо визначених у веб-переглядачі, ви можете визначати власні об'єкти. Цей розділ описує, як використовувати об'єкти, властивості, функції та методи, і як створювати власні об'єкти.</p> + +<h2 id="Огляд_обєктів">Огляд об'єктів</h2> + +<p>Об'єкти у JavaScript, як і у багатьох інших мовах програмування, можна порівняти з об'єктами у реальному житті. Концепію об'єктів у JavaScript можна зрозуміти на прикладі матеріальних об'єктів з реального життя.</p> + +<p>У JavaScript об'єкт - це окрема сутність з властивостями та типом. Порівняємо його, для прикладу, з чашкою. Чашка - це об'єкт з властивостями. Чашка має колір, дизайн, вагу, матеріал, з якого вона зроблена, і т.д. Так само, об'єкти JavaScript можуть мати властивості, які визначають їхні характеристики.</p> + +<h2 id="Обєкти_та_властивості">Об'єкти та властивості</h2> + +<p>Об'єкт JavaScript має асоційовані з ним властивості. Властивість об'єкта можна описати як змінну, прикріплену до об'єкта. Властивості об'єкта - це, загалом, те саме, що й звичайні змінні JavaScript, але прикріплені до об'єктів. Властивості об'єкта визначають характеристики об'єкта. Ви звертаєтесь до властивостей об'єкта через просту крапкову нотацію:</p> + +<pre class="brush: js notranslate">objectName.propertyName +</pre> + +<p>Як усі змінні JavaScript, і ім'я об'єкта (яке може бути звичайною змінною), і ім'я властивості чутливі до регістру. Ви можете визначити властивість, присвоївши їй значення. Наприклад, створимо об'єкт на ім'я <code>myCar</code> (моя машина) та дамо йому властивості <code>make</code> (виробник), <code>model</code> (модель) та <code>year</code> (рік) ось так:</p> + +<pre class="brush: js notranslate">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>Наведений приклад також міг бути написаний за допомогою <strong><a href="#Використання_обєктних_ініціалізаторів">об'єктного ініціалізатора</a></strong>, який є списком з нуля чи більше розділених комами пар імен властивостей об'єкта та асоційованих з ними значень, записаний у фігурних дужках (<code>{}</code>):</p> + +<pre class="brush: js notranslate">var myCar = { + make: 'Ford', + model: 'Mustang', + year: 1969 +}; +</pre> + +<p>Неприсвоєні властивості об'єкта мають значення {{jsxref("undefined")}} (а не {{jsxref("null")}}).</p> + +<pre class="brush: js notranslate">myCar.color; // undefined</pre> + +<p>До властивостей об'єктів JavaScript також можна звертатись чи присвоювати їх за допомогою дужкової нотації (щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Property_Accessors">доступ до властивостей</a>). Об'єкти іноді називають <em>асоціативними масивами</em>, оскільки кожна властивість асоціюється з рядковим значенням, яке можна використати для доступу до неї. Отже, для прикладу, ви можете звертатись до властивостей об'єкта <code>myCar</code> наступним чином:</p> + +<pre class="brush: js notranslate">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>Ім'я властивості об'єкта може бути будь-яким дозволеним рядком JavaScript чи будь-чим, що можна привести до рядка, в тому числі порожній рядок. Однак, будь-яке ім'я властивості, яке не є дозволеним ідентифікатором JavaScript (наприклад, ім'я властивості, що містить пробіл чи дефіс, або починається з цифри) доступне тільки через позначення у квадратних дужках. Ця нотація також дуже корисна, коли імена властивостей мають бути динамічно визначені (коли ім'я властивості не визначене до початку виконання). Приклади наступні:</p> + +<pre class="brush: js notranslate">// створюємо одночасно чотири змінні, розділені комами, +// та присвоюємо їм значення +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'крапковий синтаксис'; +myObj['date created'] = 'рядок з пробілом'; +myObj[str] = 'рядкове значення'; +myObj[rand] = 'випадкове число'; +myObj[obj] = 'об\'єкт'; +myObj[''] = 'навіть порожній рядок'; + +console.log(myObj); +</pre> + +<p>Будь ласка, зауважте, що усі ключі, позначені у квадратних дужках, перетворюються на рядки, якщо тільки вони не є символами, оскільки імена властивостей (ключів) об'єктів JavaScript можуть бути тільки рядками або символами (в якийсь момент також будуть додані приватні імена, з розвитком <a href="https://github.com/tc39/proposal-class-fields">пропозиції щодо полів класу</a>, але вони не використовуватимуться у формі <code>[]</code>). Наприклад, у наведеному вище коді, коли ключ <code>obj</code> додається до об'єкта <code>myObj</code>, JavaScript викличе метод {{jsxref("Object.toString", "obj.toString()")}} та використає отриманий рядок як новий ключ.</p> + +<p>Ви також можете звернутись до властивості, використавши рядкове значення, що зберігається у змінній:</p> + +<pre class="brush: js notranslate">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p>Ви можете використати дужкову нотацію з циклом <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> для перебору усіх перелічуваних властивостей об'єкта. Для ілюстрації того, як це працює, наступна функція відображає властивості об'єкта, коли ви передаєте об'єкт та ім'я об'єкта в якості аргументів у функцію:</p> + +<pre class="brush: js notranslate">function showProps(obj, objName) { + var result = ``; + for (var i in obj) { + // obj.hasOwnProperty() відфільтровує властивості від ланцюга прототипів об'єкта + if (obj.hasOwnProperty(i)) { + result += `${objName}.${i} = ${obj[i]}\n`; + } + } + return result; +} +</pre> + +<p>Отже, виклик функції <code>showProps(myCar, "myCar")</code> поверне наступне:</p> + +<pre class="brush: js notranslate">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 id="Перелік_властивостей_обєкта">Перелік властивостей об'єкта</h2> + +<p>Починаючи з <a href="/uk/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, існують три вбудовані методи перелічити / продивитись властивості об'єкта:</p> + +<ul> + <li>цикли <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code><br> + Цей метод продивляється усі перелічувані властивості об'єкта та його ланцюжок прототипів</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Цей метод повертає масив з іменами усіх особистих (не з ланцюга прототипів) перелічуваних властивостей ("ключів") об'єкта <code>o</code>.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Цей метод повертає масив, що містить імена усіх особистих властивостей (перелічуваних чи ні) об'єкта <code>o</code>.</li> +</ul> + +<p>До ECMAScript 5 не існувало вбудованого способу перелічити усі властивості об'єкта. Однак, цього можна досягти наступною функцією:</p> + +<pre class="brush: js notranslate">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; + objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat( + Object.getOwnPropertyNames(objectToInspect) + ); + } + + return result; +} +</pre> + +<p>Це може бути корисним для виявлення "схованих" властивостей (властивостей у ланцюгу прототипів, які недоступні через об'єкт, тому що інша властивість з таким самим іменем зустрічається у ланцюгу раніше). Список лише доступних властивостей можна легко зробити, прибравши дублікати у масиві.</p> + +<h2 id="Створення_нових_обєктів">Створення нових об'єктів</h2> + +<p>JavaScript має чимало попередньо визначених об'єктів. На додачу, ви можете створювати свої власні об'єкти. Ви можете створити об'єкт за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктного ініціалізатора</a>. Або ви можете спочатку створити функцію-конструктор, після чого створювати об'єкти, використовуючи оператор <code>new</code>.</p> + +<h3 id="Використання_обєктних_ініціалізаторів"><span id="Object_initializers">Використання об'єктних ініціалізаторів</span></h3> + +<p>На додачу до створення об'єктів за допомогою функції-конструктора, ви можете створювати об'єкти, використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Ініціалізація_об’єктів">об'єктний ініціалізатор</a>. Використання об'єктних ініціалізаторів іноді називають створенням об'єктів літеральною нотацією. "Об'єктний ініціалізатор" відповідає термінології, що використовується у мові C++.</p> + +<p>Синтаксис об'єкта, що використовує об'єктний ініціалізатор, наступний:</p> + +<pre class="brush: js notranslate">var obj = { property_1: value_1, // property_# може бути ідентифікатором... + 2: value_2, // або числом... + // ..., + 'property n': value_n }; // або рядком +</pre> + +<p>де <code>obj</code> - ім'я нового об'єкта, кожне ім'я <code>property_<var>i</var></code> є ідентифікатором (або числом, або рядковим літералом), а кожне значення <code>value_<var>i</var></code> є виразом, чиє значення присвоюється властивості <code>property_<var>i</var></code>. Змінна <code>obj</code> та присвоєння є необов'язковими; якщо вам непотрібно звертатись до цього об'єкта будь-де, вам непотрібно присвоювати його змінній. (Зауважте, що вам може знадобитись загорнути об'єктний літерал у круглі дужки, якщо об'єкт з'являється там, де очікується інструкція, щоб літерал не був прийнятий за блочну інструкцію.)</p> + +<p>Об'єктні ініціалізатори є виразами, а кожний об'єктний ініціалізатор створює новий об'єкт, коли виконується інструкція, де він знаходиться. Ідентичні об'єктні ініціалізатори створюють окремі об'єкти, які не вважатимуться рівними. Об'єкти створюються так, ніби відбувся виклик <code>new Object()</code>; тобто, об'єкти, створені об'єктними літералами, є екземплярами <code>Object</code>.</p> + +<p>Наступна інструкція створює об'єкт та присвоює його змінній <code>x</code> тільки за умови, що вираз <code>cond</code> є правдивим:</p> + +<pre class="brush: js notranslate">if (cond) var x = {greeting: 'привітик'}; +</pre> + +<p>Наступний приклад створює об'єкт <code>myHonda</code> з трьома властивостями. Зауважте, що властивість <code>engine</code> також є об'єктом зі своїми властивостями.</p> + +<pre class="brush: js notranslate">var myHonda = {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>Ви також можете використовувати об'єктні ініціалізатори для створення масивів. Дивіться <a href="/uk/docs/Web/JavaScript/Guide/Grammar_and_types#Масивні_літерали">масивні літерали</a>.</p> + +<h3 id="Використання_функції-конструктора">Використання функції-конструктора</h3> + +<p>Також ви можете створити об'єкт, виконавши ці два кроки:</p> + +<ol> + <li>Визначити тип об'єкта, написавши функцію-конструктор. Загальноприйнято, і на це є причини, писати їх з великої літери.</li> + <li>Створити екземпляр об'єкта за допомогою <code>new</code>.</li> +</ol> + +<p>Щоб визначити тип об'єкта, створіть функцю для типу об'єкта, яка визначає його ім'я, властивості та методи. Наприклад, припустимо, ви хочете створити тип об'єкта для автомобілів. Ви хочете, щоб цей тип об'єкта називався <code>Car</code>, і ви хочете, щоб він мав властивості для виробника, моделі та року. Щоб це зробити, ви б написали наступну функцію:</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Зверніть увагу на використання <code>this</code> для присвоєння значень властивостям об'єкта на основі значень, переданих у функцію.</p> + +<p>Тепер ви можете створити об'єкт на ім'я <code>mycar</code> наступним чином:</p> + +<pre class="brush: js notranslate">var mycar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Ця інструкція створює об'єкт <code>mycar</code> та присвоює вказані значення його властивостям. Тоді значенням <code>mycar.make</code> є рядок "Eagle", <code>mycar.year</code> дорівнює цілому число 1993 і т.д.</p> + +<p>Ви можете створити довільне число об'єктів <code>Car</code> викликами <code>new</code>. Наприклад,</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p>Об'єкт може мати властивість, яка сама є іншим об'єктом. Наприклад, припустимо, ви визначаєте об'єкт <code>person</code> (людина) наступним чином:</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>і далі створюєте два екземпляра об'єкта <code>person</code> наступним чином:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Тоді ви можете переписати визначення <code>Car</code>, щоб включити властивість <code>owner</code> (власник), яка приймає об'єкт <code>person</code> ось так:</p> + +<pre class="brush: js notranslate">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 notranslate">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 notranslate">car2.owner.name +</pre> + +<p>Зауважте, що ви завжди можете додати властивість до попередньо визначеного об'єкта. Наприклад, інструкція</p> + +<pre class="brush: js notranslate">car1.color = 'чорний'; +</pre> + +<p>додає властивість <code>color</code> (колір) до <code>car1</code>, та присвоює їй значення "чорний." Однак, це не впливає на всі інші об'єкти. Щоб додати нову властивість до усіх об'єктів того самого типу, ви маєте додати властивість до визначення типу об'єкта <code>Car</code>.</p> + +<h3 id="Використання_методу_Object.create">Використання методу <code>Object.create</code></h3> + +<p>Об'єкти також можна створювати методом {{jsxref("Object.create()")}}. Цей метод може бути дуже корисним, тому що дозволяє обирати прототип для об'єкта, який ви хочете створити, без необхідності визначати функцію-конструктор.</p> + +<pre class="brush: js notranslate">// Властивості об'єкта Animal (тварина) та інкапсуляція методу +var Animal = { + type: 'Безхребетні', // Значення властивості за замовчуванням + displayType: function() { // Метод, що виводитиме тип тварини + console.log(this.type); + } +}; + +// Створити нову тварину з назвою animal1 +var animal1 = Object.create(Animal); +animal1.displayType(); // виведе: Безхребетні + +// Створити нову тварину з назвою fish (риба) +var fish = Object.create(Animal); +fish.type = 'Риби'; +fish.displayType(); // виведе: Риби</pre> + +<h2 id="Наслідування">Наслідування</h2> + +<p>Усі об'єкти у JavaScript успадковуються від принаймні одного іншого об'єкта. Об'єкт, від якого наслідується інший об'єкт, відомий як прототип, а успадковані властивості можна знайти у об'єкті конструктора <code>prototype</code>. Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наслідування та ланцюжок прототипів</a>.</p> + +<h2 id="Індексування_властивостей_обєкта">Індексування властивостей об'єкта</h2> + +<p>Ви можете звернутись до властивості об'єкта або за іменем властивості, або за його оригінальним індексом. Якщо ви з самого початку визначили властивість за іменем, ви завжди маєте звертатись до неї за іменем, а якщо ви визначили властивість за індексом, ви завжди маєте звертатись до неї за індексом.</p> + +<p>Це обмеження працює, коли ви створюєте об'єкт та його властивості функцією-конструктором (як ми робили раніше з типом об'єкта <code>Car</code>) та коли ви явно визначаєте окремі властивості (наприклад, <code>myCar.color = "червоний"</code>). Якщо ви початково визначили властивість об'єкта з індексом, як от <code>myCar[5] = "25 mpg"</code>, ви далі звертаєтесь до властивості лише у вигляді <code>myCar[5]</code>.</p> + +<p>Винятком з цього правила є подібний до масиву об'єкт з HTML, такий як подібний до масиву об'єкт <code>forms</code>. Ви завжди можете посилатись на об'єкти у цих подібних до масивів об'єктах або за їхнім порядковим номером (в залежності від їхнього розташування у документі), або за іменем (якщо воно визначене). Наприклад, якщо другий тег <code><FORM></code> у документі має атрибут <code>NAME</code>, що дорівнює "myForm", ви можете звернутись до форми <code>document.forms[1]</code>, або <code>document.forms["myForm"]</code>, або <code>document.forms.myForm</code>.</p> + +<h2 id="Визначення_властивостей_для_типу_обєкта">Визначення властивостей для типу об'єкта</h2> + +<p>Ви можете додати властивість до попередньо визначеного типу об'єкта за допомогою властивості <code>prototype</code>. Це визначає властивість, спільну для усіх об'єктів вказаного типу, а не лише для одного екземпляру об'єкта. Наступний код додає властивість <code>color</code> (колір) до усіх об'єктів типу <code>Car</code> (автомобіль), після чого присвоює значення властивості <code>color</code> об'єкта <code>car1</code>.</p> + +<pre class="brush: js notranslate">Car.prototype.color = null; +car1.color = 'чорний'; +</pre> + +<p>Щоб дізнатись більше, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype">властивість <code>prototype</code></a> об'єкта <code>Function</code> у <a href="/uk/docs/Web/JavaScript/Reference">довіднику JavaScript</a>.</p> + +<h2 id="Визначення_методів">Визначення методів</h2> + +<p><em>Метод</em> - це функція, асоційована з об'єктом, або, простіше кажучи, метод - це властивість об'єкта, яка є функцією. Методи визначаються так само, як звичайні функції, за винятком того, що вони мають бути асоційовані з властивістю об'єкта. Дивіться більше подробиць у <a href="/uk/docs/Web/JavaScript/Reference/Functions/Method_definitions">визначенні методів</a>. Приклад наступний:</p> + +<pre class="brush: js notranslate">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...зробити щось + } + + // ТАКЕ ТЕЖ ПРАЦЮЄ + + myOtherMethod(params) { + // ...зробити щось інше + } +}; +</pre> + +<p>де <code>objectName</code> - це існуючий об'єкт, <code>methodname</code> - це ім'я, яке ви присвоюєте методу, а <code>functionName</code> - це ім'я функції.</p> + +<p>Далі ви можете викликати метод у контексті об'єкта наступним чином:</p> + +<pre class="brush: js notranslate">object.methodname(params); +</pre> + +<p>Ви можете визначати методи для типу об'єкта, додавши визначення методів у конструктор об'єкта. Ви можете визначити функцію, що буде форматувати та відображати властивості попередньо визначених об'єктів <code>Car</code>; наприклад,</p> + +<pre class="brush: js notranslate">function displayCar() { + var result = `Чудовий автомобіль ${this.year} ${this.make} ${this.model}`; + pretty_print(result); +} +</pre> + +<p>де <code>pretty_print</code> - функція, що відображатиме горизонтальне правило та рядок. Зверніть увагу на використання <code>this</code> для посилання на об'єкт, до якого належить метод.</p> + +<p>Ви можете зробити цю функцію методом <code>Car</code>, додавши інструкцію</p> + +<pre class="brush: js notranslate">this.displayCar = displayCar; +</pre> + +<p>до визначення об'єкта. Отже, повне визначення <code>Car</code> виглядатиме так</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p>Тоді ви можете викликати метод <code>displayCar</code> для кожного об'єкта наступним чином:</p> + +<pre class="brush: js notranslate">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 id="Використання_this_у_посиланнях_на_обєкт">Використання <code>this</code> у посиланнях на об'єкт</h2> + +<p>JavaScript має спеціальне ключове слово <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, яке ви можете використати всередині метода, щоб вказати на поточний об'єкт. Наприклад, припустимо, ви маєте 2 об'єкта, <code>Manager</code> та <code>Intern</code>. Кожен об'єкт має свої власні <code>name</code> (ім'я), <code>age</code> (вік) та <code>job</code> (роботу). У функції <code>sayHi()</code>, зверніть увагу, є <code>this.name</code>. Додані до 2-х об'єктів, вони можуть бути викликані та повернуть <code>'Привіт, мене звуть'</code>, а далі додають значення <code>name</code> з цього конкретного об'єкта. Як показано нижче. </p> + +<pre class="brush: js notranslate">const Manager = { + name: "Джон", + age: 27, + job: "Програміст" +} +const Intern= { + name: "Бен", + age: 21, + job: "Програміст-інтерн" +} + +function sayHi() { + console.log('Привіт, мене звуть', this.name) +} + +// додаємо функцію sayHi до обох об'єктів +Manager.sayHi = sayHi; +Intern.sayHi = sayHi; + +Manager.sayHi() // Привіт, мене звуть Джон +Intern.sayHi() // Привіт, мене звуть Бен +</pre> + +<p><code>this</code> посилається на об'єкт, в якому знаходиться. Ви можете створити нову функцію під назвою <code>howOldAmI()</code>, яка виводить повідомлення про те, скільки цій людині років. </p> + +<pre class="brush: js notranslate">function howOldAmI (){ + console.log('Мені ' + this.age + ' років.') +} +Manager.howOldAmI = howOldAmI; +Manager.howOldAmI() // Мені 27 років. +</pre> + +<h2 id="Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</h2> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">Гетер</a> - це метод, який отримує значення конкретної властивості. <a href="/uk/docs/Web/JavaScript/Reference/Functions/set">Сетер</a> - це метод, який присвоює значення конкретній властивості. Ви можете визначати гетери та сетери на будь-якому існуючому базовому об'єкті чи об'єкті, створеному користувачем, якщо він підтримує додавання нових властивостей. </p> + +<p>Гетери та сетери можуть бути або</p> + +<ul> + <li>визначені за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів</a>, або</li> + <li>додані пізніше до будь-якого об'єкта у будь-який час за допомогою методу додавання гетерів чи сетерів.</li> +</ul> + +<p>При визначенні гетерів та сетерів за допомогою <a href="#Object_initializers">об'єктних ініціалізаторів </a>вам потрібно лише додати перед методом-гетером <code>get</code>, а перед методом-сетером <code>set</code>. Звісно, гетер не повинен очікувати на параметри, а сетер очікує рівно на один параметер (нове значення, яке треба присвоїти). Наприклад:</p> + +<pre class="brush: js notranslate">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log(o.a); // 7 +console.log(o.b); // 8 <-- В цьому місці запускається метод get b(). +o.c = 50; // <-- В цьому місці запускається метод set c(x). +console.log(o.a); // 25 +</pre> + +<p>Властивості об'єкта <code>o</code> наступні:</p> + +<ul> + <li><code>o.a</code> — число</li> + <li><code>o.b</code> — гетер, який вертає <code>o.a</code> плюс 1</li> + <li><code>o.c</code> — сетер, який присвоює <code>o.a</code> половину значення, присвоєного <code>o.c</code></li> +</ul> + +<p>Будь ласка, зауважте, що імена функцій гетерів та сетерів, визначені у об'єктному літералі за допомогою "[gs]et <em>властивість</em>()" (на відміну від <code>__define[GS]etter__</code> ), не є іменами самих гетерів, хоча синтаксис <code>[gs]et <em>propertyName</em>(){ }</code> і міг ввести вас в оману.</p> + +<p>Гетери та сетери також можуть бути додані до об'єкта в будь-який момент після створення за допомогою методу <code>Object.defineProperties</code>. Першим параметром цього методу є об'єкт, на якому ви хочете визначити гетер чи сетер. Другим параметром є об'єкт, чиї імена властивостей є іменами гетерів чи сетерів і чиї значення властивостей є об'єктами для визначення функцій гетерів чи сетерів. Ось приклад, який визначає такі самі гетер та сетер, які використовувались у попередньому прикладі:</p> + +<pre class="brush: js notranslate">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // Запускає сетер, який присвоює 10 / 2 (5) властивості 'a' +console.log(o.b); // Запускає гетер, який видає a + 1, тобто 6 +</pre> + +<p>Яку з двох форм обирати, залежить від вашого стилю програмування та наявної задачі. Якщо ви вже користуєтесь об'єктним ініціалізатором при визначенні прототипу, ви, скоріше за все, обиратимете першу форму. Ця форма є більш компактною та природньою. Однак, якщо ви додаєте гетери та сетери пізніше — оскільки не писали прототип чи окремий об'єкт — тоді друга форма є єдино можливою. Друга форма, можливо, найкраще відображає динамічну природу JavaScript — але вона може зробити код важким для читання та розуміння.</p> + +<h2 id="Видалення_властивостей">Видалення властивостей</h2> + +<p>Ви можете видалити неуспадковані властивості оператором <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Наступний код демонструє, як прибрати властивість.</p> + +<pre class="brush: js notranslate">// Створює новий об'єкт, myobj, з двома властивостями, a та b. +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// Прибирає властивість a, залишивши у myobj лише властивість b. +delete myobj.a; +console.log ('a' in myobj); // виведе: "false" +</pre> + +<p>Ви також можете використати <code>delete</code>, щоб видалити глобальну змінну, якщо ключове слово <code>var</code> не використовувалось для оголошення змінної:</p> + +<pre class="brush: js notranslate">g = 17; +delete g; +</pre> + +<h2 id="Порівняння_обєктів">Порівняння об'єктів</h2> + +<p>У JavaScript об'єкти належать до типу посилань. Два окремі об'єкти ніколи не дорівнюють один одному, навіть якщо мають однакові властивості. Лише порівняння об'єкта з самим собою поверне true.</p> + +<pre class="brush: js notranslate">// Дві змінні, два окремих об'єкти з однаковими властивостями +var fruit = {name: 'яблуко'}; +var fruitbear = {name: 'яблуко'}; + +fruit == fruitbear; // вертає false +fruit === fruitbear; // вертає false</pre> + +<pre class="brush: js notranslate">// Дві змінні, один об'єкт +var fruit = {name: 'яблуко'}; +var fruitbear = fruit; // Присвоїти fruitbear посилання на об'єкт fruit + +// Тут fruit та fruitbear вказують на один об'єкт +fruit == fruitbear; // вертає true +fruit === fruitbear; // вертає true + +fruit.name = 'виноград'; +console.log(fruitbear); // output: { name: "виноград" }, замість { name: "яблуко" } +</pre> + +<p>Щоб дізнатись більше щодо операторів порівняння, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператори порівняння</a>.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>Щоб зануритись глибше, читайте <a href="/uk/docs/Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model">докладно про об'єктну модель JavaScript's</a>.</li> + <li>Щоб дізнатись щодо класів ECMAScript 2015 (альтернативний спосіб створення об'єктів), читайте розділ <a href="/uk/docs/Web/JavaScript/Reference/Classes">класи JavaScript</a>.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Dokladno_pro_Objectnu_Model")}}</p> diff --git a/files/uk/web/javascript/guide/вирази_та_оператори/index.html b/files/uk/web/javascript/guide/вирази_та_оператори/index.html new file mode 100644 index 0000000000..fdfbc0659b --- /dev/null +++ b/files/uk/web/javascript/guide/вирази_та_оператори/index.html @@ -0,0 +1,925 @@ +--- +title: Вирази та оператори +slug: Web/JavaScript/Guide/Вирази_та_оператори +tags: + - JavaScript + - Оператори + - Посібник + - вирази +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> + +<p class="summary">Цей розділ описує вирази та оператори JavaScript, такі як присвоювання, порівняння, арифметичні оператори, бітові, логічні, рядкові, тернарний та інші.</p> + +<p>Повний та детальний список операторів та виразів також доступний за <a href="/uk/docs/Web/JavaScript/Reference/Operators">посиланням</a>.</p> + +<h2 id="Оператори">Оператори</h2> + +<p>JavaScript має наступні типи операторів. Ця секція описує оператори, а також містить інформацію щодо їхніх пріоритетів.</p> + +<ul> + <li>{{ web.link("#Оператори_присвоєння", "Оператори присвоєння") }}</li> + <li>{{ web.link("#Оператори_порівняння", "Оператори порівняння") }}</li> + <li>{{ web.link("#Арифметичні_оператори", "Арифметичні оператори") }}</li> + <li>{{ web.link("#Бітові_оператори", "Бiтові оператори") }}</li> + <li>{{ web.link("#Логічні_оператори", "Логічні оператори") }}</li> + <li>{{ web.link("#Рядкові_оператори", "Рядкові оператори") }}</li> + <li>{{ web.link("#Умовний_тернарний_оператор", "Умовний (тернарний) оператор")}}</li> + <li>{{ web.link("#Comma_operator", "Оператор кома")}}</li> + <li>{{ web.link("#Унарні_оператори", "Унарні оператори")}}</li> + <li>{{ web.link("#Оператори_відношення", "Оператори відношення")}}</li> +</ul> + +<p>JavaScript має як <em>бінарні</em>, так і <em>унарні</em> оператори, а також один особливий тернарний оператор - умовний оператор. Бінарному оператору потрібні два операнди - один перед оператором, інший після оператора:</p> + +<pre class="syntaxbox"><em>операнд1 </em><em>оператор</em> <em>операнд2</em> +</pre> + +<p>Наприклад, <code>3+4</code> чи <code>x*y</code>.</p> + +<p>Унарний оператор потребує лише одного операнду до чи після оператора:</p> + +<pre class="syntaxbox"><em>оператор</em> <em>операнд</em> +</pre> + +<p>чи</p> + +<pre class="syntaxbox"><em>операнд оператор</em> +</pre> + +<p>Наприклад, <code>x++</code> чи <code>++x</code>.</p> + +<h3 id="Оператори_присвоєння">Оператори присвоєння</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Оператор присвоєння</a> присвоює своєму лівому операнду значення на підставі значення правого операнда. Простим оператором присвоєння є оператор дорівнює (<code>=</code>), який присвоює значення свого правого операнда лівому операнду. Таким чином, <code>x = y</code> присвоює значення змінної <code>y</code> змінній <code>x</code>.</p> + +<p>Також існують складені оператори присвоєння, які є скороченнями для операцій, перелічених у наступній таблиці:</p> + +<table class="standard-table"> + <caption>Складені оператори присвоювання</caption> + <thead> + <tr> + <th>Назва</th> + <th>Оператор скороченого запису</th> + <th>Значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Assignment">Присвоєння</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з додаванням</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з відніманням</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з множенням</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Division_assignment">Присвоєння з діленням</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння остачі</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з піднесенням до степеня</a>{{experimental_inline}}</td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Left_shift_assignment">Присвоєння з лівим зсувом</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Right_shift_assignment">Присвоєння з правим зсувом</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з беззнаковим правим зсувом</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим І</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння#Bitwise_XOR_assignment">Присвоєння з виключним побітовим АБО</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment/uk/docs/Web/JavaScript/Reference/Operators/Оператори_присвоєння">Присвоєння з побітовим АБО</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h4 id="Деструктуризація">Деструктуризація</h4> + +<p>Для більш складних присвоювань використовується синтаксис <a href="/uk/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктуризації</a>. Це вираз JavaScript, який надає можливість витягувати дані з масивів та об'єктів, використовуючи синтаксис, що віддзеркалює конструкцію масивів та об'єктних літералів. </p> + +<pre class="brush: js">var foo = ['один', 'два', 'три']; + +// без деструктуризації +var one = foo[0]; +var two = foo[1]; +var three = foo[2]; + +// із деструктуризацією +var [one, two, three] = foo; +</pre> + +<h3 id="Оператори_порівняння">Оператори порівняння</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">Оператор порівняння</a> порівнює свої операнди та повертає логічне значення, базуючись на істинності порівняння. Операнди можуть бути числовими, рядковими, логічними значеннями або об'єктами. Рядки порівнюються згідно стандартного лексикографічного порядку, з використанням значень Unicode. У більшості випадків, якщо два операнди не належать до одного типу, JavaScript намагається привести їх до належного для порівняння типу. Зазвичай це призводить до числового порівняння операндів. Єдиними винятками у конвертації типів під час порівняння є оператори <code>===</code> та <code>!==</code>, які виконують перевірку на строгу рівність та строгу нерівність. Ці оператори не намагаються перед перевіркою на рівність привести операнди до спільного типу. Наступна таблиця наводить оператори порівняння у контексті цього фрагменту коду:</p> + +<pre class="brush: js">var var1 = 3; +var var2 = 4; +</pre> + +<table class="standard-table"> + <caption>Оператори порівняння</caption> + <thead> + <tr> + <th scope="col">Оператор</th> + <th scope="col">Опис</th> + <th scope="col">Приклади, які повертають true</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Рівність">Рівність</a> (<code>==</code>)</td> + <td>Повертає <code>true</code>, якщо оператори рівні.</td> + <td><code>3 == var1</code> + <p><code>"3" == var1</code></p> + <code>3 == '3'</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Нерівність_!">Нерівність</a> (<code>!=</code>)</td> + <td>Повертає <code>true</code>, якщо оператори нерівні.</td> + <td><code>var1 != 4<br> + var2 != "3"</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Ідентичність_строга_рівність">Строга рівність</a> (<code>===</code>)</td> + <td>Повертає <code>true</code> якщо оператори рівні та належать до одного типу. Дивіться також {{jsxref("Object.is")}} та <a href="/uk/docs/Web/JavaScript/Перевірка_на_рівність_та_однаковість">однаковість у JS</a>.</td> + <td><code>3 === var1</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Неідентичність_строга_нерівність_!">Строга нерівність</a> (<code>!==</code>)</td> + <td>Повертає <code>true</code>, якщо оператори належать до одного типу, але нерівні, або належать до різних типів.</td> + <td><code>var1 !== "3"<br> + 3 !== '3'</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_ніж_>">Більше ніж</a> (<code>></code>)</td> + <td>Повертає <code>true</code>, якщо лівий операнд більший за правий.</td> + <td><code>var2 > var1<br> + "12" > 2</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Більше_чи_дорівнює_>">Більше чи дорівнює</a> (<code>>=</code>)</td> + <td>Повертає <code>true</code>, якщо значення лівого операнда більше або дорівнює значенню правого операнда.</td> + <td><code>var2 >= var1<br> + var1 >= 3</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_ніж_<">Менше ніж</a> (<code><</code>)</td> + <td>Повертає <code>true</code>, якщо лівий операнд менший за правий.</td> + <td><code>var1 < var2<br> + "2" < 12</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння#Менше_чи_дорівнює_<">Менше чи дорівнює</a> (<code><=</code>)</td> + <td>Повертає <code>true</code>, якщо значення лівого операнда менше або дорівнює значенню правого операнда.</td> + <td><code>var1 <= var2<br> + var2 <= 5</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Заувага: </strong>(<strong>=></strong>) не оператор, а позначення для <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкових функцій</a>.</p> +</div> + +<h3 id="Арифметичні_оператори">Арифметичні оператори</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметичний оператор</a> приймає числові значення (літерали чи змінні) в якості операндів та повертає єдине числове значення. Стандартними арифметичними операторами є додавання (<code>+</code>), віднімання (<code>-</code>), множення (<code>*</code>) та ділення (<code>/</code>). Ці оператори працюють так само, як і в більшості інших мов програмування при використанні з числами з рухомою комою (зокрема, зауважте, що ділення на нуль повертає {{jsxref("Infinity")}}). Наприклад:</p> + +<pre class="brush: js">1 / 2; // 0.5 +1 / 2 == 1.0 / 2.0; // це дорівнює true +</pre> + +<p>На додачу до стандартних арифметичних операцій (+, -, * /), JavaScript надає арифметичні операції, перечислені у наведеній нижче таблиці:</p> + +<table class="fullwidth-table"> + <caption>Арифметичні оператори</caption> + <thead> + <tr> + <th scope="col">Оператор</th> + <th scope="col">Опис</th> + <th scope="col">Приклад</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остача</a> (<code>%</code>)</td> + <td>Бінарний оператор. Повертає цілочисельну остачу від ділення двох операндів.</td> + <td>12 % 5 повертає 2.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Інкремент</a> (<code>++</code>)</td> + <td>Унарний оператор. Додає до операнда одиницю. Якщо використовується як префіксний оператор (<code>++x</code>), повертає значення операнда після додавання одиниці; якщо використовується як постфіксний оператор (<code>x++</code>), повертає значення операнда перед додаванням одиниці.</td> + <td>Якщо <code>x</code> дорівнює 3, тоді <code>++x</code> присвоює <code>x</code> значення 4 та повертає 4, в той час, як <code>x++</code> повертає 3 і лише тоді присвоює <code>x</code> значення 4.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Декремент</a> (<code>--</code>)</td> + <td>Унарний оператор. Віднімає одиницю від свого операнда. Повернене значення аналогічне поверненому значенню оператора інкременту.</td> + <td>Якщо <code>x</code> дорівнює 3, тоді <code>--x</code> присвоює <code>x</code> значення 2 та повертає 2, в той час, як <code>x--</code> повертає 3 і тільки тоді присвоює <code>x</code> значення 2.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарний мінус</a> (<code>-</code>)</td> + <td>Унарний оператор. Повертає операнд з протилежним знаком.</td> + <td>Якщо <code>x</code> дорівнює 3, то <code>-x</code> повертає -3.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Унарний_плюс">Унарний плюс</a> (<code>+</code>)</td> + <td>Унарний оператор. Намагається перетворити операнд на число, якщо він не є числом.</td> + <td><code>+"3"</code> повертає <code>3</code>.<br> + <code>+true</code> повертає <code>1.</code></td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Піднесення до степеня</a> (<code>**</code>) {{experimental_inline}}</td> + <td>Підносить <code>основу степеня</code> до <code>показника</code> степеня, тобто, <code>основа<sup>показник</sup></code></td> + <td><code>2 ** 3</code> повертає <code>8</code>.<br> + <code>10 ** -1</code> повертає <code>0.1</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Бітові_оператори">Бітові оператори</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Бітовий оператор</a> опрацьовує свої операнди як послідовність 32-х бітів (нулів та одиниць), а не як десяткові, шістнадцяткові або вісімкові числа. Наприклад, десяткове число дев'ять має бітове представлення 1001. Бітові оператори виконують операції над цими бітовими представленнями, але повертають стандартні числові значення JavaScript.</p> + +<p>Наступна таблиця наводить перелік бітових операторів JavaScript.</p> + +<table class="standard-table"> + <caption>Бітові оператори</caption> + <thead> + <tr> + <th scope="col">Оператор</th> + <th scope="col">Застосування</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_І">Побітове І (AND)</a></td> + <td><code>a & b</code></td> + <td>Повертає одиницю на кожній позиції, де відповідні біти обох операндів дорівнюють одиницям.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_АБО">Побітове АБО (OR)</a></td> + <td><code>a | b</code></td> + <td>Повертає нуль на кожній позиції, де відповідні біти обох операндів дорівнюють нулям.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Виключне_побітове_АБО">Виключне побітове АБО (XOR)</a></td> + <td><code>a ^ b</code></td> + <td>Повертає нуль на кожній позиції, де відповідні біти однакові.<br> + [Повертає один на кожній позиції, де відповідні біти мають різні значення.]</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Побітове_НЕ">Побітове НЕ (NOT)</a></td> + <td><code>~ a</code></td> + <td>Виконує інверсію бітів операнду.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#<<_Лівий_зсув">Лівий зсув</a></td> + <td><code>a << b</code></td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів ліворуч, заповнюючи позиції справа нулями.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a></td> + <td><code>a >> b</code></td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a></td> + <td><code>a >>> b</code></td> + <td>Зсуває <code>a</code> у двійковому представленні на <code>b</code> бітів праворуч, відкидаючи зсунуті біти та заповнюючи позиції зліва нулями.</td> + </tr> + </tbody> +</table> + +<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">Побітові логічні оператори</h4> + +<p>Концептуально побітові логічні оператори працюють наступним чином:</p> + +<ul> + <li>Операнди перетворюються на 32-бітні цілі числа та виражаються послідовністю бітів (нулів та одиниць). Числа, що мають більше 32 бітів, втрачають свої старші біти. Наприклад, наступне ціле число, що має більше 32 бітів, буде перетворено на 32-бітне ціле число: + <pre>До: 11100110111110100000000000000110000000000001 +Після: 10100000000000000110000000000001</pre> + </li> + <li>Кожен біт першого операнду ставиться у пару до відповідного біту другого операнду: перший біт до першого біту, другий біт до другого, і так далі.</li> + <li>Оператор застосовується до кожної пари бітів, а результат будується побітово.</li> +</ul> + +<p>Наприклад, бінарним представленням числа дев'ять є 1001, а бінарним представленням п'ятнадцяти є 1111. Отже, коли бітові оператори застосовуються до цих величин, результати будуть наступні:</p> + +<table class="standard-table"> + <caption>Приклади бітових операторів</caption> + <thead> + <tr> + <th scope="col">Вираз</th> + <th scope="col">Результат</th> + <th scope="col">Двійковий опис</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>15 & 9</code></td> + <td><code>9</code></td> + <td><code>1111 & 1001 = 1001</code></td> + </tr> + <tr> + <td><code>15 | 9</code></td> + <td><code>15</code></td> + <td><code>1111 | 1001 = 1111</code></td> + </tr> + <tr> + <td><code>15 ^ 9</code></td> + <td><code>6</code></td> + <td><code>1111 ^ 1001 = 0110</code></td> + </tr> + <tr> + <td><code>~15</code></td> + <td><code>-16</code></td> + <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td> + </tr> + <tr> + <td><code>~9</code></td> + <td><code>-10</code></td> + <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td> + </tr> + </tbody> +</table> + +<p>Зауважте, що усі 32 біти інвертуються побітовим оператором НЕ, і що значення, в яких найстарший (перший зліва) біт дорівнює 1, відображають від'ємні числа (формат доповняльного коду).</p> + +<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">Оператори бітового зсуву</h4> + +<p>Оператори бітового зсуву приймають два операнди: перший є величиною, в якій треба виконати зсув, а другий вказує кількість бітових позицій для зсуву. Напрямок операції зсуву контролюється застосованим оператором.</p> + +<p>Оператори зсуву перетворюють свої операнди на 32-бітні цілі числа та повертають результат того самого типу, до якого належить лівий операнд.</p> + +<p>Оператори зсуву наведені у наступній таблиці.</p> + +<table class="fullwidth-table"> + <caption>Оператори бітового зсуву</caption> + <thead> + <tr> + <th scope="col">Оператор</th> + <th scope="col">Опис</th> + <th scope="col">Приклад</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#<<_Лівий_зсув">Лівий зсув</a><br> + (<code><<</code>)</td> + <td>Цей оператор виконує зсув першого операнду на вказану кількість бітів ліворуч. Надлишкові біти, зсунуті ліворуч, відкидаються. Біти, додані справа, заповнюються нулями.</td> + <td><code>9<<2</code> вертає 36, тому що число 1001, зсунуте на 2 біти ліворуч, стає 100100, тобто, 36.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>_Правий_зсув_з_розширенням_знаку">Правий зсув з розширенням знаку</a> (<code>>></code>)</td> + <td> + <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються значенням старшого біта.</p> + </td> + <td><code>9>>2</code> вертає 2, тому що число 1001, зсунуте на 2 біти праворуч, стає 10, тобто 2. Аналогічно, <code>-9>>2</code> вертає -3, тому що знак зберігається.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#>>>_Правий_зсув_із_заповненням_нулями">Правий зсув із заповненням нулями</a>(<code>>>></code>)</td> + <td> + <p>Цей оператор виконує зсув першого операнду на вказану кількість бітів праворуч. Надлишкові біти, зсунуті праворуч, відкидаються. Біти, додані зліва, заповнюються нулями.</p> + </td> + <td><code>19>>>2</code> вертає 4, тому що число 10011, зсунуте на 2 бітів праворуч, стає 100, тобто 4. Для невід'ємних чисел, правий зсув із заповненням нулями та правий зсув з розширенням знаку дають однаковий результат.</td> + </tr> + </tbody> +</table> + +<h3 id="Логічні_оператори">Логічні оператори</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логічні оператори</a> застосовуються до булевих (логічних) значень; в цьому випадку вони повертають значення типу Boolean. Однак, оператори <code>&&</code> та <code>||</code> насправді повертають значення одного з заданих операндів, тому, якщо ці оператори використовуються зі значеннями не булевого типу, вони повернуть значення не булевого типу. Логічні оператори описані у наведеній нижче таблиці.</p> + +<table class="fullwidth-table"> + <caption>Логічні оператори</caption> + <thead> + <tr> + <th scope="col">Оператор</th> + <th scope="col">Застосування</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_І">Логічне І</a> (<code>&&</code>)</td> + <td><code>expr1 && expr2</code></td> + <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>false</code>; інакше, повертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>&&</code> вертає <code>true</code>, якщо обидва операнди дорівнюють true; інакше, вертає <code>false</code>.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_АБО">Логічне АБО </a>(<code>||</code>)</td> + <td><code>expr1 || expr2</code></td> + <td>Вертає вираз <code>expr1</code>, якщо він може бути перетворений на <code>true</code>; інакше, вертає <code>expr2</code>. Таким чином, при використанні з булевими значеннями <code>||</code> вертає <code>true</code>, якщо будь-який з операндів дорівнює true; якщо обидва дорівнюють false, вертає <code>false</code>.</td> + </tr> + <tr> + <td><a href="/uk/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Логічне_НЕ_!">Логічне НЕ </a>(<code>!</code>)</td> + <td><code>!expr</code></td> + <td>Вертає <code>false</code>, якщо його єдиний операнд може бути перетворений на <code>true</code>; інакше, вертає <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Прикладами виразів, які можуть бути перетворені на <code>false</code>, є ті, які повертають null, 0, NaN, порожній рядок ("") або undefined.</p> + +<p>Наступний код демонструє приклади оператора <code>&&</code> (логічне І).</p> + +<pre class="brush: js">var a1 = true && true; // t && t вертає true +var a2 = true && false; // t && f вертає false +var a3 = false && true; // f && t вертає false +var a4 = false && (3 == 4); // f && f вертає false +var a5 = 'Кіт' && 'Пес'; // t && t вертає Пес +var a6 = false && 'Кіт'; // f && t вертає false +var a7 = 'Кіт' && false; // t && f вертає false +</pre> + +<p>Наступний код демонструє приклади оператора <code>||</code> (логічне АБО).</p> + +<pre class="brush: js">var o1 = true || true; // t || t вертає true +var o2 = false || true; // f || t вертає true +var o3 = true || false; // t || f вертає true +var o4 = false || (3 == 4); // f || f вертає false +var o5 = 'Кіт' || 'Пес'; // t || t вертає Кіт +var o6 = false || 'Кіт'; // f || t вертає Кіт +var o7 = 'Кіт' || false; // t || f вертає Кіт +</pre> + +<p>Наступний код демонструє приклади оператора <code>!</code> (логічне НЕ).</p> + +<pre class="brush: js">var n1 = !true; // !t вертає false +var n2 = !false; // !f вертає true +var n3 = !'Кіт'; // !t вертає false +</pre> + +<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Коротке замикання обчислення</h4> + +<p>Оскільки логічні вирази обчислюються зліва направо, вони перевіряються на можливе "коротке замикання" обчислення за наступними правилами:</p> + +<ul> + <li><code>false</code> && <em>будь-що</em> обчислюється як false.</li> + <li><code>true</code> || <em>будь-що</em> обчислюється як true.</li> +</ul> + +<p>Правила логіки гарантують, що ці обчислення завжди будуть правильними. Зауважте, що частина виразу <em>будь-що</em> не обчислюється, тому будь-які побічні ефекти від цих обчислень не відбудуться.</p> + +<h3 id="Рядкові_оператори">Рядкові оператори</h3> + +<p>На додачу до операторів порівняння, які можуть застосовуватись до рядкових значень, оператор конкатенації (+) об'єднує значення двох рядків, повертаючи інший рядок, який є об'єднанням рядків двох операндів.</p> + +<p>Наприклад,</p> + +<pre class="brush: js">console.log('мій ' + 'рядок'); // консоль виводить рядок "мій рядок".</pre> + +<p>Скорочений оператор присвоєння += також може застосовуватись для конкатенації рядків.</p> + +<p>Наприклад,</p> + +<pre class="brush: js">var mystring = 'алфа'; +mystring += 'віт'; // повертає "алфавіт" та присвоює це значення mystring.</pre> + +<h3 id="Умовний_тернарний_оператор">Умовний (тернарний) оператор</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a> - єдиний оператор у JavaScript, який приймає три операнди. У оператора може бути одне чи два значення, в залежності від умови. Використовує наступний синтакс:</p> + +<pre class="syntaxbox"><em>умова</em> ? значення<em>1</em> : значення<em>2</em> +</pre> + +<p>Якщо <code>умова</code> дорівнює true, оператор повертає <code>значення1</code>. В іншому випадку - <code>значення2</code>. Умовний оператор можна використовувати будь-де, де використовується звичайний оператор. Наприклад:</p> + +<pre class="brush: js">var status = (age >= 18) ? 'дорослий' : 'неповнолітній'; +</pre> + +<p>Ця інструкція присвоює значення "дорослий" змінній <code>status</code>, якщо значення <code>age</code> (вік) більше чи дорівнює 18. Інакше, вона присвоює змінній <code>status</code> значення "неповнолітній".</p> + +<h3 id="Comma_operator" name="Comma_operator">Оператор кома</h3> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Оператор кома</a> (<code>,</code>) просто обчислює обидва свої операнди та повертає значення останнього операнда. Цей оператор найчастіше використовується всередині циклу <code>for</code>, що дозволяє оновлювати більше однієї змінної на кожному проході циклу.</p> + +<p>Наприклад, якщо <code>a</code> є двовимірним масивом з 10 елементами по кожній стороні, наступний код використовує оператор кома, щоб оновити дві змінні одночасно. Код виводить значення діагональних елементів масиву:</p> + +<pre class="brush: js">for (var i = 0, j = 9; i <= j; i++, j--) + console.log('a[' + i + '][' + j + ']= ' + a[i][j]); +</pre> + +<h3 id="Унарні_оператори">Унарні оператори</h3> + +<p>Унарна операція - це операція лише з одним операндом.</p> + +<h4 id="delete" name="delete"><code>delete</code></h4> + +<p>Оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> видаляє об'єкт, властивість об'єкта або елемент за вказаним індексом у масиві. Синтаксис наступний:</p> + +<pre class="brush: js">delete objectName; +delete objectName.property; +delete objectName[index]; +delete property; // працює лише всередині конструкції with +</pre> + +<p>де <code>objectName</code> є іменем об'єкта, <code>property</code> - існуюча властивість, а <code>index</code> - ціле число, що вказує розташування елемента у масиві.</p> + +<p>Четверта форма працює лише всередині блоку <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/with">with</a></code> для видалення властивості об'єкта.</p> + +<p>Ви можете використовувати оператор <code>delete</code> для видалення змінних, оголошених неявно, але не тих, що були оголошені оператором <code>var</code>.</p> + +<p>Якщо оператор <code>delete</code> відпрацьовує успішно, значенням властивості чи елемента стає <code>undefined</code>. Оператор <code>delete</code> повертає <code>true</code>, якщо операція можлива; він повертає <code>false</code>, якщо операція неможлива.</p> + +<pre class="brush: js">x = 42; +var y = 43; +myobj = new Number(); +myobj.h = 4; // створює властивість h +delete x; // вертає true (можна видалити властивість, оголошену неявно) +delete y; // вертає false (не можна видалити властивість, оголошену через var) +delete Math.PI; // вертає false (не можна видаляти попередньо визначені властивості) +delete myobj.h; // вертає true (можна видалити властивість, визначену користувачем) +delete myobj; // вертає true (можна видалити, якщо властивість оголошена неявно) +</pre> + +<h5 id="Видалення_елементів_масиву">Видалення елементів масиву</h5> + +<p>Коли ви видаляєте елемент масиву, це не впливає на довжину масиву. Для прикладу, якщо ви видалите <code>a[3]</code>, <code>a[4]</code> досі є <code>a[4]</code>, а <code>a[3]</code> дорівнює undefined.</p> + +<p>Коли оператор <code>delete</code> видаляє елемент масиву, цей елемент більше не існує у масиві. У наступному прикладі <code>trees[3]</code> видаляється оператором <code>delete</code>. Однак, адреса <code>trees[3]</code> досі доступна та повертає <code>undefined</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> присвоюється значення <code>undefined</code>, але елемент масиву досі існує:</p> + +<pre class="brush: js">var trees = ['секвоя', 'лавр', 'кедр', 'дуб', 'клен']; +trees[3] = undefined; +if (3 in trees) { + // це виконається +} +</pre> + +<h4 id="typeof" name="typeof"><code>typeof</code></h4> + +<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a> використовується наступним чином:</p> + +<pre class="syntaxbox">typeof операнд +typeof (операнд) +</pre> + +<p>Оператор <code>typeof</code> повертає рядок, що вказує тип необчисленого операнда. <code>Операнд</code> є рядком, змінною, ключовим словом чи об'єктом, для якого треба повернути тип. Круглі дужки є необов'язковими.</p> + +<p>Припустимо, ви визначили наступні змінні:</p> + +<pre class="brush: js">var myFun = new Function('5 + 2'); +var shape = 'коло'; +var size = 1; +var foo = ['Яблуко', 'Манго', 'Апельсин']; +var today = new Date(); +</pre> + +<p>Оператор <code>typeof</code> вертає наступні результати для цих змінних:</p> + +<pre class="brush: js">typeof myFun; // вертає "function" +typeof shape; // вертає "string" +typeof size; // вертає "number" +typeof foo; // вертає "object" +typeof today; // вертає "object" +typeof doesntExist; // вертає "undefined" +</pre> + +<p>Для ключових слів <code>true</code> та <code>null</code> оператор <code>typeof</code> вертає наступні результати:</p> + +<pre class="brush: js">typeof true; // вертає "boolean" +typeof null; // вертає "object" +</pre> + +<p>Для числа та рядка оператор <code>typeof</code> вертає наступні результати:</p> + +<pre class="brush: js">typeof 62; // вертає "number" +typeof 'Hello world'; // вертає "string" +</pre> + +<p>Для значень властивостей оператор <code>typeof</code> вертає тип значення, яке містить ця властивість:</p> + +<pre class="brush: js">typeof document.lastModified; // вертає "string" +typeof window.length; // вертає "number" +typeof Math.LN2; // вертає "number" +</pre> + +<p>Для методів та функцій оператор <code>typeof</code> вертає наступні результати:</p> + +<pre class="brush: js">typeof blur; // вертає "function" +typeof eval; // вертає "function" +typeof parseInt; // вертає "function" +typeof shape.split; // вертає "function" +</pre> + +<p>Для попередньо визначених об'єктів оператор <code>typeof</code> вертає наступні результати:</p> + +<pre class="brush: js">typeof Date; // вертає "function" +typeof Function; // вертає "function" +typeof Math; // вертає "object" +typeof Option; // вертає "function" +typeof String; // вертає "function" +</pre> + +<h4 id="void" name="void"><code>void</code></h4> + +<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/void"><code>void</code></a> використовується наступним чином:</p> + +<pre class="syntaxbox">void (вираз) +void вираз +</pre> + +<p>Оператор <code>void</code> вказує, що вираз має бути обчислений без повернення значення. <code>Вираз</code> є виразом JavaScript, який треба обчислити. Дужки, що оточують вираз, є необов'язковими, але вживати їх є гарним стилем.</p> + +<p>Ви можете скористатись оператором <code>void</code>, щоб вказати вираз як гіпертекстове посилання. Вираз обчислюється, але не завантажується на місці відкритого документа.</p> + +<p>Наступний код створює гіпертекстове посилання, яке нічого не робить, коли користувач на нього натискає. Коли користувач натискає на посилання, <code>void(0)</code> обчислюється як <code>undefined</code>, що не має жодного ефекту у JavaScript.</p> + +<pre class="brush: html"><a href="javascript:void(0)">Натисніть сюди, щоб нічого не робити</a> +</pre> + +<p>Наступний код створює гіпертекстове посилання, яке відправляє форму, коли користувач натискає на нього.</p> + +<pre class="brush: html"><a href="javascript:void(document.form.submit())"> +Натисніть сюди, щоб відправити</a></pre> + +<h3 id="Оператори_відношення">Оператори відношення</h3> + +<p>Оператор відношення порівнює свої операнди та повертає значення <code>Boolean</code>, на підставі того, чи є порівняння істиною.</p> + +<h4 id="in"><code>in</code></h4> + +<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> повертає <code>true</code>, якщо вказана властивість існує на вказаному об'єкті. Синтаксис наступний:</p> + +<pre class="brush: js">propNameOrNumber in objectName +</pre> + +<p>де <code>propNameOrNumber</code> є рядковим або числовим виразом, який відображає ім'я властивості або індекс у масиві, а <code>objectName</code> є ім'ям об'єкта.</p> + +<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 є властивістю масиву) + +// вбудовані об'єкти +'PI' in Math; // вертає true +var myString = new String('корал'); +'length' in myString; // вертає true + +// Користувацькі об'єкти +var mycar = { make: 'Honda', model: 'Accord', year: 1998 }; +'make' in mycar; // вертає true +'model' in mycar; // вертає true +</pre> + +<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4> + +<p>Оператор <a href="/uk/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a> повертає <code>true</code>, якщо вказаний об'єкт належить до вказаного типу. Синтаксис наступний:</p> + +<pre class="syntaxbox">objectName instanceof objectType +</pre> + +<p>де <code>objectName</code> є ім'ям об'єкта, який порівнюється з <code>objectType</code>, а <code>objectType</code> є типом об'єкта, наприклад, {{jsxref("Date")}} або {{jsxref("Array")}}.</p> + +<p>Використовуйте <code>instanceof</code>, коли вам необхідно підтвердити тип об'єкта під час виконання. Наприклад, перехоплюючи винятки, ви можете зробити відгалуження до іншого коду обробки винятків, в залежності від типу викинутого винятку.</p> + +<p>Наприклад, наступний код використовує <code>instanceof</code> для визначення того, чи <code>theDay</code> є об'єктом <code>Date</code>. Оскільки <code>theDay</code> є об'єктом <code>Date</code>, інструкції у блоці <code>if</code> будуть виконані.</p> + +<pre class="brush: js">var theDay = new Date(1995, 12, 17); +if (theDay instanceof Date) { + // інструкції для виконання +} +</pre> + +<h3 id="Пріоритет_операторів">Пріоритет операторів</h3> + +<p><em>Пріоритет</em> операторів визначає порядок, у якому вони застосовуються під час обчислення виразу. Ви можете змінити пріоритет оператора, використавши дужки.</p> + +<p>Наступна таблиця наводить пріоритети операторів, від найвищого до найнижчого.</p> + +<table class="standard-table"> + <caption>Пріоритет операторів</caption> + <thead> + <tr> + <th scope="col">Тип оператора</th> + <th scope="col">Окремі оператори</th> + </tr> + </thead> + <tbody> + <tr> + <td>властивість</td> + <td><code>. []</code></td> + </tr> + <tr> + <td>виклик / створення екземпляра</td> + <td><code>() new</code></td> + </tr> + <tr> + <td>заперечення / інкремент</td> + <td><code>! ~ - + ++ -- typeof void delete</code></td> + </tr> + <tr> + <td>множення / ділення</td> + <td><code>* / %</code></td> + </tr> + <tr> + <td>додавання / віднімання</td> + <td><code>+ -</code></td> + </tr> + <tr> + <td>бітовий зсув</td> + <td><code><< >> >>></code></td> + </tr> + <tr> + <td>відношення</td> + <td><code>< <= > >= in instanceof</code></td> + </tr> + <tr> + <td>рівність</td> + <td><code>== != === !==</code></td> + </tr> + <tr> + <td>побітове-і</td> + <td><code>&</code></td> + </tr> + <tr> + <td>виключне-побітове-або</td> + <td><code>^</code></td> + </tr> + <tr> + <td>побітове-або</td> + <td><code>|</code></td> + </tr> + <tr> + <td>логічне-і</td> + <td><code>&&</code></td> + </tr> + <tr> + <td>логічне-або</td> + <td><code>||</code></td> + </tr> + <tr> + <td>умовний</td> + <td><code>?:</code></td> + </tr> + <tr> + <td>присвоєння</td> + <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |=</code></td> + </tr> + <tr> + <td>кома</td> + <td><code>,</code></td> + </tr> + </tbody> +</table> + +<p>Більш детальну версію цієї таблиці, доповнену посиланнями на додаткові подробиці щодо кожного оператора, можна знайти у <a href="/uk/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">довіднику з JavaScript</a>.</p> + +<h2 id="Вирази">Вирази</h2> + +<p><em>Виразом</em> є будь-яка одиниця коду, яка вирішується з певним значенням.</p> + +<p>Кожний синтаксично коректний вираз вирішується з якимось значенням, але, концептуально, існують два типи виразів: з побічними ефектами (наприклад: ті, що присвоюють значення змінній) та такі, що обчислюються і, таким чином, вирішуються з певним значенням.</p> + +<p>Вираз <code>x = 7</code> є прикладом першого типу. Цей вираз використовує <em>оператор</em> = для присвоєння семи змінній<em> </em><code>x</code>. Сам вираз обчислюється з результатом сім.</p> + +<p>Код <code>3 + 4</code> є прикладом другого типу виразів. Цей вираз за допомогою оператора + складає три та чотири без присвоєння результату, семи, змінній.<br> + <br> + JavaScript має наступні категорії виразів:</p> + +<ul> + <li>Арифметичні: обчислюються як число, наприклад, 3.14159. (Загалом, використовують {{ web.link("#Арифметичні_оператори", "арифметичні оператори") }}.)</li> + <li>Рядкові: обчислюються як рядок, наприклад, "Фред" або "234". (Загалом, використовують {{ web.link("#Рядкові_оператори", "рядкові оператори") }}.)</li> + <li>Логічні: обчислюються як true або false. (Часто використовують {{ web.link("#Логічні_оператори", "логічні оператори") }}.)</li> + <li>Первинні вирази: Базові ключові слова та загальні вирази у JavaScript.</li> + <li>Лівосторонні вирази: значення зліва є призначенням присвоєння.</li> +</ul> + +<h3 id="Первинні_вирази">Первинні вирази</h3> + +<p>Базові ключові слова та загальні вирази у JavaScript.</p> + +<h4 id="this" name="this"><code>this</code></h4> + +<p>Використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">ключове слово <code>this</code></a> для посилання на поточний об'єкт. Загалом, <code>this</code> у методі посилається на об'єкт, що його викликав. Використовуйте <code>this</code> або з крапкою, або з дужковою нотацією:</p> + +<pre class="syntaxbox">this['propertyName'] +this.propertyName +</pre> + +<p>Припустимо, функція на ім'я <code>validate</code> перевіряє властивість об'єкта <code>value</code>, маючи найменше та найбільше значення:</p> + +<pre class="brush: js">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + console.log('Некоректне значення!'); +} +</pre> + +<p>Ви можете викликати <code>validate</code> в кожному обробнику подій елементів форми <code>onChange</code>, використовуючи <code>this</code>, щоб передати йому елемент форми, як у наступному прикладі:</p> + +<pre class="brush: html"><p>Введіть число між 18 та 99:</p> +<input type="текст" name="вік" size=3 onChange="validate(this, 18, 99);"> +</pre> + +<h4 id="Оператор_групування">Оператор групування</h4> + +<p>Оператор групування <code>( )</code> контролює пріоритет обчислення у виразах. Наприклад, ви можете змінити обчислення спочатку множення та ділення, а потім додавання та віднімання, щоб обчислити спочатку додавання.</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> + +<h3 id="Лівосторонні_вирази">Лівосторонні вирази</h3> + +<p>Значення зліва є призначенням присвоєння.</p> + +<h4 id="new" name="new"><code>new</code></h4> + +<p>Ви можете скористатись <a href="/uk/docs/Web/JavaScript/Reference/Operators/new">оператором <code>new</code></a>, щоб створити екземпляр визначеного користувачем типу об'єкта або одного з вбудованих типів. Використовуйте <code>new</code> наступним чином:</p> + +<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]); +</pre> + +<h4 id="super">super</h4> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/super">Ключове слово super</a> використовується для виклику функцій батьківського об'єкта. Воно корисне для використання з <a href="/uk/docs/Web/JavaScript/Reference/Classes">класами</a>, для виклику батьківського конструктора, наприклад.</p> + +<pre class="syntaxbox">super([arguments]); // викликає батьківський конструктор. +super.functionOnParent([arguments]); +</pre> + +<h4 id="Оператор_розпакування">Оператор розпакування</h4> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Оператор розпакування</a> дозволяє розкласти вираз там, де очікується більше одного аргументу (для викликів функцій) або більше одного елемента (для масивних літералів).</p> + +<p><strong>Приклад:</strong> Сьогодні, якщо ви маєте масив та бажаєте створити новий масив, використавши існуючий масив як його частину, синтаксису масивного літералу більше недостатньо, і вам доводиться повертатись до імперативного коду, використовуючи комбінацію з <code>push</code>, <code>splice</code>, <code>concat</code>, і т. д. З оператором розпакування все стає набагато лаконічнішим:</p> + +<pre class="brush: js">var parts = ['плечі', 'коліна']; +var lyrics = ['голова', ...parts, 'та', 'пальці'];</pre> + +<p>Схожим чином оператор розпакування працює з викликами функцій:</p> + +<pre class="brush: js">function f(x, y, z) { } +var args = [0, 1, 2]; +f(...args);</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> |