Array.from() новый массив на основе объекта

Способ создать новый заполненный массив на основе переданного объекта - это функция Array.from().

Array.from() позволяет вам создавать массивы из:

• массивоподобных объектов (имеющих свойство length)
• итерируемых объектов

Перейдем к примерам.

Из строки в массив

Каждый символ - это отдельный элемент массива

let string = 'Строка на русском языке'
Array.from(string); // Получаем массив Array(23) [ "С", "т", "р", "о", "к", "а", " ", "н", "а", " ", … ]

Коллекция NodeList в массив

Второй параметр принимает функцию которая, работает как метод map.

Имеем обычный список

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Преобразуем коллекцию в массив. Плюс мы можем модифицировать каждый элемент как нам надо с помощью второго параметра.

let list = document.querySelectorAll('li');
Array.from(list, function (li){ return li}); // Array(4) [ li, li, li, li ] // в данном случае это просто массив элементов

Объект в массив

Например, можно преобразовать кастомный с искусственным свойством lenght.

let object = {0: [1], 1: [2], length:2};
Array.from(object); //Array [ (1) […], (1) […] ] // получим полноценный массив в котором будут доступны все методы массивов

Set в массив

Множество уникальных элементов Set тоже возможно преобразовать в массив.

const set = new Set(["Россия", "Россия", "USA", 1, 3, 7, 89, "Россия"]); // Уникальные элементы
Array.from(set);  // Array(6) [ "Россия", "USA", 1, 3, 7, 89 ] // Преобразовали в массив

Map в массив

const map = new Map([[1,1],[2,2],[3,3]]);
Array.from(map); // Array(3) [ (2) […], (2) […], (2) […] ]

Генерирование массива последовательностей

Можно использовать Array.from для генерации последовательностей, например

Array.from({length: 100}, function (value, index){return index}); // Array(100) [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, … ] // Сгенерировали массив из 100 элементов

Пример 4.1

В примере 4.1 все случаи рассмотренные выше

Открыть пример 4.1 в новой вкладке

Итог

• Array.from создан чтобы облегчить преобразование массивоподобного объекта в массив, что удобно

Содержание