Функция map() в JavaScript — это часть одноименного метода «map». Функция map()
представляется для каждого элемента массива отдельно один раз для сортировки и
выборки необходимого нам значения. Поэтому она от всех элементов массива
возвращает нужный нам аргумент и формирует из всех полученных аргументов
новый массив.
Функция map() в JavaScript
Метод «map» в JavaScript не изменяет сам массив, для которого он применяется. Его
цель только «выбрать» из массива необходимые нам данные. Иногда бывает так,
что в момент выполнения функции map(), происходят изменения данных в
обрабатываемом массиве. В этом случае, функция map() соберет те данные,
которые были у элементов массива в момент ее «прохождения» массиву.
Если элемент массива удалили до их посещения функцией, то такой элемент не
будет посещен.
Метод «map» в JavaScript поддерживается всеми современными браузерами,
поэтому его смело можно использовать в своих целях
Пример, JS
Давайте представим, что у вас есть какой-то массив с большим количеством
объектов. Каждый отдельный объект — это человек с его собственными данными:
- имя,
- фамилия,
- отчество
- пол,
- адрес,
- возраст,
- рост,
- вес,
- цвет волос,
- цвет глаз,
- наличие семьи,
- образование,
- любимый фильм,
- любимая книга,
- и др.
Но вас абсолютно не интересуют все эти данные, так как вам из всего этого
«обилия» нужен только номер паспорта людей, для того чтобы разослать им
индивидуальные купоны со скидкой в 80% на покупки в вашем интернет-магазине.
У вас есть примерно такой массив с данными:
const clients = [
{ passport: ‘00000001’, name: ‘Булгаков Михаил Афанасьевич’, age: 43, sex:
‘m’ },
{ passport: ‘00000002’, name: ‘Толстой Лев Николаевич’, age: 45, sex: ‘m’ },
{ passport: ‘00000003’, name: ‘Достоевский Федор Михайлович’, age: 37,
sex: ‘m’ },
{ passport: ‘00000004’, name: ‘Гоголь Николай Васильевич’, age: 42, sex: ‘m’
},
{ passport: ‘00000005’, name: ‘Ахматова Анна Андреевна’, age: 29, sex: ‘f’ },
{ passport: ‘00000006’, name: ‘Толстой Алексей Николаевич’, age: 41, sex:
‘m’ },
]
Вам из массива нужно получить номер паспорта. Язык программирования JavaScript
предлагает несколько решений этой задачи. Но нас интересует именно
использование функции map() в JS. Для этого нужно применить простой скрипт:
const passports = clients.map(function(client) {
return client.passport;
});
// Поклонники стрелочных функций могут взять на заметку стрелочное исполнение
map()
const passports = clients.map(client => client.passport);
Работает это просто: мы вызываем возвратную функцию map(), которая
последовательно «прочесывает» каждый элемент массива и возвращает нам
паспортные данные, из которых формируется новый массив. Все,мы можем
отправлять клиентам скидки!
Возможно вам будет интереесно почитать статью “Что такое Webpack?”
Заключение
Функция map() в JS призвана упростить работу с массивами. Помимо нее у
JavaScript есть и другие методы сортировки массивов. Поэтому, если вам показался
сложным метод «map» в JavaScript, то можете попробовать методы:
- «forEach»;
- «filter»;
- «reduce».
Подробнее о каждом из них мы поговорим в следующих наших статьях.
