Эффективное преобразование HTMLCollection в Array в JS

Быстрый ответ

Чтобы преобразовать HTMLCollection в массив и применить все возможности функционала массивов, используйте оператор расширения (...). Вот как вы можете это реализовать:

const космосВКоробке = [...document.getElementsByClassName('galaxy')];
// -> Мы уместили вселенную в коробке-массив. Таносу есть чему позавидовать!

HTMLCollection и массив: почему и когда стоит преобразовывать

Несмотря на то, что HTMLCollections автоматически обновляется при изменении DOM, они ограничены в функциональности по сравнению с массивами. Чтобы использовать мощные методы массивов, такие как map(), filter(), reduce(), необходимо преобразовать HTMLCollection в массив.

Современные преобразователи ES6 против классических подходов

ECMAScript 2015 (ES6) включает удобные инструменты для преобразования коллекций в массивы: оператор распространения (...), метод Array.from(), и проверенный временем метод Array.prototype.slice.call.

• Оператор распространения (...): Преобразует "псевдомассивы", такие как HTMLCollection и итерируемые объекты (например, NodeList), в массивы.
• Array.from(): Этот метод позволяет прямолинейно превратить коллекцию в массив, дополнительно предоставляя возможность применения функции к каждому элементу.

Примеры преобразования

Современный подход с Array.from()

Метод Array.from() — прекрасное решение для преобразования, к тому же он позволяет трансформировать элементы "на лету".

const текстыСсылок = Array.from(document.links, link => link.textContent);
// -> мы собираем тексты всех ссылок, словно магический коллектор

Подробнее об этом расскажет наш спикер на видео

Классический метод: slice.call()

Метод Array.prototype.slice.call — старый, проверенный временем подход, который поддерживается практически всеми браузерами.

const массивИзображений = [].slice.call(document.images);
// -> словно кот, помягче подкрадываемся и уносим картинки со страницы

Скорость преобразования

Скорость преобразования редко становится решающим фактором. Разница в производительности обычно не значительна для небольших и средних коллекций. Важнее читаемость кода и дополнительные возможности, такие как у Array.from().

Визуализация

Представьте, что вы хотите сжать огромную коллекцию комиксов (HTMLCollection) в небольшую коробку (массив). Используйте .slice() или Array.from(), чтобы воплотить это в жизнь.

📚 HTMLCollection: [Железный Человек, Халк, Тор, Капитан Америка]

Теперь перенесите их в коробку-массив:

Array.from(document.getElementsByClassName('marvel-comics')); // 📚→📦
// ИЛИ
[].slice.call(document.getElementsByClassName('marvel-comics')); // 📚→📦

И вот она, коробка-массив:

📦 Массив: [Железный Человек, Халк, Тор, Капитан Америка]

Теперь ваши любимые марвеловские герои помещаются в карман! 🚀

Хорошие практики преобразования

Оператор распространения для простоты и читаемости

Оператор расширения (...) заслужило признание из-за его простоты и читабельности, он позволяет легко преобразовать коллекцию в массив.

const массивМарвел = [...document.getElementsByClassName('marvel-comics')];
// -> эффективно переносим все комиксы в массив

Продумаваем будущее кода

При использовании элементов ECMAScript 6, таких как Array.from() и оператор расширения, убедитесь, что есть решения для обеспечения обратной совместимости в старых средах.

Отказываемся от громоздких циклов for

Стремитесь минимизировать использование циклов for или while для преобразований, так как они могут привести к ошибкам, менее читаемы и как правило медленнее современных методов.

Выбираем решение, соответствующее задаче

Выбор метода должен основываться на конкретной задаче. Если требуется трансформировать элементы в процессе преобразования, лучше использовать Array.from() с функцией.

Какой метод преобразования выбрать? Рекомендации

Для быстрого преобразования

Оператор расширения (...) хорош для быстрого и аккуратного преобразования, когда не требуется дополнительной обработки.

Для обработки элементов "на лету"

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

Когда важна совместимость

Если вы работаете со старыми браузерами или большими кодовыми базами, то обратите внимание на метод Array.prototype.slice.call с его широкой поддержкой.

Полезные материалы

1. HTMLCollection – Веб-API | MDN: Получите полную информацию о HTMLCollection.
2. Array.from() – JavaScript | MDN: Инструкция по использванию метода Array.from для преобразования коллекций.
3. Методы массива: Обзор и практика различных операций с массивами.
4. Коллекции DOM в JavaScript: Подробное руководство по преобразованию HTMLCollection в массив.
5. ECMAScript 6: Новые возможности: Обзор и сравнение: Детали о синтаксисе оператора распространения и других нововведениях в ES6.
6. 18. Новые возможности массивов в ES6: Изучите новые методы работы с массивами в ES6.
7. Могу ли я использовать... Таблицы поддержки HTML5, CSS3 и т.д.: Обзор доступности Array.prototype.slice в различных браузерах и платформах.