Перейти к основному содержимому

Метод Array.prototype.map() в JavaScript

Али Гасымов

Али Гасымов

JavaScript разработчик

Главное#

Метод Array.prototype.map() — иммутабельный. Первым аргументом принимает функцию которая последовательно выполняется для каждого элемента исходного массива. Значение, которое вернёт функция будет элементом нового массива

const numbers = [1, 2, 3];
const result = numbers.map((number, index, array) => {
return number * 2;
});
console.log(result); // [2, 4, 6]
// Исходный массив не поменялся
console.log(numbers); // [1, 2, 3]

Примеры#

Получение UTF-16 кода для каждого символа из строки#

Метод String.prototype.charCodeAt() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

const result = Array.prototype.map.call('JavaScript', (char) => {
return char.charCodeAt();
});
console.log(result); // [74, 97, 118, 97, 83, 99, 114, 105, 112, 116]

Получение значений из объекта#

Метод Array.prototype.map() часто используется, когда нужно подготовить массив с данными для отправки в API. В этом примере у нас есть массив users с объектами пользователей, а API принимает массив с id пользователей.

const users = [{
id: 304062978,
name: 'Али',
}, {
id: 1,
name: 'Павел'
}];
const usersIds = users.map(user => user.id);
console.log(usersIds); // [304062978, 1]

Не вернуть значение из функции#

Если из функции не вернуть значение, то в массив запишется undefined.

const numbers = [2, 7, 11, 15, 9];
const result = numbers.map((number) => {
if (number < 10) {
return number
}
});
console.log(result); // [2, 7, undefined, undefined, 9]