Введение
В 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: методы итерации.