Array.map() в JavaScript

Итак, ты начал изучать метод map массива и хочешь узнать, как он работает на самом деле?

Сегодня для тебя я подготовил три примера и дополнительный бонусный пример, который поможет тебе понять, как можно переписать map.

Давай начнем!

Параметры метода map

Прежде всего, давай посмотрим, что принимает метод map. Из документации MDN мы можем увидеть следующее:

Метод map принимает функцию, которой метод должен обработать каждый элемент массива. То есть каждый элемент массива, у которого был вызван метод map, передастся в функцию, а полученный из функции результат будет собран в другой массив и будет выдан в качестве результата.
Функция, которая передается в метод map имеет первый параметр element, который будет принимать элементы нашего массива, второй параметр index, который представлять индекс текущего элемента и, наконец, параметр array, который содержит весь массив, у которого был вызван метод.

Оригинальный пример

Мы собираемся сделать функцию map из массива чисел, увеличивая каждое значение на единицу, ниже приведен пример исходной map:

Идея псевдокода

Идея map заключается в том, что для каждого значения x возвращается значение f(x), где f() - наша функция отображения. Давай начнем с альтернативного варианта:

Альтернативный вариант!

Итак, для первой альтернативы мы можем использовать цикл for ... in, чтобы перебрать все элементы массива и использовать функцию инкремента для возврата увеличенного значения.

Как ты видишь, нам нужно передать массив данных в качестве аргумента нашей пользовательской функции map, это нормально, потому что расширение нативных объектов обычно считается плохой практикой в работе.

Альтернатива вторая!

Если ты считаешь, что пять строк для альтернативной map - это слишком много, у меня есть для тебя другое решение, на этот раз с использованием forEach. Давай посмотрим:

В данном случае с помощью всего трех строк мы создали полностью рабочую альтернативную map! Но мы можем сделать и больше. Может быть, в одну строку?

Альтернатива третья!

Это самая крутая альтернатива. С помощью reduce мы можем создать волшебно красивую map, используя всего одну строчку кода:

Как ты видел, существует множество возможностей, если ты хочешь создать свои собственные пользовательские функции, исходя из потребностей, ты можешь выбрать ту, которая подходит лучше всего!

Бонусная альтернатива: Асинхронный map

Иногда возникает необходимость отобразить данные через результат асинхронной функции, так как же можно реализовать пользовательскую версию map, предоставляющую такую возможность?

Эта функция использует ту же функцию отображения, что и другие, с той лишь разницей, что отображение каждого элемента ждет секунду, прежде чем перейти к следующему.

Заключение

Итак, сегодня немного попрактиковались в создании функцию map полностью с нуля, а также реализовали асинхронную map.

Какой вариант показался тебе наиболее полезным? Дай мне знать в комментариях!

Источник: https://dev.to/itsrennyman/deep-dive-into-javascript-array-map-5b2f