Язык JavaScript поддерживает несколько вариантов итерации информационных массивов. Кодеры используют и традиционный цикл for, и довольно редкий метод .forEach(). Наиболее распространен метод .map(). С помощью него создают массив с вызовом некоторой функции для всех его элементов, относящихся к изначальному массиву. Предложенный способ исключает мутации и генерирует действительно «чистые» массивы.
Этим он отличается от мутационных способов, неизбежно вносящих какие-либо корректировки. В данной статье мы разберем четыре способа использования .map() в языке JavaScript (хотя их существует значительно больше).
Требования к системе
Выбор технических характеристик компьютера для экспериментов в рамках материала некритичен. В плане рабочей площадки можно использовать облачный сервер. Если же планируется применять приведенные примеры на практике, установите Node.js (описание процесса – тема для отдельной статьи), сразу создайте среду разработки или загрузите расширение Chrome DevTools для браузера Google Chrome для работы в веб-интерфейсе.
Кстати, в официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать.
Итерация объектов массива JS с помощью .map()
Способ 1. Вызов функций для отдельных элементов массива
При выборе .map() функция обратного вызова в JS воспринимается одним из аргументов. Значение элемента в массиве на момент запроса во время обработки функции считается ее ключевым и обязательным параметром. Его допускается применять для модификации и создания функций.
Пример:
В результате пользователь увидит на экране следующее:
Есть возможность очистить код и упростить его:
На экран также будет выведен результат:
Выражения вида sweetArray.map(makeSweeter) позволяют сделать код удобочитаемым в сравнении с первым вариантом.
Способ 2. Конвертирование строк в массив
Используем метод .map(), принадлежащий к прототипу массива, как инструмент конвертирования строк. Мы не будет работать со строками, а применим метод .call(). Здесь следует учитывать, что в языке JavaScript любой элемент массива считается объектом. И к нему прикреплен определенный перечень методов и функций. Предложенный выше вариант открывает возможность использования контекста любого объема другим объектом.
В результате контекст .map() из строк будет скопирован в массив. Пользователь может передавать аргументы считываемого контекста и их параметры для передачи в изначальную функцию.
Рассмотрим пример:
Результат будет выведен в консоль:
В приведенном примере метод .map() использован для передачи аргументов, ожидаемых от него. Например, .split() применяют для корректировки отдельно взятых символов внутри строк перед возвратом обратно в изначальный массив.
Способ 3. Рендеринг списков в библиотеках JavaScript
Такой вариант применения часто встречается в готовых фреймворках JavaScript вроде React. Здесь понадобится синтаксис JSX, потому что метод .map() включен в него. В качестве примера покажем компонент React:
В приведенном примере компонент React выполняет визуализацию div со списком. Раздельные его элементы обрабатываются при помощи .map(), чтобы организовать итерации с учетом их имен, которые были извлечены из массива. Рендеринг осуществляется при помощи ReactDOM на элементе DOM с ld root.
Способ 4. Изменение формата объектов массива
Еще вариант применения метода .map() – итерация объектов, включенных в обрабатываемый массив, с изменением отдельно взятых элементов и последующим возвратом обратно. Процедура осуществляется аналогично классической схеме. Приведем пример:
Результат отобразится в консоли:
В приведенном примере любой объект из массива модифицируется при помощи скобок с точкой. Такой вариант применяют при обработке и конденсации пришедшей информации перед передачей в клиентской программе.
Заключение
Мы разобрали в статье 4 основных варианта использования метода .map() в языке JavaScript. Их возможности расширяют включением в код других методов. Более подробная информация имеется в официальной документации. Если есть желание глубоко изучить вопрос создания массивов объектов js с помощью map, желательно подготовить отдельную машину для экспериментов, например, арендовать мощности у Timeweb Cloud.