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

Development, Java | Amber | Комментировать запись

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

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

Требования

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

• Чтобы установить Node.js локально, вы можете следовать одному из наших мануалов (для macOS, Ubuntu 20.04, Debian 10, CentOS 8).
• Чтобы получить доступ к инструментам разработчика Chrome DevTools, загрузите и установите последнюю версию Google Chrome.

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

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

Вот пример:

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

В консоли появится такой вывод:

[ 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);

И в консоли появится тот же вывод:

[ 4, 6, 8, 10, 70 ]

Метод sweetArray.map(makeSweeter) делает ваш код более чистым и читаемым.

2: Преобразование строки в массив

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

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

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

Вот пример:

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

Вы получите такой вывод:

["8a", "ha", "oa", "sa", "ta"]

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

Этот механизм работает подобно строковому методу .split(), только каждый отдельный строковый символ можно изменить перед помещением его в массив.

3: Отображение списков в библиотеках JavaScript

Библиотеки JavaScript, такие как React, используют метод .map() для отображения элементов в списке. Однако для этого требуется синтаксис 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);

Это stateless компонент (без сохранения состояния) React, который отображает div как список. Отдельные элементы списка отображаются с помощью метода .map(), который помогает перебрать исходный массив имен. Этот компонент отображается с помощью ReactDOM в элементе DOM с идентификатором root.

4: Переформатирование объектов массива

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

Вот пример:

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}
]

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

Заключение

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

Читайте также: Методы массивов в JavaScript: методы итерации