Преобразование массива в JavaScript

• Что значит преобразовать массив
• Преобразование через map()
• Преобразование массива объектов
• Фильтрация перед преобразованием
• map() не меняет исходный массив
• Зачем нужен return
• Когда map() не нужен
• Итого

Преобразовать массив - значит получить на его основе другой массив. Обычно количество элементов остается таким же, но сами значения меняются.

let numbers = [1, 2, 3];

let doubled = numbers.map((number) => number * 2);

console.log(doubled); // [2, 4, 6]

В этом примере из массива чисел получился новый массив чисел, где каждое значение умножено на два.

Что значит преобразовать массив

Преобразование массива часто нужно, когда данные уже есть, но для дальнейшей работы они нужны в другом виде.

Например, есть цены без скидки, а нужно получить цены со скидкой.

let prices = [100, 200, 300];

let pricesWithDiscount = prices.map((price) => price * 0.9);

console.log(pricesWithDiscount); // [90, 180, 270]

Или есть массив объектов, а нужен массив только с именами пользователей.

let users = [
  { name: 'Анна', age: 22 },
  { name: 'Олег', age: 30 },
];

let names = users.map((user) => user.name);

console.log(names); // ['Анна', 'Олег']

Преобразование через map()

Основной метод для преобразования массива - map(). Он вызывает callback-функцию для каждого элемента и собирает результаты в новый массив.

let numbers = [5, 10, 15];

let result = numbers.map((number) => {
  return number + 1;
});

console.log(result); // [6, 11, 16]

То, что вернет callback-функция, станет новым элементом массива.

Если тело функции короткое, можно использовать сокращенную запись без фигурных скобок и return.

let result = numbers.map((number) => number + 1);

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

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

let products = [
  { title: 'Книга', price: 500 },
  { title: 'Курс', price: 3000 },
  { title: 'Подписка', price: 900 },
];

let titles = products.map((product) => product.title);

console.log(titles); // ['Книга', 'Курс', 'Подписка']

Иногда из одного объекта нужно получить другой объект.

let cards = products.map((product) => {
  return {
    name: product.title,
    text: product.price + ' ₽',
  };
});

console.log(cards);

Такой прием удобен, когда исходные данные приходят в одном формате, а для интерфейса нужен другой.

Фильтрация перед преобразованием

Иногда нужно сначала оставить только часть элементов, а потом преобразовать их.

let products = [
  { title: 'Книга', price: 500, inStock: true },
  { title: 'Курс', price: 3000, inStock: false },
  { title: 'Подписка', price: 900, inStock: true },
];

let titles = products
  .filter((product) => product.inStock)
  .map((product) => product.title);

console.log(titles); // ['Книга', 'Подписка']

Здесь filter() отбирает товары в наличии, а map() преобразует оставшиеся объекты в строки.

map() не меняет исходный массив

map() возвращает новый массив и не меняет исходный.

let numbers = [1, 2, 3];

let doubled = numbers.map((number) => number * 2);

console.log(numbers); // [1, 2, 3]
console.log(doubled); // [2, 4, 6]

Это важное отличие от прямого изменения элементов по индексу.

let numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2;
}

console.log(numbers); // [2, 4, 6]

Оба варианта могут быть рабочими. Но если задача - получить новый массив на основе старого, обычно лучше использовать map().

Зачем нужен return

Если callback-функция в map() записана с фигурными скобками, из нее нужно вернуть значение через return.

let numbers = [1, 2, 3];

let result = numbers.map((number) => {
  return number * 2;
});

console.log(result); // [2, 4, 6]

Если забыть return, в новый массив попадут undefined.

let result = numbers.map((number) => {
  number * 2;
});

console.log(result); // [undefined, undefined, undefined]

Когда map() не нужен

map() нужен для создания нового массива. Если новый массив не нужен, лучше выбрать другой способ.

Например, для вывода элементов в консоль подойдет forEach().

let names = ['Анна', 'Олег', 'Мария'];

names.forEach((name) => {
  console.log(name);
});

Если нужно получить одно итоговое значение, например сумму, лучше подойдет reduce().

let prices = [100, 200, 300];

let sum = prices.reduce((total, price) => total + price, 0);

console.log(sum); // 600

Итого

1. Преобразование массива - это получение нового массива на основе старого.

2. Для преобразования чаще всего используют map().

3. То, что возвращает callback-функция в map(), становится элементом нового массива.

4. map() не меняет исходный массив.

5. Если новый массив не нужен, map() лучше не использовать.