Поиск по сайту:

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

Введение

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

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

Предпосылки

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

  • Чтобы установить Node.js локально, выполните действия, описанные в разделе Как установить Node.js и создать локальную среду разработки.
  • Гугл Хром.

Шаг 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 является контекстом одного объекта для другого. Следовательно, вы копируете контекст .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 похожи на синтаксис 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() для перебора массива names. Этот компонент визуализируется с помощью 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: методы итерации».