Английская версия: https://www.javascripttutorial.net/javascript-array-map/

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

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

Давайте посмотрим на пример.

Предположим, у вас есть массив чисел, в котором каждый элемент представляет радиус круга следующим образом:

Ниже мы покажем, как вычислить площадь каждого круга и отправить результат в новый массив.

Результат:

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

Начиная с ES5, тип массива JavaScript предоставляет метод, map()который позволяет вам преобразовывать элементы массива более чистым и более коротким способом, чем использование цикла for.

Результат:

Разберитесь, как работает этот код:

• Сначала определите функцию, которая вычисляет площадь круга.
• Затем передайте функцию circleAreaметоду карты. Метод map()вызовет функцию circleAreaдля каждого элемента массива circlesи вернет новый массив с элементами, которые были преобразованы.

Кроме того, вы можете использовать стрелочную функцию ES6 для достижения того же результата с более чистым кодом:

Детали метода map ()

Синтаксис:

Метод map()вызывает функцию обратного вызова callbackдля всех элементов массива и возвращает новый массив, содержащий результаты.

Метод map()принимает два именованных аргумента, первый - обязательный, второй - необязательный.

Как и в других итерационные методы, такие как every(), some(), filter(), forEach()и sort()функция callback()имеет следующий вид:

Функция callbackимеет 3 аргумента:

• Аргумент currentElement- это текущий элемент массива, обрабатываемого функцией callback. Это обязательный аргумент.
• indexИз currentElementобрабатываемых с помощью функции callback.
• Пройденный объект array.

Аргумент contexObjectметода не map()является обязательным. Если вы передадите это значение, вы можете ссылаться на него с помощью ключевого слова thisвнутри функции callback.

Важно отметить, что метод filter()не изменяет исходный массив. Он создает новый массив всех элементов, преобразованных функцией callback.

Примеры Map ()

В следующем примере показано, как преобразовать массив чисел с помощью внутреннего метода типа Mathкак функции callback:

Результат:

Новый массив содержит квадратные корни чисел массива numbers.

В этом руководстве вы узнали, как использовать этот метод map()для преобразования элементов массива в соответствии с предоставленной функцией.

См. Указатель всех руководств по JavaScript

Учебники по JavaScript