Использование .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: методы итерации.