initial commit

1 files changed, 290 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/global_objects/array/foreach/index.html b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..97a354787f
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,290 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Prototype
+  - Довідка
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>forEach()</strong></code> виконує надану функцію один раз для кожного елемента масиву.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);</var></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Функція, що виконується для кожного елемента. Приймає три аргументи:</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>Черговий елемент масиву, що обробляється.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>Індекс чергового елемента в масиві.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Масив, для якого було викликано <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Значення, що використовується як <code><strong>this</strong></code> при виконанні <code>callback</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Метод <code>forEach()</code> викликає надану функцію <code>callback</code> для кожного елемента масиву у порядку зростання. Оминає властивості, які було видалено або не було <abbr title="ініціалізовано">започатковано</abbr> (тобто, в розріджених масивах, <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#sparseArray">дивіться приклад, наведений нижче</a>).</p>
+
+<p>Функція <em><code>callback</code></em> викликається з трьома аргументами:</p>
+
+<ol>
+ <li>значення елемента;</li>
+ <li>індекс елемента;</li>
+ <li>масив, що перебирається.</li>
+</ol>
+
+<p>Якщо для <code>forEach()</code> вказано параметр <em><code>thisArg</code></em>, його буде використано як <code>this</code> для функції <code>callback</code>. Зрештою значення <code>this</code> для функції <em><code>callback</code></em> визначатиметься відповідно до <a href="/uk/docs/Web/JavaScript/Reference/Operators/this">загальних правил</a>.</p>
+
+<p>Множина індексів елементів, що їх перебиратиме <code>forEach()</code> з'ясовується ще до першого виклику <em><code>callback</code></em>. Елементи, додані після здійснення виклику <code>forEach()</code>, буде знехтувано (<em><code>callback</code></em> для жодного з них не викликатиметься). Якщо змінити або видалити якийсь з елементів масиву, до функції <code>callback</code> потрапить те значення елемента, яке він мав безпосередньо перед відповідним викликом <code>callback</code>. Якщо елемент видалено до відвідування, відвідано не буде. Якщо вже відвіданий елемент видалено упродовж перебирання (наприклад, за допомогою {{jsxref("Array.prototype.shift()", "shift()")}}), подальші елементи будуть пропущені — <a href="#Якщо_масив_змінено_під_час_перебору_деякі_елементи_може_бути_пропущено">дивіться приклади нижче у статті</a>.</p>
+
+<p>Метод <code>forEach()</code> виконує функцію <em><code>callback</code></em> один раз для кожного елемента масиву. На відміну від {{jsxref("Array.prototype.map()", "map()")}} чи {{jsxref("Array.prototype.reduce()", "reduce()")}}, він завжди вертає значення {{jsxref("undefined")}}, тож продовжити ланцюжок викликів після нього неможливо. Досить типовим є виклик <code>forEach()</code> наприкінці ланцюжка методів з метою виконання додаткових дій.</p>
+
+<p>Сам метод <code>forEach()</code> не змінює масив, на якому його викликано, втім усередині функції <em><code>callback</code></em> це можливо.</p>
+
+<div class="note">
+<p><strong>Заувага:</strong> Зупинити чи перервати цикл <code>forEach()</code> неможливо без викидання винятку. Якщо вам це потрібно, метод <code>forEach()</code> — не ліпший вибір. </p>
+
+<p>Завчасне переривання може бути виконане за допомогою:</p>
+
+<ul>
+ <li>Простого циклу <a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></li>
+ <li>Циклів <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> / <a href="/uk/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Методи масивів: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}} та {{jsxref("Array.prototype.findIndex()", "findIndex()")}} перевіряють елементи масиву функцією-предикатом, яка повертає правдиве значення, якщо наступна ітерація необхідна.</p>
+</div>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="sparseArray" name="sparseArray">Операція не виконується для неініціалізованих значень (розріджені масиви)</h3>
+
+<pre class="brush: js">const arraySparse = [1,3,,7];
+let numCallbackRuns = 0;
+
+arraySparse.forEach(function(element){
+  console.log(element);
+  numCallbackRuns++;
+});
+
+console.log("numCallbackRuns: ", numCallbackRuns);
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// коментар: як бачите, пропущене значення між 3 та 7 не викликало функцію.</pre>
+
+<h3 id="Перетворення_циклу_for_на_forEach">Перетворення циклу for на forEach</h3>
+
+<pre class="brush: js">const items = ['щось', 'то', 'має', 'бути'];
+const copy = [];
+
+// було
+for (let i = 0; i &lt; items.length; i++) {
+  copy.push(items[i])
+}
+
+// стане
+items.forEach(function(item) {
+  copy.push(item)
+});</pre>
+
+<h3 id="Друк_вмісту_масиву">Друк вмісту масиву</h3>
+
+<div class="blockIndicator note">
+<p><strong>Заувага:</strong> Для того, щоб відобразити вміст масиву у консолі, ви можете скористатись методом {{domxref("Console/table", "console.table()")}}, який виведе відформатовану версію масиву. Наступний приклад ілюструє інший спосіб це зробити, за допомогою <code>forEach()</code>.</p>
+</div>
+
+<p>Наведений код виводить значення кожного елемента масиву з нового рядка:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('array[' + index + '] = ' + element);
+}
+
+// Завважте, що індекс 2 буде пропущено,
+// позаяк елемента на тому місці в масиві немає.
+[2, 5, , 9].forEach(logArrayElements);
+
+// Буде виведено у консоль:
+// array[0] = 2
+// array[1] = 5
+// array[3] = 9
+</pre>
+
+<h3 id="Використання_thisArg">Використання <em><code>thisArg</code></em></h3>
+
+<p>Наведений приклад змінює властивості об'єкта відповідно до кожного елемента в отриманому масиві:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0;
+  this.count = 0;
+}
+
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry;
+    ++this.count;
+  }, this);
+  // ^---- Зверніть увагу!
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+obj.count;
+// 3
+obj.sum;
+// 16
+</pre>
+
+<p>Оскільки для <code>forEach()</code> вказано параметр <code>thisArg</code>, для кожного виклику <code>callback</code> (тут безіменної функції) він вживатиметься як <code>this</code>.</p>
+
+<div class="note">
+<p>Якщо передавати аргумент функції за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції">стрілкового запису функції</a>, то параметр <em><code>thisArg</code></em> можна не вказувати, позаяк стрілкова функція лексично прив'язує значення {{jsxref("Operators/this", "this")}}.</p>
+</div>
+
+<h3 id="Функція_копіювання_об'єкта">Функція копіювання об'єкта</h3>
+
+<p>Наступний код створює копію наданого об'єкта. Існує чимало способів створення копії об'єкта. Наведений приклад є лише одним з них і насправді призначений лише для наочного пояснення того, як працює <code>Array.prototype.forEach()</code> на прикладі використання нових функцій ECMAScript 5 з <code>Object.*</code> для роботи з керованими властивостями:</p>
+
+<pre class="brush: js">function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+
+  return copy;
+}
+
+const obj1 = {a: 1, b: 2};
+const obj2 = copy(obj1);  // obj2 тепер схожий на obj1
+</pre>
+
+<h3 id="Якщо_масив_змінено_під_час_перебору_інші_елементи_може_бути_пропущено">Якщо масив змінено під час перебору, інші елементи може бути пропущено</h3>
+
+<p>Наведений приклад виводить у консоль послідовно "перший", "другий" та "четвертий". Коли перебір сягне другого елемента (що має значення "другий"), виклик <code>words.shift()</code> видалить перший елемент масиву, а всі, що лишаться, посунуться на одне місце ліворуч — "четвертий" стане наступним (після поточного), і "третій" таким чином буде пропущено:</p>
+
+<pre class="brush:js">var words = ['перший', 'другий', 'третій', 'четвертий'];
+
+words.forEach(function(word) {
+  console.log(word);
+
+  if (word === 'другий') {
+    words.shift();
+  }
+});
+
+// перший
+// другий
+// четвертий
+</pre>
+
+<h3 id="Вирівнювання_масиву">Вирівнювання масиву</h3>
+
+<p>Даний приклад наведено суто для навчальння. Якщо вам потрібно вирівняти масив вбудованими методами, ви можете скористатись методом {{jsxref("Array.prototype.flat()")}} (очікується у ES2019 та вже реалізований у деяких переглядачах).</p>
+
+<pre class="brush: js">/**
+* Вирівнює переданий масив у одномірний
+*
+* @params {array} arr
+* @returns {array}
+*/
+function flatten(arr) {
+  const result = [];
+
+  arr.forEach((i) =&gt; {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  });
+
+  return result;
+}
+
+// Використання
+const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(problem) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Початкова виознака. Запроваджено у JavaScript 1.6.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div>
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>