Вернуться




Метод Map в JavaScript. Описание для новичков и сфера применения



Функция map() в JavaScript — это часть одноименного метода «map». Функция map() представляется для каждого элемента массива отдельно один раз для сортировки и выборки необходимого нам значения. Поэтому она от всех элементов массива возвращает нужный нам аргумент и формирует из всех полученных аргументов новый массив.

 

Функция map() в JavaScript

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

Если элемент массива удалили до их посещения функцией, то такой элемент не будет посещен.

Метод «map» в JavaScript поддерживается всеми современными браузерами, поэтому его смело можно использовать в своих целях.

 

Пример, как используется функция map() в 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(), которая последовательно «прочесывает» каждый элемент массива и возвращает нам паспортные данные, из которых формируется новый массив. Все, мы можем отправлять клиентам скидки!

 

Заключение

Функция map() в JS призвана упростить работу с массивами. Помимо нее, у JavaScript есть и другие методы сортировки массивов. Поэтому если вам показался сложным метод «map» в JavaScript, то можете попробовать методы:

  • «forEach»;

  • «filter»;

  • «reduce».

Подробнее о каждом из них мы поговорим в следующих наших статьях.



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Учебный курс по React, часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Представляем вашему вниманию первое занятие учебного курса по React для нач ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 2: функциональные компоненты

Учебный курс по React, часть 2: функциональные компоненты

 Cегодня мы представляем вашему внимание продолжение курса. Здесь мы погово ...

21 Февраля 2021    JavaScript

Учебный курс по React, часть 3: файлы компонентов, структура проектов

Учебный курс по React, часть 3: файлы компонентов, структура проектов

В этом материале мы поговорим о файлах компонентов и о структуре React-прое ...

21 Февраля 2021    JavaScript



Напишем