Array.from() - метод для создания массива из итерируемых значений в JavaScript

Array.from() создаёт новый массив из итерируемого значения или объекта, похожего на массив.

На практике этот метод часто используют, когда нужно превратить строку, Set, NodeList или объект с length в обычный массив.

Синтаксис

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

Первый аргумент - это источник данных.

Второй аргумент необязательный. Это функция преобразования, которая применяется к каждому элементу во время создания массива.

Что делает Array.from()

Метод берёт подходящее значение и возвращает новый массив.

console.log(Array.from("JS")); // ["J", "S"]
console.log(Array.from([1, 2, 3])); // [1, 2, 3]

Исходное значение при этом не меняется.

Строка в массив

Один из самых понятных примеров - превратить строку в массив символов.

const letters = Array.from("hello");

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

Это часто читается понятнее, чем split("").

Set в массив

Set не является массивом, но Array.from() умеет с ним работать.

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

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

Это удобный способ получить обычный массив из коллекции.

Объект, похожий на массив

Array.from() умеет работать не только с итерируемыми значениями, но и с объектами, у которых есть length и элементы по индексам.

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};

console.log(Array.from(arrayLike)); // ["a", "b"]

Такие объекты часто называют array-like, то есть “похожими на массив”.

Создание массива по длине

Через Array.from() удобно создавать массив нужной длины без пустых слотов.

const result = Array.from({ length: 3 });

console.log(result); // [undefined, undefined, undefined]

Это отличается от Array(3):

console.log(Array(3)); // [ <3 empty items> ]

У Array.from({ length: 3 }) элементы реально существуют, поэтому с таким массивом удобнее сразу работать через map().

Array.from() с map-функцией

Вторым аргументом можно передать функцию преобразования.

const numbers = Array.from({ length: 5 }, (_, index) => index + 1);

console.log(numbers); // [1, 2, 3, 4, 5]

Это один из самых популярных сценариев использования метода.

Ещё пример:

const doubled = Array.from([1, 2, 3], (value) => value * 2);

console.log(doubled); // [2, 4, 6]

Array.from() и […value]

Иногда тот же результат можно получить через spread:

const result = [..."hello"];

Но Array.from() удобнее в двух случаях:

когда нужно работать с array-like объектом
когда сразу нужна map-функция

Пример:

const numbers = Array.from({ length: 3 }, (_, i) => i);

console.log(numbers); // [0, 1, 2]

Через spread такой код уже не написать так же просто.

Когда это полезно

Array.from() удобно использовать, когда:

нужно превратить строку, Set или другую коллекцию в массив
нужно создать массив по длине
хочется сразу преобразовать элементы через map-функцию

Частые ошибки

Считать, что это метод массива

const arr = [1, 2, 3];

// arr.from(); // Ошибка

Array.from() - это статический метод Array, а не метод экземпляра массива.

Передавать обычный объект без length

console.log(Array.from({ a: 1, b: 2 })); // []

Обычный объект сам по себе не является ни итерируемым, ни array-like объектом.

Путать с Array()

console.log(Array.from({ length: 3 })); // [undefined, undefined, undefined]
console.log(Array(3)); // [ <3 empty items> ]

На вид результат похож, но поведение у этих массивов разное.

Быстрая памятка

Array.from() создаёт массив из итерируемого или array-like значения
метод умеет работать со строками, Set и объектами с length
вторым аргументом можно сразу передать функцию преобразования
Array.from({ length: 3 }) создаёт массив с undefined, а не пустыми слотами
Array.from() - это статический метод Array

Коротко

Array.from() - это удобный способ получить обычный массив из строки, Set или похожего объекта. Особенно полезен он тогда, когда нужно не просто создать массив, а сразу наполнить или преобразовать его элементы.