Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод Array.from()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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]`, а не порожній масив.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати574 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.