initial commit

1 files changed, 198 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/operators/array_comprehensions/index.html b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html
new file mode 100644
index 0000000000..ebd2425ae2
--- /dev/null
+++ b/files/uk/web/javascript/reference/operators/array_comprehensions/index.html
@@ -0,0 +1,198 @@
+---
+title: Заповнення масивів
+slug: Web/JavaScript/Reference/Operators/Array_comprehensions
+tags:
+  - JavaScript
+  - Оператор
+  - застарілий
+  - нестандартний
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}
+<div class="warning"><strong>Нестандартний. Не використовуйте!</strong><br>
+Синтаксис заповнення масивів є нестандартним та був прибраний, починаючи з Firefox 58. Для варіантів використання в майбутьому розгляньте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Стрілкові_функції", "стрілкові функції", "", 1)}} та {{jsxref("Operators/Spread_syntax", "оператор розпакування", "", 1)}}.</div>
+{{Obsolete_Header(58)}}</div>
+
+<p>Синтаксис <strong>заповнення масивів</strong> (array comprehension) був виразом JavaScript, який дозволяв швидко збирати новий масив, базуючись на вже існуючому масиві. Однак, він був прибраний зі стандарту та з реалізації Firefox. Не використовуйте його!</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>У заповненнях масивів дозволені наступні два види компонентів:</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} та</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>Перебір for-of завжди є першим компонентом. Можна використовувати більше одного перебору for-of чи if-конструкцій.</p>
+
+<p>Заповнення масивів були попередньо запропоновані для стандартизації у ECMAScript 2016, вони надають корисне скорочення запису для конструювання нового масиву на основі змісту іншого масиву. Заповнення часто можуть використовуватись замість викликів {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}}, або як засіб їх об'єднати.</p>
+
+<p>Наступне заповнення бере масив чисел та створює новий масив, де кожне з цих чисел подвоюється.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // виводить 2,4,6,8
+</pre>
+
+<p>Це еквівалентно наступній операції {{jsxref("Array.prototype.map", "map()")}}:</p>
+
+<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
+</pre>
+
+<p>Заповнення також можуть використовуватись для відбору елементів, які відповідають певному виразу. Ось заповнення, яке обирає лише парні числа:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // виводить 2,22,30
+</pre>
+
+<p>Метод {{jsxref("Array.prototype.filter", "filter()")}} може використовуватись для тієї ж самої мети:</p>
+
+<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>Операції з {{jsxref("Array.prototype.map", "map()")}} та {{jsxref("Array.prototype.filter", "filter()")}} можна об'єднати у єдине заповнення масиву. Ось таке, що відфільтровує лише парні числа, а потім створює масив, де вони подвоєні:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // виводить 4,44,60
+</pre>
+
+<p>Квадратні дужки заповнення масиву створюють неявний блок для області видимості. Нові змінні (такі, як i у прикладі) поводяться так, ніби вони були оголошені за допомогою {{jsxref("Statements/let","let")}}. Це означає, що вони не будуть доступні за межами заповнення.</p>
+
+<p>Вхідні дані для заповнення масиву не обов'язково самі мають бути масивом; <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">ітератори та генератори</a> також підійдуть.</p>
+
+<p>Навіть рядки можна використовувати як вхідні дані; щоб виконати наведені вище функції filter та map (на подібних до масиву об'єктах):</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Знову ж таки, початкова форма не зберігається, тому нам доведеться скористатись методом {{jsxref("Array.prototype.join", "join()")}}, щоб повернутись до рядка.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Прості_заповнення_масивів">Прості заповнення масивів</h3>
+
+<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['А', 'Б', 'В'];
+[for (letters of abc) letters.toLowerCase()];
+// ["а", "б", "в"]</pre>
+
+<h3 id="Заповнення_масивів_з_оператором_if">Заповнення масивів з оператором if</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year &gt; 2000) year];
+// [2006, 2010, 2014]
+[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
+// [2006], те саме, що й нижче:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [2006]
+</pre>
+
+<h3 id="Заповнення_масивів_у_порівнянні_з_map_та_filter">Заповнення масивів у порівнянні з <code>map</code> та <code>filter</code></h3>
+
+<p>Легко зрозуміти синтаксис заповнення масивів, порівнявши його з методами масиву {{jsxref("Array.map", "map")}} та {{jsxref("Array.filter", "filter")}}:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i * i);
+[for (i of numbers) i * i];
+// усі дорівнюють [1, 4, 9]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// усі дорівнюють [1, 2]
+</pre>
+
+<h3 id="Заповнення_масивів_з_двома_масивами">Заповнення масивів з двома масивами</h3>
+
+<p>Використання двох переборів for-of для роботи з двома масивами:</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+var letters = ['а', 'б', 'в'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1а", "1б", "1в", "2а", "2б", "2в", "3а", "3б", "3в"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1а", "1б", "1в"],
+//  ["2а", "2б", "2в"],
+//  ["3а", "3б", "3в"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'а') i + j]
+// ["2б", "2в", "3б", "3в"], те саме, що й наведене нижче:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'а') i + j]
+// ["2б", "2в", "3б", "3в"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'а') i + j]]
+// [["2б", "2в"], ["3б", "3в"]], не те саме, що наведене нижче:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'а') i + j]]
+// [[], ["2б", "2в"], ["3б", "3в"]]
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Початково синтаксис був присутній у чорнетці ECMAScript 2015, але був видалений у ревізії 27 (серпень 2014). Будь ласка, дивіться семантику специфікації у старших ревізіях ES2015.</p>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="Відмінності_від_заповнень_у_JS1.7JS1.8">Відмінності від заповнень у JS1.7/JS1.8</h2>
+
+<div class="warning">Заповнення JS1.7/JS1.8 були прибрані з Gecko, починаючи з версії 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Старий синтаксис заповнень (більше не використовується!):</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>Відмінності:</p>
+
+<ul>
+ <li>Заповнення ESNext створюють область видимості для кожного блоку "for", а не для всього заповнення.
+  <ul>
+   <li>Старе: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>Нове: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, кожна ітерація створює свіже зв'язування для x. </code></li>
+  </ul>
+ </li>
+ <li>Заповнення ESNext починаються з "for", а не з виразу присвоювання.
+  <ul>
+   <li>Старе: <code>[i * 2 for (i of numbers)]</code></li>
+   <li>Нове: <code>[for (i of numbers) i * 2]</code></li>
+  </ul>
+ </li>
+ <li>Заповнення ESNext можуть мати декілька компонентів <code>if</code> та <code>for</code>.</li>
+ <li>Заповнення ESNext працюють тільки з переборами <code>{{jsxref("Statements/for...of", "for...of")}}</code>, а не з <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<p>Дивіться пропозиції щодо змін у коді у <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, коментар 42</a>.</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Заповнення генераторів", "" ,1)}}</li>
+</ul>