50. Map

Иллюстрация к уроку Map - это мощный инструмент в JavaScript, позволяющий преобразовывать массивы, применяя одну и ту же функцию к каждому элементу. Он создает новый массив, содержащий результаты этих преобразований. Давайте разберемся, как это работает.

Концепция Map

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

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

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // Вывод: [2, 4, 6, 8, 10]

В этом примере, функция function(number) { return number * 2; } вызывается для каждого числа в массиве numbers. Результат умножения каждого числа на 2 помещается в новый массив doubledNumbers.

Пример 2: Использование стрелочных функций

Стрелочные функции делают код более лаконичным:

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // Вывод: [2, 4, 6, 8, 10]

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

map также отлично подходит для работы с массивами объектов.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const userNames = users.map(user => user.name);

console.log(userNames); // Вывод: ['Alice', 'Bob', 'Charlie']

В этом примере, мы извлекаем имена всех пользователей из массива users и создаем новый массив только с именами.

Жизненный пример

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

// Пример в React (псевдокод)
const items = ['Item 1', 'Item 2', 'Item 3'];

function MyListComponent() {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

В этом React компоненте, items.map преобразует каждый элемент массива items в HTML элемент <li>. key={item} необходим для оптимизации рендеринга в React. Подобный подход можно встретить практически в любом современном веб-приложении, использующем списки данных.

Ключевые моменты

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