Полное руководство по Array.from() в JavaScript

Aladdin

Полное руководство по Array.from() в JavaScript

Array.from() является одним из самых универсальных и мощных методов для работы с массивами в JavaScript, добавленный в стандарт ECMAScript 2015 (ES6). Этот статический метод создаёт новый экземпляр массива из итерируемых или массивоподобных объектов, предоставляя элегантное решение для множества задач обработки данных.

Синтаксис и параметры

Базовый синтаксис:

Array.from(arrayLike, mapFunction, thisArg)

Метод принимает три параметра: обязательный arrayLike объект для преобразования, опциональную функцию mapFunction для обработки элементов и опциональный thisArg для контекста выполнения.^1

Основные возможности и применения

Преобразование строк в массивы

Array.from() отлично работает со строками, включая полную поддержку Unicode символов:

Array.from("Hello");     // ['H', 'e', 'l', 'l', 'o']
Array.from("I💖U");      // ['I', '💖', 'U'] - корректно обрабатывает эмодзи

Работа с Set и Map

Один из популярнейших случаев использования — удаление дубликатов из массива через преобразование Set:

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

Для Map объектов метод позволяет извлекать ключи, значения или пары ключ-значение:^2

const myMap = new Map([['a', 1], ['b', 2]]);
Array.from(myMap);         // [['a', 1], ['b', 2]]
Array.from(myMap.keys());  // ['a', 'b']
Array.from(myMap.values()); // [1, 2]

DOM-коллекции и NodeList

Array.from() незаменим при работе с DOM, превращая NodeList в полноценные массивы с доступом ко всем методам массивов:

const divs = document.querySelectorAll('div');
const divArray = Array.from(divs);

// Извлечение атрибутов с помощью mapper функции
const imageSources = Array.from(
    document.querySelectorAll('img'),
    img => img.src
);

Генерация последовательностей и диапазонов

Особенно мощная возможность — создание массивов с заданными параметрами:^3

// Массив индексов
Array.from({length: 5}, (_, index) => index); // [0, 1, 2, 3, 4]

// Диапазон чисел
const range = (start, stop, step = 1) =>
    Array.from(
        { length: (stop - start) / step + 1 },
        (_, index) => start + index * step
    );

range(1, 5);    // [1, 2, 3, 4, 5]
range(2, 8, 2); // [2, 4, 6, 8]

Работа с TypedArray

Array.from() эффективно преобразует типизированные массивы в обычные:

const float32 = new Float32Array([1.1, 2.2, 3.3]);
const regularArray = Array.from(float32); // [1.1, 2.2, 3.3]

Анализ производительности

Сравнение с альтернативными методами

Исследования показывают различную производительность в зависимости от размера данных и типа операции:^4

Для малых массивов (< 1000 элементов):

Spread оператор быстрее на 15-20%
Array.from() показывает сопоставимые результаты

Для больших массивов (> 10000 элементов):

Разница в производительности минимальна
Цикл for остается самым быстрым для генерации последовательностей

Использование памяти:

Array.from(): базовая линия (1.0x)
Spread оператор: 1.15x памяти
Ручной цикл for: 0.85x памяти

Когда использовать Array.from()

Array.from() предпочтителен когда:^5

Работаете с массивоподобными объектами без Symbol.iterator
Нужна встроенная функция mapping
Приоритет — читаемость и функциональный стиль кода
Требуется совместимость с различными типами входных данных

Поддержка браузерами и совместимость

Метод поддерживается всеми современными браузерами начиная с 2016-2017 года:^7

Chrome 51+ (май 2016)
Firefox 54+ (июнь 2017)
Safari 10+ (сентябрь 2016)
Edge 15+ (апрель 2017)
Internet Explorer: НЕ поддерживается

Для старых браузеров доступны полифиллы, которые обеспечивают полную функциональность метода.^8

Продвинутые техники

Использование с callback функциями

Параметр thisArg позволяет контролировать контекст выполнения mapper функции:^10

const processor = {
    multiplier: 2,
    process(x) { return x * this.multiplier; }
};

Array.from([1, 2, 3], processor.process, processor); // [2, 4, 6]

Создание многомерных структур

// Двумерный массив
const matrix = Array.from({length: 3}, () => 
    Array.from({length: 3}, () => 0)
);
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

Рекомендации по использованию

Выбирайте Array.from() когда:

Работаете с массивоподобными объектами (NodeList, arguments)
Нужно одновременно преобразовать и обработать данные
Приоритет — читаемость и декларативность кода
Требуется совместимость с различными источниками данных

Используйте альтернативы когда:

Критична максимальная производительность для больших объёмов данных
Работаете только с итерируемыми объектами (используйте spread оператор)
Нужно просто скопировать существующий массив

Array.from() остается одним из самых элегантных и функциональных инструментов современного JavaScript для работы с коллекциями данных, обеспечивая баланс между производительностью, читаемостью и универсальностью применения.

⁂

kirilljsx

Интересно, особенно про многомерные структуры. Вот где они пригодились?

А вообще удобно кстати, можно через аргумент в N передавать уже какие-то данные и строить так массив.

Array.from({length: N}, () => value)

Как по мне тема массивов вообще одна из самых интересных, так что давай больше про массивы.
Хотелось бы что-то не ординарное))