path: root/files/uk/web/javascript/reference/global_objects/array/from/index.html

---
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>