Map: примеры (JAVASCRIPT)

Базовые примеры использования

Пример 1: Умножение каждого элемента на 2

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

[2, 4, 6, 8]

Пример 2: Извлечение свойства из объектов

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Иван' }
];
const names = users.map(user => user.name);
console.log(names);

['Анна', 'Иван']

Пример 3: Использование индекса и исходного массива

const arr = [10, 20, 30];
const result = arr.map((value, index, array) => {
  return value + index + array.length;
});
console.log(result);

[13, 23, 33]

Пример 4: Использование второго аргумента thisArg

const multiplier = {
  factor: 5,
  multiply: function(x) {
    return x * this.factor;
  }
};
const nums = [1, 2, 3];
const multiplied = nums.map(multiplier.multiply, multiplier);
console.log(multiplied);

[5, 10, 15]

Похожие методы в JavaScript

forEach()

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

filter()

Создаёт новый массив со всеми элементами, прошедшими проверку в функции-предикате. Отличается от map() целью - фильтрация вместо преобразования.

reduce()

Применяет функцию к аккумулятору и каждому элементу массива, возвращая одно результирующее значение. Используется для свёртки массива в одно значение.

Рекомендации по выбору

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

Аналоги в других языках программирования

PHP: array_map()

$numbers = [1, 2, 3];
$squared = array_map(function($n) {
    return $n * $n;
}, $numbers);
print_r($squared);

Array
(
    [0] => 1
    [1] => 4
    [2] => 9
)

Python: map()

numbers = [1, 2, 3]
squared = list(map(lambda x: x**2, numbers))
print(squared)

[1, 4, 9]

MySQL: Подход с запросами

SELECT id, name, price, price * 1.2 as price_with_tax
FROM products;

C#: LINQ Select()

var numbers = new List { 1, 2, 3 };
var squared = numbers.Select(x => x * x).ToList();

Ключевые отличия

• В Python результат map() нужно явно преобразовывать в list
• PHP версия работает с несколькими массивами одновременно
• C# реализация является частью LINQ и работает с любыми IEnumerable коллекциями
• JavaScript map() является методом прототипа Array

Типичные ошибки

Забытый return

const numbers = [1, 2, 3];
const result = numbers.map(num => {
  num * 2; // Ошибка: нет return
});
console.log(result);

[undefined, undefined, undefined]

Изменение исходного массива

const users = [{ name: 'Анна' }, { name: 'Иван' }];
const updated = users.map(user => {
  user.name = user.name.toUpperCase(); // Мутирует исходный объект
  return user;
});
console.log(users[0].name); // Исходный массив изменён

'АННА'

Использование map вместо forEach для побочных эффектов

// Антипаттерн
const nums = [1, 2, 3];
const result = nums.map(num => {
  console.log(num); // Побочный эффект
  return num;
});
// Создан ненужный массив result

Обработка разреженных массивов

const sparse = [1, , 3]; // Разреженный массив
const result = sparse.map(x => x * 2);
console.log(result);

[2, empty, 6]

Изменения в современных версиях

Метод map() был стандартизирован в ECMAScript 5 (2009 год) и с тех пор его базовое поведение не менялось.

Современные изменения касаются в основном интеграции с другими возможностями языка:

• С появлением стрелочных функций в ES6 (2015) синтаксис стал более лаконичным
• В ES2019 добавлен метод flatMap(), который объединяет map() и flat(1)
• Современные движки оптимизируют производительность метода для различных сценариев
• Поддержка асинхронных функций внутри map() с соответствующим поведением

Расширенные примеры использования

Цепочка методов массива

const products = [
  { name: 'Яблоки', price: 100, quantity: 2 },
  { name: 'Бананы', price: 80, quantity: 3 },
  { name: 'Апельсины', price: 120, quantity: 1 }
];

const totalCosts = products
  .map(p => ({ 
    ...p, 
    total: p.price * p.quantity 
  }))
  .filter(p => p.total > 150)
  .map(p => p.name);

console.log(totalCosts);

['Бананы']

Работа с DOM элементами

// Преобразование NodeList в массив данных
const listItems = document.querySelectorAll('li');
const texts = Array.from(listItems)
  .map(li => li.textContent.trim());

Трансформация матриц

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Транспонирование матрицы
const transposed = matrix[0].map((_, colIndex) => 
  matrix.map(row => row[colIndex])
);

console.log(transposed);

[
  [1, 4, 7],
  [2, 5, 8],
  [3, 6, 9]
]

Обработка вложенных структур

const departments = [
  { name: 'Разработка', employees: ['Анна', 'Иван'] },
  { name: 'Тестирование', employees: ['Мария', 'Петр'] }
];

const allEmployees = departments.flatMap(
  dept => dept.employees.map(
    emp => `${emp} (${dept.name})`
  )
);

console.log(allEmployees);

['Анна (Разработка)', 'Иван (Разработка)', 'Мария (Тестирование)', 'Петр (Тестирование)']

Создание последовательностей

// Генерация последовательности Фибоначчи
const fibonacci = Array(10).fill(0)
  .map((_, i, arr) => i > 1 ? arr[i-1] + arr[i-2] : i);

console.log(fibonacci);

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Работа с асинхронными функциями

async function fetchUserData(ids) {
  const promises = ids.map(async (id) => {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  });
  return Promise.all(promises);
}