Какой массив возвращает map?

Краткий ответ

Массив map возвращает НОВЫЙ массив той же длины, что и исходный, содержащий результаты применения callback-функции к каждому элементу исходного массива.

Детальное объяснение метода Array.prototype.map()

Метод map() — это один из фундаментальных методов-итераторов в JavaScript для работы с массивами. Его основное предназначение — трансформация данных. В отличие от методов, изменяющих исходный массив (мутабельных, как push или splice), map является иммутабельным (неизменяющим) — он создает и возвращает совершенно новый массив.

Ключевые характеристики возвращаемого массива

• Длина идентична: Новый массив всегда имеет ту же длину (length), что и исходный. Если в исходном массиве 5 элементов, в новом также будет 5 элементов.
• Содержимое преобразовано: Каждый элемент нового массива — это результат вызова callback-функции, переданной в map, для соответствующего элемента исходного массива.
• Пропуски сохраняются: Для "пустых" мест (holes) в разреженном массиве или для индексов, которые никогда не были установлены, callback-функция не вызывается, и эти места остаются пустыми в новом массиве.

Синтаксис и примеры

Базовый синтаксис:

const newArray = originalArray.map(callback(currentValue, index, array) {
  // Возвращаемое значение становится элементом newArray
}, thisArg);

Простой пример трансформации чисел:

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

console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (исходный массив не изменился)

Пример преобразования объектов:

const users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Петр' }
];

const userIds = users.map(user => user.id);
console.log(userIds); // [1, 2]

const userGreetings = users.map(user => `Привет, ${user.name}!`);
console.log(userGreetings); // ['Привет, Анна!', 'Привет, Петр!']

Особенности работы и важные нюансы

1. Callback-функция получает три аргумента: Текущий элемент (currentValue), его индекс (index) и ссылку на исходный массив (array). Использование всех аргументов позволяет выполнять сложные преобразования.

   const numbers = [10, 20, 30];
   const transformed = numbers.map((num, idx, arr) => num + idx + arr[0]);
   console.log(transformed); // [10+0+10=20, 20+1+10=31, 30+2+10=42]
   

2. Работа с разреженными массивами:

   const sparseArray = [1, , 3]; // Элемент с индексом 1 — "пусто"
   const result = sparseArray.map(num => num * 2);
   console.log(result);        // [2, empty, 6]
   console.log(1 in result);   // false (элемент с индексом 1 отсутствует)
   

3. Не вызывается для удаленных или неопределенных элементов:

   const arr = [1, 2, 3];
   delete arr[1];
   const newArr = arr.map(x => {
       console.log(`Обрабатывается ${x}`); // Вызовется только для индексов 0 и 2
       return x * 10;
   });
   console.log(newArr); // [10, empty, 30]
   

Сравнение с другими методами

• forEach: Выполняет функцию для каждого элемента, но возвращает undefined. Используется для сайд-эффектов, а не для трансформации.
• filter: Возвращает новый массив, но только с элементами, прошедшими проверку (callback возвращает true). Длина нового массива может быть меньше.
• reduce: Возвращает одно аккумулированное значение (любого типа), а не массив.

Практическое применение в современном фронтенде

• Рендеринг списков в React/Vue: Наиболее частая причина использования.

  function UserList({ users }) {
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
  

• Извлечение данных из API-ответов:

  const apiResponse = [{ productName: 'Телефон', price: 30000 }, ...];
  const productNames = apiResponse.map(product => product.productName);
  

• Нормализация или форматирование данных:

  const prices = ['100.50', '200.75', '300'];
  const formattedPrices = prices.map(price => `$${parseFloat(price).toFixed(2)}`);
  

Важное предупреждение: Никогда не используйте map, если вас не интересует возвращаемый массив — для этого есть forEach. map всегда должен возвращать значение из callback-функции, иначе в результирующем массиве появятся undefined.

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