От автора: от классического forloop до метода forEach() — JavaScript изобилует различными методами, используемыми для итерации набора данных. Однако одним из наиболее популярных является метод JavaScript Array map().
.map() создает массив для вызова определенной функции для каждого элемента в родительском массиве. .map() является не изменяющим методом в том смысле, что он создает новый массив, в отличие от методов, которые вносят изменения в вызывающий массив.
В этом посте мы рассмотрим 4 случая использования .map() в JavaScript. Давай начнем!
Вызов функции для каждого элемента в массиве
.map(), как было сказано, принимает функцию обратного вызова в качестве одного из своих аргументов, и важным параметром этой функции является текущее значение обрабатываемого функцией элемента. Это обязательный параметр. С помощью этого параметра мы можем изменить каждый отдельный элемент в массиве и создать новую функцию. Вот пример:
const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => { return sweetItem * 2
}) console.log(sweeterArray) // [4, 6, 8, 10, 70]Мы можем еще упростить этот код, чтобы сделать его более чистым:
// создаем функцию для использования const makeSweeter = sweetItem => sweetItem * 2; // у нас есть массив const sweetArray = [2, 3, 4, 5, 35]; // вызываем функцию, которую мы создали. более читаемо const sweeterArray = sweetArray.map(makeSweeter); console.log(sweeterArray); // [4, 6, 8, 10, 70]
Наличие такого кода, как sweetArray.map(makeSweeter), делает это более читаемым.
Преобразование строки в массив
Известно, что .map() принадлежит прототипу Array. Как насчет того, чтобы мы использовали его для преобразования строки в массив. Не волнуйтесь, мы не будем разрабатывать с нуля метод для работы со строками, а используем специальный метод .call().
Все в JavaScript является объектами, а методы — это просто функции, связанные с этими объектами. .call() позволяет нам использовать контекст одного объекта для другого. Поэтому мы будем копировать контекст .map() в массив из строки.
В .call() могут передаваться аргументы: используемый контекст и «параметры для аргументов исходной функции». Похоже на бред? Вот пример.
const name = "Chuloo"
const map = Array.prototype.map const newName = map.call(name, eachLetter => { return `${eachLetter}a`
}) console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]Здесь мы просто использовали контекст .map() в String и передали аргумент функции, которую ожидает функция .map(). Вуаля! У нас в консоли есть нужные символы. Отлично!
Это работает как метод .split() для String только каждый отдельный символ строки может быть изменен перед возвратом в массив.
Отображение списков в библиотеках JavaScript
Библиотеки JavaScript, такие как React, используют .map() для рендеринга элементов в списке. Для этого требуется синтаксис JSX, однако метод .map() обернут в mustache-подобный синтаксис JSX. Вот характерный пример компонента React.
import React from "react";
import ReactDOM from "react-dom"; const names = ["john", "sean", "mike", "jean", "chris"]; const NamesList = () => ( <div> <ul>{names.map(name => <li key={name}> {name} </li>)}</ul> </div>
); const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);Вы не знакомы с React? Это простой элемент React без состояния, который отображает div со списком. Отдельные элементы списка отображаются с использованием .map() для перебора массива изначально созданных имен. Этот компонент визуализируется с использованием ReactDOM в элементе DOM с идентификатором root.
Переформатирование объектов массива
Как работать с объектами в массиве? .map() может использоваться для перебора объектов в массиве — схожим с обычными массивами способом, *изменяет содержимое каждого отдельного объекта* и возвращает новый массив. Это изменение выполняется на основе того, что возвращается в функции обратного вызова. Вот пример:
const myUsers = [ { name: 'chuloo', likes: 'grilled chicken' }, { name: 'chris', likes: 'cold beer' }, { name: 'sam', likes: 'fish biscuits' }
] const usersByFood = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.age = item.name.length * 10; return container;
}) console.log(usersByFood);
// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}]Все, что мы сделали, это просто изменили каждый объект в массиве с помощью нотации скобки и точки. Этот вариант может использоваться для обработки или уплотнения полученных данных перед сохранением или анализом во внешнем приложении.
Заключение
В этом посте мы рассмотрели основные случаи применения метода .map() в JavaScript. Следует отметить, что в сочетании с другими методами функционал .map() может быть расширен. Попробуйте найти другие случаи использования. Оставьте свои комментарии, вопросы и отзывы в разделе комментариев!
Автор: William Imoh
Источник: https://scotch.io/
Редакция: Команда webformyself.