Итерация элементов массива JavaScript с помощью .map()

Язык JavaScript поддерживает несколько вариантов итерации информационных массивов. Кодеры используют и традиционный цикл for, и довольно редкий метод .forEach(). Наиболее распространен метод .map(). С помощью него создают массив с вызовом некоторой функции для всех его элементов, относящихся к изначальному массиву. Предложенный способ исключает мутации и генерирует действительно «чистые» массивы.

Этим он отличается от мутационных способов, неизбежно вносящих какие-либо корректировки. В данной статье мы разберем четыре способа использования .map() в языке JavaScript (хотя их существует значительно больше).

Требования к системе

Выбор технических характеристик компьютера для экспериментов в рамках материала некритичен. В плане рабочей площадки можно использовать облачный сервер. Если же планируется применять приведенные примеры на практике, установите Node.js (описание процесса – тема для отдельной статьи), сразу создайте среду разработки или загрузите расширение Chrome DevTools для браузера Google Chrome для работы в веб-интерфейсе.

Кстати, в официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать. 

Итерация объектов массива JS с помощью .map()

Способ 1. Вызов функций для отдельных элементов массива

При выборе .map() функция обратного вызова в JS воспринимается одним из аргументов. Значение элемента в массиве на момент запроса во время обработки функции считается ее ключевым и обязательным параметром. Его допускается применять для модификации и создания функций.

Пример:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})
console.log(sweeterArray)

В результате пользователь увидит на экране следующее:

[ 4, 6, 8, 10, 70 ]

Есть возможность очистить код и упростить его:

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [2, 3, 4, 5, 35];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

На экран также будет выведен результат:

[ 4, 6, 8, 10, 70 ]

Выражения вида sweetArray.map(makeSweeter) позволяют сделать код удобочитаемым в сравнении с первым вариантом.

Способ 2. Конвертирование строк в массив

Используем метод .map(), принадлежащий к прототипу массива, как инструмент конвертирования строк. Мы не будет работать со строками, а применим метод .call(). Здесь следует учитывать, что в языке JavaScript любой элемент массива считается объектом. И к нему прикреплен определенный перечень методов и функций. Предложенный выше вариант открывает возможность использования контекста любого объема другим объектом.

В результате контекст .map() из строк будет скопирован в массив. Пользователь может передавать аргументы считываемого контекста и их параметры для передачи в изначальную функцию.

Рассмотрим пример:

const name = "Sammy"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})
console.log(newName)

Результат будет выведен в консоль:

[ "Sa", "aa", "ma", "ma", "ya" ]

В приведенном примере метод .map() использован для передачи аргументов, ожидаемых от него. Например, .split() применяют для корректировки отдельно взятых символов внутри строк перед возвратом обратно в изначальный массив.

Способ 3. Рендеринг списков в библиотеках JavaScript

Такой вариант применения часто встречается в готовых фреймворках JavaScript вроде React. Здесь понадобится синтаксис JSX, потому что метод .map() включен в него. В качестве примера покажем компонент React:

import React from "react";
import ReactDOM from "react-dom";
const names = ["whale", "squid", "turtle", "coral", "starfish"];
const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

В приведенном примере компонент React выполняет визуализацию div со списком. Раздельные его элементы обрабатываются при помощи .map(), чтобы организовать итерации с учетом их имен, которые были извлечены из массива. Рендеринг осуществляется при помощи ReactDOM на элементе DOM с ld root.

Способ 4. Изменение формата объектов массива

Еще вариант применения метода .map() – итерация объектов, включенных в обрабатываемый массив, с изменением отдельно взятых элементов и последующим возвратом обратно. Процедура осуществляется аналогично классической схеме. Приведем пример:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.age = item.name.length * 10;
    return container;
})
console.log(usersByLikes);

Результат отобразится в консоли:

[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

В приведенном примере любой объект из массива модифицируется при помощи скобок с точкой. Такой вариант применяют при обработке и конденсации пришедшей информации перед передачей в клиентской программе.

Заключение

Мы разобрали в статье 4 основных варианта использования метода .map() в языке JavaScript. Их возможности расширяют включением в код других методов. Более подробная информация имеется в официальной документации. Если есть желание глубоко изучить вопрос создания массивов объектов js с помощью map, желательно подготовить отдельную машину для экспериментов, например, арендовать мощности у Timeweb Cloud.