// Tutorial //

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

Published on October 22, 2020
Default avatar
By William Imoh
Developer and author at DigitalOcean.
Русский
Использование .map() для итерации элементов массива в JavaScript

Введение

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

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

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

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

Шаг 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)

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

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


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!