diff options
Diffstat (limited to 'files/uk/web/javascript/reference/statements/for...in/index.html')
-rw-r--r-- | files/uk/web/javascript/reference/statements/for...in/index.html | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/statements/for...in/index.html b/files/uk/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..f8bb6221be --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,149 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Інструкція + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Цикл <strong><code>for...in</code></strong> перебирає усі <a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перелічувані властивості</a> об'єкта, ключами яких є рядки (ігноруючи ті, ключами яких є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol">символи</a>), в тому числі успадковані перелічувані властивості.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) + statement</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Нове ім'я властивості призначається параметру <em>variable</em> на кожній ітерації.</dd> + <dt><code>object</code></dt> + <dd>Об'єкт, чиї не символьні перелічувані властивості перебираються.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Цикл <code>for...in</code> перебирає лише перелічувані, не символьні властивості. Об'єкти, створені вбудованими конструкторами, як <code>Array</code> та <code>Object</code>, успадковують неперелічувані властивості від <code>Object.prototype</code> та <code>String.prototype</code>, такі як метод {{jsxref("String.indexOf", "indexOf()")}} у {{jsxref("String")}} або метод {{jsxref("Object.toString", "toString()")}} у {{jsxref("Object")}}. Цикл перебиратиме усі особисті перелічувані властивості об'єкта й ті, які об'єкт успадковує від прототипу конструктора (властивості, розташовані ближче до об'єкта у ланцюжку прототипів, заміщують властивості прототипу).</p> + +<h3 id="Видалені_додані_або_модифіковані_властивості">Видалені, додані або модифіковані властивості</h3> + +<p>Цикл <code>for...in</code> перебирає властивості об'єкта у довільному порядку (дивіться оператор {{jsxref("Operators/delete", "delete")}}, щоб дізнатись, чому не можна покладатися на удавану впорядкованість перебору, принаймні, у кросбраузерних налаштуваннях).</p> + +<p>Якщо властивість була змінена під час однієї ітерації і потім відвідується під час наступної, її значенням у циклі буде значення під час наступної ітерації. Властивість, що була видалена до того, як була відвідана, не буде відвідана пізніше. Властивості, додані до об'єкта під час поточного перебору, можуть бути або відвідані, або пропущені під час цього перебору.</p> + +<p>Загалом, краще не додавати, не змінювати й не видаляти властивості об'єкта під час перебору, окрім властивості, що відвідується у даний момент. Немає гарантії, що додана властивість буде відвідана, чи що змінена властивість (якщо це не поточна властивість) буде відвідана до чи після того, як була змінена, чи що видалена властивість не була відвідана до того, як була видалена.</p> + +<h3 id="Перебір_масиву_та_for...in">Перебір масиву та for...in</h3> + +<div class="note"> +<p><strong>Заувага:</strong> цикл <code>for...in</code> не слід використовувати для перебору {{jsxref("Array", "масиву")}}, де порядок індексів є важливим.</p> +</div> + +<p>Індекси масивів є просто перелічуваними властивостями з цілочисельними іменами, в усьому іншому вони ідентичні загальним властивостям об'єкта. Немає гарантій, що <code>for...in</code> поверне індекси у певному порядку. Цикл <code>for...in</code> поверне усі перелічувані властивості, в тому числі не цілочисельні імена та успадковані властивості.</p> + +<p>Оскільки порядок перебору залежить від реалізації, перебір масиву може відвідувати елементи масиву непослідовно. Тому краще використовувати цикл {{jsxref("Statements/for", "for")}} з числовим індексом (або {{jsxref("Array.prototype.forEach()")}} чи {{jsxref("Statements/for...of", "for...of")}}) для перебору масивів, коли порядок звернення до елементів важливий.</p> + +<h3 id="Перебір_лише_особистих_властивостей">Перебір лише особистих властивостей</h3> + +<p>Якщо ви бажаєте розглядати властивості, притаманні лише самому об'єкту, а не його прототипам, скористайтесь {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} або виконайте перевірку {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} (також можна використати {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}}). Альтернативно, якщо ви певні, що не буде зовнішнього втручання у код, ви можете розширити вбудовані прототипи методом перевірки.</p> + +<h2 id="Навіщо_використовувати_for...in">Навіщо використовувати for...in?</h2> + +<p>Враховуючи, що цикл <code>for...in</code> створений для перебору властивостей об'єкта, не рекомендований для використання у масивах, і що існують такі варіанти як <code>Array.prototype.forEach()</code> та <code>for...of</code>, яка взагалі може бути користь від <code>for...in</code>?</p> + +<p>Він може бути найбільш практичним для налагодження, оскільки ним легко перевіряти властивості об'єкта (виводячи їх у консоль чи іншим чином). Хоча масиви часто більш зручні для зберігання даних, у ситуаціях, де для роботи з даними потрібні пари ключ-значення (де властивості виконують роль "ключів"), можливі випадки, коли ви захочете перевірити, чи містить якийсь з цих ключів певне значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_for...in">Використання for...in</h3> + +<p>Наведений цикл <code>for...in</code> перебирає усі перелічувані, не символьні властивості об'єкта та виводить рядки імен властивостей та їхніх значень.</p> + +<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Виведе: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<h3 id="Перебір_особистих_властивостей">Перебір особистих властивостей</h3> + +<p>Наступна функція ілюструє використання {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: успадковані властивості не виводяться.</p> + +<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3}; + +function ColoredTriangle() { + this.color = 'red'; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (const prop in obj) { + if (obj.hasOwnProperty(prop)) { + console.log(`obj.${prop} = ${obj[prop]}`); + } +} + +// Виведе: +// "obj.color = red"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.for_in")}}</p> + +<h3 id="Сумісність_Ініціалізація_лічильника_у_строгому_режимі">Сумісність: Ініціалізація лічильника у строгому режимі</h3> + +<p>До Firefox 40 було можливо використати ініціалізацію лічильника (<code>i=0</code>) у циклі <code>for...in</code>:</p> + +<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Ця нестандартна поведінка тепер ігнорується у версії 40 та пізніших і викличе помилку {{jsxref("SyntaxError")}} ("<a href="/uk/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> ({{bug(748550)}} та {{bug(1164741)}}).</p> + +<p>Інші рушії, такі як v8 (Chrome), Chakra (IE/Edge) та JSC (WebKit/Safari), також проводять дослідження щодо прибирання цієї нестандартної поведінки.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} – схожий цикл, що перебирає <em>значення</em> властивостей</li> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – схожий, але застарілий цикл, що перебирає значення властивостей об'єкта, а не самі імена властивостей</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Вираз функції-генератора</a> (використовує синтаксис <code>for...in</code>)</li> + <li><a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> |