initial commit

1 files changed, 242 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/global_objects/array/from/index.html b/files/uk/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..7cfb6325b8
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,242 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript6
+  - Масив
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>Array.from()</strong></code> створює новий екземпляр <code>Array</code> (дрібну копію) з подібного до масиву або ітерабельного об'єкта.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]])</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Подібний до масиву або ітерабельний об'єкт, який треба перетворити на масив.</dd>
+ <dt><code>mapFn</code> {{Optional_inline}}</dt>
+ <dd>Функція Map для виклику на кожному елементі масиву.</dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd>Значення <code>this</code> для функції <code>mapFn</code>.</dd>
+</dl>
+
+<h3 id="Значення_яке_повертається">Значення, яке повертається</h3>
+
+<p>Новий екземпляр {{jsxref("Array")}}.</p>
+
+<h2 id="Опис">Опис</h2>
+
+<p><code>Array.from()</code> дозволяє створювати масиви з:</p>
+
+<ul>
+ <li>подібних до масивів об'єктів (об'єктів з властивістю <code>length</code> та елементами, що мають числові індекси) або</li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/iterable">ітерабельних об'єктів</a> (об'єктів, з яких можна отримати елементи, таких як {{jsxref("Map")}} та {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> має необов'язковий параметр <code>mapFn</code>, який дозволяє виконати функцію {{jsxref("Array.prototype.map", "map")}} на кожному елементі масиву (або об'єкта підкласу), який створюється. Іншими словами, <code>Array.from(obj, mapFn, thisArg)</code> має той самий результат, що й <code>Array.from(obj).map(mapFn, thisArg)</code>, тільки він не створює проміжний масив. Це особливо важливо для певних підкласів масивів, таких як <a href="/uk/docs/Web/JavaScript/Typed_arrays">типізовані масиви</a>, оскільки проміжний масив обов'язково урізав би значення для перетворення у відповідний тип.</p>
+
+<p>Властивість <code>length</code> методу <code>from()</code> дорівнює 1.</p>
+
+<p>У ES2015, синтаксис класів дозволяє створення підкласів як для вбудованих класів, так і для тих, що створені користувачем; в результаті статичні методи, такі як <code>Array.from</code> "успадковуються" підкласами класу <code>Array</code> і створюють нові екземпляри підкласу, а не класу <code>Array</code>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Масив_з_рядка">Масив з рядка</h3>
+
+<pre class="brush: js">Array.from('foo');
+// [ "f", "o", "o" ]</pre>
+
+<h3 id="Масив_з_обєкта_Set">Масив з об'єкта <code>Set</code></h3>
+
+<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']);
+Array.from(set);
+// [ "foo", "bar", "baz" ]</pre>
+
+<h3 id="Масив_з_обєкта_Map">Масив з об'єкта <code>Map</code></h3>
+
+<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(map);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+</pre>
+
+<h3 id="Масив_з_подібного_до_масиву_обєкта_arguments">Масив з подібного до масиву об'єкта (arguments)</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [ 1, 2, 3 ]</pre>
+
+<h3 id="Використання_стрілкових_функцій_та_Array.from">Використання стрілкових функцій та <code>Array.from()</code></h3>
+
+<pre class="brush: js">// Використання стрілкової функції в якості функції map
+// для маніпулювання елементами
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Генерування послідовності чисел
+// Оскільки масив ініціалізується значенням `undefined` на кожній позиції,
+// значення `v` нижче дорівнюватиме `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h3 id="Генератор_послідовності_range">Генератор послідовності (range)</h3>
+
+<pre class="brush: js">// Функція генератора послідовності (зазвичай відома як "range", напр. у Clojure, PHP та ін.)
+const range = (start, stop, step) =&gt; Array.from({ length: (stop - start) / step + 1}, (_, i) =&gt; start + (i * step));
+
+// Згенерувати числа у діапазоні 0..4
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+// Згенерувати числа у діапазоні 1..10 з кроком 2
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Згенерувати алфавіт з допомогою Array.from, користуючись тим, що він впорядкований як послідовність
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x =&gt; String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
+</pre>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Метод <code>Array.from</code> був доданий до стандарту ECMA-262 у 6-й версії (ES2015); таким чином, він може не існувати у інших реалізаціях стандарту. Ви можете обійти цю проблему, вставивши наступний код на початку ваших скриптів, що дозволить використовувати метод <code>Array.from</code> у реалізаціях, які не мають його вбудованої підтримки. Цей алгоритм саме той, що визначений у ECMA-262, у 6-й версії, за умови, що <code>Object</code> та <code>TypeError</code> мають свої первинні значення і <code>callback.call</code> дорівнює первинному значенню {{jsxref("Function.prototype.call")}}. На додаток, оскільки справжні ітерабельні об'єкти не можуть мати поліфілу, ця реалізація не підтримує загальні ітерабельні об'єкти, визначені у 6-й версії ECMA-262.</p>
+
+<pre class="brush: js">// Функціональні кроки ECMA-262, версія 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // Властивість length метода from дорівнює 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Нехай C дорівнює значенню this.
+      var C = this;
+
+      // 2. Нехай items дорівнює ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. Якщо mapfn дорівнює undefined, тоді нехай mapping дорівнює false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. інакше
+        // 5. а Якщо IsCallable(mapfn) дорівнює false, викинути виняток TypeError.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. б. Якщо надано thisArg, нехай T дорівнює thisArg; інакше нехай T дорівнює undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Нехай lenValue дорівнює Get(items, "length").
+      // 11. Нехай len дорівнює ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. Якщо IsConstructor(C) дорівнює true, тоді
+      // 13. а. Нехай A дорівнює результату виклику внутрішнього метода С [[Construct]]
+      // зі списком аргументів, що містить єдиний елемент len.
+      // 14. a. Інакше, нехай A дорівнює ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Нехай k дорівнює 0.
+      var k = 0;
+      // 17. Повторювати, доки k &lt; len… (також кроки a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Нехай putStatus дорівнює Put(A, "length", len, true).
+      A.length = len;
+      // 20. Повернути A.
+      return A;
+    };
+  }());
+}
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>