Метод Array.from()

JavaScriptJunior~2 хв читання

Array.from(), це універсальний спосіб створити новий масив з ітерованого об'єкта (рядок, Set, Map) або з масивоподібного (arguments, NodeList). Додатково він дозволяє перетворити елементи «на льоту», просто під час створення масиву.

Теорія

TL;DR

Array.from() створює справжній масив з ітерованого або масивоподібного значення.
Сигнатура: Array.from(arrayLike, mapFn, thisArg).
mapFn перетворює кожен елемент одразу під час створення, як вбудований map().
Об'єкт { length: n } дає готовий масив потрібної довжини, зручно для послідовностей.
Метод повертає новий масив і не змінює вихідний об'єкт.
Якщо значення не ітероване і не має length, результатом буде помилка або порожній масив.

Швидкий приклад

javascript

const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]

Синтаксис

javascript

Array.from(arrayLike, mapFn, thisArg);

Параметр	Опис
`arrayLike`	Ітерований або масивоподібний об'єкт (рядок, `Set`, `Map`, `arguments`, `NodeList` тощо)
`mapFn` (необов'язковий)	Функція перетворення кожного елемента
`thisArg` (необов'язковий)	Контекст `this` для `mapFn`

Приклади використання

1. З рядка в масив символів

javascript

const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]

2. З множини Set

javascript

const set = new Set([1, 2, 3]);
const arr = Array.from(set);

console.log(arr); // [1, 2, 3]

3. З масивоподібного arguments

javascript

function example() {
  const args = Array.from(arguments);
  console.log(args); // [10, 20, 30]
}
example(10, 20, 30);

arguments не є справжнім масивом і не має методів на кшталт map() чи filter(), але Array.from() робить з нього звичайний масив.

4. З перетворенням елементів через mapFn

javascript

const arr = Array.from([1, 2, 3], x => x * 2);
console.log(arr); // [2, 4, 6]

Це аналог map(), вбудований прямо у створення масиву, тож проміжний масив не створюється.

5. З об'єкта з length, створення масиву за довжиною

javascript

const arr = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(arr); // [1, 2, 3, 4, 5]

Дуже зручно для генерації числових послідовностей: на відміну від new Array(5), тут отримуємо масив без «дірок».

Що важливо пам'ятати

Повертає новий масив.
Не змінює вихідний об'єкт.
Якщо arrayLike не ітерований і не має властивості length, буде помилка або порожній результат.

Порівняння зі схожими способами

Метод	Що робить
`Array.of(1, 2, 3)`	Створює масив зі своїх аргументів
`Array.from('abc')`	Створює масив з ітерованого або масивоподібного об'єкта
`[...iterable]`	Копіює ітерований об'єкт, але без функції перетворення

Коротко про сам метод:

Питання	Відповідь
Що робить	Створює масив з ітерованого або масивоподібного об'єкта
Що повертає	Новий масив
Чи змінює оригінал	Ні
Чи є функція перетворення	Так, другим аргументом
Приклад	`Array.from('hi')` дає `["h", "i"]`

Головна практична різниця зі spread: [...value] працює тільки з ітерованими значеннями, тому [...{ length: 3 }] кине помилку, а Array.from({ length: 3 }) поверне [undefined, undefined, undefined].

Типові помилки

Очікувати, що Array.from() змінить вихідний об'єкт: він завжди повертає новий масив.
Розкладати через spread масивоподібний об'єкт без Symbol.iterator, наприклад { length: 3 }, і отримувати TypeError.
Писати Array.from(arr).map(fn) замість коротшого Array.from(arr, fn).
Плутати Array.from(5) і Array.of(5): перший поверне [], бо число не ітероване, другий дасть [5].
Забувати, що Array.from({ length: 3 }) дає [undefined, undefined, undefined], а не порожній масив.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.