Введение
От классического цикла for до метода forEach(), существуют различные техники и методы итерации по набору данных в JavaScript. Одним из самых популярных методов является метод .map(). .map() создаёт массив, вызывая определённую функцию для каждого элемента родительского массива. .map() — это немутирующий метод, создающий новый массив JS, в отличие от мутирующих методов, которые вносят изменения только в вызывающий массив. Этот метод может иметь множество применений при работе с массивами. В этом руководстве вы увидите четыре важных применения .map() в JavaScript: вызов функции из элементов массива, преобразование строк в массивы, рендеринг списков в библиотеках JavaScript и переформатирование объектов массива.
Предпосылки
Для этого урока не требуется писать код, но если вы хотите разобраться с примерами, вы можете использовать Node.js REPL или инструменты разработчика в браузере.
Как вызвать функцию JS для каждого элемента массива
.Функция .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) делает ваш код немного более читабельным.
Как преобразовать строку JS в массив
Метод 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() строки, за исключением того, что каждый отдельный символ строки может быть изменен перед возвратом в массив.
Как отображать списки в библиотеках 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 с корневым идентификатором.
Как переформатировать объекты массива JavaScript
Функция .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() может быть расширена.
