run-dev

map в JavaScript: как преобразовывать массивы в JS

map — это метод массивов в JavaScript, который создает новый массив, содержащий результаты выполнения переданной функции для каждого элемента исходного массива. Этот метод позволяет преобразовывать элементы массива, не изменяя оригинальный массив.

Синтаксис метода map

array.map(callback(element, index, array), thisArg)
  • callback — функция, которая вызывается для каждого элемента массива.
  • element — текущий элемент массива.
  • index — индекс текущего элемента.
  • array — исходный массив.
  • thisArg — необязательный параметр, задающий контекст this внутри callback.

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

Пример: удвоение чисел

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

Преобразование массива объектов

map часто используется для извлечения или изменения данных внутри массива объектов:

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

Создание нового массива с добавлением свойства

const products = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 }
];

const productsWithTax = products.map(product => ({
    ...product,
    priceWithTax: product.price * 1.2
}));

console.log(productsWithTax);
// [
//     { name: 'Laptop', price: 1000, priceWithTax: 1200 },
//     { name: 'Phone', price: 500, priceWithTax: 600 }
// ]

Преобразование значений в другой тип

map позволяет менять не только сами значения, но и их тип:

const numbers = [1, 2, 3];
const strings = numbers.map(String);
console.log(strings); // ['1', '2', '3']

Использование индекса

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

const items = ['a', 'b', 'c'];
const indexedItems = items.map((item, index) => `${index + 1}: ${item}`);
console.log(indexedItems); // ['1: a', '2: b', '3: c']

Особенности map

  • Исходный массив не изменяется.
  • Возвращает новый массив с той же длиной, что и исходный.
  • Даже если callback ничего не возвращает, новый массив будет заполнен undefined.

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

Больше записей