Метод Array map() в JavaScript

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

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

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

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

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

let circles = [
    10, 30, 50
];

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

let areas = []; // to store areas of circles
let area = 0;
for(let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);

Для этого требуется довольно много кода.

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

function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);

Выход

[314, 2827, 7853]

Как это работает.

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

Чтобы сделать его короче, вы можете передать в методе map() анонимную функцию следующим образом.

let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);

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

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);

Метод в деталях

Ниже показан метод map().

arrayObject.map(callback[,contextObject]);

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

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

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

function callback(currentElement,index,array){
  // ... 
}

Функция callback() принимает три аргумента:

• currentElement — это текущий элемент обрабатываемого массива.
• index — это индекс currentElement.
• array — это проходимый объект массива.

currentElement обязателен, а аргументы index и array необязательны.

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

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

Дополнительные примеры

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

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);

Выход

 [4, 5, 6]

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

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