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

Введение

В JavaScript существует много разных способов и методик итерации массивов данных, от классического цикла for до метода forEach(). Метод .map() — один из самых популярных методов. Метод .map() создает массив, вызывая определенную функцию для каждого элемента родительского массива. Метод .map() не использует мутацию и создает новый массив, в отличие от мутационных методов, которые вносят изменения в вызывающий массив.

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

Предварительные требования

Для этого учебного модуля не потребуется писать код, но если вы захотите попробовать приведенные примеры, вы можете использовать Node.js REPL или инструменты для разработчика в браузере.

• Для локальной установки Node.js следуйте процедуре, описанной в документе Установка Node.js и создание локальной среды разработки.

• Инструменты Chrome DevTools можно получить, загрузив и установив последнюю версию Google Chrome.

Шаг 1 — Вызов функции для каждого элемента массива

Метод .map() принимает функцию обратного вызова как один из аргументов, и текущее значение обрабатываемого функцией элемента является важным параметром этой функции. Это обязательный параметр. С этим параметром вы можете модифицировать каждый элемент массива и создать новую функцию.

Приведем пример:

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

console.log(sweeterArray)

Вывод регистрируется в консоли:

Output
[ 4, 6, 8, 10, 70 ]

Это можно упростить еще больше для очистки кода:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

Этот же вывод регистрируется в консоли:

Output
[ 4, 6, 8, 10, 70 ]

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

Шаг 2 — Конвертация строки в массив

Метод .map() принадлежит к прототипу массива. На этом шаге мы используем его для конвертации строки в массив. Здесь мы не разрабатываем метод для работы со строками. Вместо этого мы используем специальный метод .call().

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

Методу .call() можно передавать аргументы используемого контекста и параметры для аргументов первоначальной функции.

Приведем пример:

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

Вывод регистрируется в консоли:

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

Здесь мы использовали контекст метода .map() на строке и им передается аргумент функции, который ожидается от метода .map().

Такие функции как метод .split() строки, позволяют изменять только отдельные символы в строках, прежде чем возвращать их в массив.

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

Библиотеки JavaScript, такие как React, используют метод .map() для рендеринга элементов в списках. Однако для этого требуется синтаксис JSX, поскольку метод .map() заключен в синтаксис JSX.

Приведем пример компонента 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 с Id 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);

Вывод регистрируется в консоли:

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

Здесь мы модифицировали каждый объект массива, используя нотацию со скобками и точкой. Эта модель использования может применяться для обработки или конденсации полученных данных перед их сохранением или анализом в клиентском приложении.

Заключение

В этом учебном модуле мы рассмотрели четыре модели использования метода .map() в JavaScript. В сочетании с другими методами функционал метода .map() можно расширить. Дополнительную информацию можно найти в статье Использование методов массива в JavaScript: методы итерации.