Метод массива map

🔧 Как работает map

1. У нас есть массив элементов (барашки, люди, слова, числа).

2. Мы вызываем у массива метод .map(callback).

3. Callback-функция (функция-преобразователь) получает на вход каждый элемент массива и возвращает новый результат для данного элемента.

4. Все результаты складываются в новый массив, который map возвращает.

Разберем на примерах

Барашки

🤔 Идея

• У нас есть массив овечек (объектов).

• Каждая овечка ➡️ превращается в клубок ниток 🧶😨

• Сколько овечек, столько и клубков.

• Исходный массив овечек остаётся без изменений → создаётся новый массив клубков.

⚙️ Реализация

• Для того чтобы метод map сделал на основе барашка соответсвующий клубок мы передаем внутрь него функцию-callback (преобразователь)
• Callback работает с каждым барашком и делает из его шерсти соответствующий клубок
• После того как каждый барашек обработан, map отдает нам результирующий массив с клубками шерсти.

Как данная функция выглядела бы в js:

const sheeps = [sheep1, sheep2, sheep3, sheep4] //массив, в котором сидят объекты(барашки)
 
// вызываем у этого исходного массива метод .map
const balls = sheeps.map(
  // передаём в него callback функцию.
  // callback в свою очередь принимает овечку
  (sheep) => {
    // "стрижёт" её
    const wool = cutSheep(sheep)
    // делает клубок из шерсти
    const ball = makeBallOfYarn(wool)
    //возвращает клубок
    return ball
  },
)

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

Люди

🤔 Идея

• У нас есть массив объектов (люди).

• Нужно из каждого объекта получить новое значение (например: 1 - если мужчина, 2 — если женщина).

• Используем map, передаём в него функцию, которая принимает "человека" и возвращает число.

• Исходный массив остаётся без изменений → создаётся новый массив чисел.

⚙️ Реализация

• Для того чтобы метод map решил на основе человека, какую цифру надо вернуть мы передаем внутрь него функцию-callback.
• Callback работает с каждым человеком, определяет его пол и возвращает соответствующую цифру.
• После того как каждый человек обработан, map отдает нам результирующий массив с цифрами.

Как данная функция выглядела бы в js:

const people = [person1, person2, person3] //массив, в котором сидят объекты(люди)
 
// вызываем у этого исходного массива метод .map
const genders = people.map(
  // передаём в него callback функцию.
  // callback в свою очередь принимает человека
  (person) => {
    // определяет пол человека
    const genderStr = detectGender(person)
    // определяет, какое значение вернуть
    switch (genderStr) {
      case "male": //если мужчина
        return 1 // возвращает 1
      case "female": //если женщина
        return 2 // возвращает 2
      default: //если не определен
        return 0 // возвращает 0
    }
  },
)

Слова

🤔 Идея

• У нас есть массив объектов (слова на английском).

• Нужно из каждого объекта получить новый, который будет содержать два свойства: слово на английском языке и его перевод на испанский.

• Используем map, передаём в него функцию, которая принимает исходное слово и возвращает новый объект.

• Исходный массив остаётся без изменений → создаётся новый массив объектов, каждый из которых состоит из двух свойств.

⚙️ Реализация

• Для того чтобы метод map сделал на основе слова соответсвующий объект мы передаем внутрь него функцию-callback.
• Callback работает с каждым словом, переводит его на испанский и создает объект, содержащий само слово на английском и его перевод на испанском.
• После того как каждое слово обработано, map отдает нам результирующий массив с новыми объектами.

Как данная функция выглядела бы в js:

const words = ["hello", "bye", "thanks"] //массив, в котором сидят объекты(люди)
 
// вызываем у этого исходного массива метод .map
const translations = words.map(
  // передаём в него callback функцию.
  // callback в свою очередь принимает слово
  (word) => {
    // переводит слово на испанский
    const spanish = translateToSpanish(word)
    // создает и возвращает новый объект
    return { eng: word, es: spanish }
  },
)

Практика

• Создаем файл index.html, заполним базовым содержимым и внизу подключим map.js

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="map.js"></script>
  </body>
</html>

• Создаем файл map.js
• Запустим index.html в браузере. Кликаем по файлу правой кнопкой мыши и выбираем Open in и браузер.
• Создаем массив чисел.

const numbers = [1, 2, 3, 4, 5]
const newArray = numbers.map(() => {}) // создаем новый массив чисел
console.log(newArray.length) // выводим в консоль длину нового массива, чтобы убедиться, что она совпадает с длинной исходного массива

• Если мы захотим вывести в консоль новый массив, то получим массив с undefined, так как callback внутри map возвращает undefined для каждого элемента

const numbers = [1, 2, 3, 4, 5]
const newArray = numbers.map(() => {}) // создаем новый массив чисел
console.log(newArray) // [undefined,undefined,undefined,undefined,undefined]

const numbers = [1, 2, 3, 4, 5]
const newArray = numbers.map((number) => {
  return { age: number }
})
console.log(newArray.length) // 5
console.log(newArray) // [{age: 1},{age: 2},{age: 3},{age: 4},{age: 5}]

Задача со словами

🤔 Идея

• У нас есть массив слов.
• Надо получить массив объектов, где будет указано количество букв в слове.

⚙️ Реализация

• Так как нам нужно получить массив, основанный на данных исходного массива используем метод map

const words = ["hello", "world"]
const wordsInfo = words.map((word) => {
  // в callback передаем наше слово
  return {
    lettersCount: word.length, // возвращаем объект, содержащий информацию о количестве букв(длине слова)
  }
})
console.log(wordsInfo) // [{lettersCount: 5},{lettersCount: 5}]

🤔 Идея

• Нужно добавить порядковый номер слова в итоговый массив.

⚙️ Реализация

• Для этого мы можем использовать второй параметр, который принимает callback-функция - index. То есть порядковый номер элемента в исходном массиве.

const words = ["hello", "world"]
const wordsInfo = words.map((word, index) => {
  // в callback передаем наше слово
  return {
    orderNumber: index + 1, // если хотим, чтобы нумерация шла от 1
    lettersCount: word.length, // возвращаем объект, содержащий информацию о количестве букв(длине слова)
  }
})
console.log(wordsInfo) // [{orderNumber: 1,lettersCount: 5},{orderNumber: 2,lettersCount: 5}]

• В callback-функцию может приходить еще третий параметр array - исходный массив

const words = ["hello", "world"]
const wordsInfo = words.map((word, index, array) => {
  // в callback передаем наше слово
  return {
    orderNumber: index + 1, // если хотим, чтобы нумерация шла от 1
    lettersCount: word.length, // возвращаем объект, содержащий информацию о количестве букв(длине слова)
  }
})
console.log(wordsInfo) // [{orderNumber: 1,lettersCount: 5},{orderNumber: 2,lettersCount: 5}]

Лайфхак

• Мы можем запустить наш map.js непосредственно в Node.js и тогда все наши console.log будут отображаться в терминале. Для этого в терминале напишем:

node map.js

Возврат значений функций и метод map

1. Функции и return

• Когда мы вызываем функцию, на месте вызова подставляется то, что эта функция возвращает.

• Если функция ничего не возвращает (нет return), то результатом будет undefined.

function run() {
  console.log("hello")
}
 
const value = run()
console.log(value) // undefined

• Если внутри есть return, то в переменную попадёт именно возвращённое значение:

function makeArray() {
  return [1, 2, 3]
}
const value = makeArray()
console.log(value) // [1, 2, 3]

2. Необязательно сохранять результат

• Можно вызвать функцию и не сохранять её результат:

makeArray() // массив создастся, но мы его нигде не сохранили

• В этом случае массив создастся, но потом будет удалён сборщиком мусора, так как ссылка на него не сохранилась.

3. Метод map — тоже функция

• map вызывается у массива:

const result = words.map((word) => word.length)

• На месте вызова map возвращается новый массив.

• Внутри map на каждый элемент исходного массива вызывается callback, и результат callback складывается в новый массив.

const words = ["hi", "world"]
const lengths = words.map((w) => w.length)
 
console.log(lengths) // [2, 5]

4. Если не сохранять результат map

words.map((w) => w.length)

• Новый массив создастся.
• Но если его не сохранить в переменную → мы теряем к нему доступ.
• Через время сборщик мусора удалит его.

5. Передача результата вызова в другую функцию

• Можно передавать не сам массив, а результат вызова map напрямую в другую функцию:

function run(array) {
  console.log(array)
}
 
run(words.map((w) => w.length)) // В run сразу попадёт массив [2, 5]

• Здесь в run передали результат работы map, а не сам исходный массив и не сам метод.

Выводы

• map создаёт новый массив на основе исходного массива.

• map принимает callback-функцию и вызывает её для каждого элемента.

• callback в свою очередь принимает три параметра: element(элемент массива), index (порядковый номер элемент), array(весь массив)

• то, что возвращает callback, попадает в новый массив

• map всегда возвращает новый массив. Мы либо сохраняем его в переменную, либо сразу передаём дальше, либо теряем.

• map всегда возвращает новый массив той же длины, что и исходный.

🏠 Домашнее задание

Изучение метода Array.map()

• Цель задания

Освоить использование метода Array.map() для трансформации массивов, понять принципы создания новых массивов на основе существующих данных.

Удачи в изучении! После решения первых двух задач вы будете готовы к следующему уроку.

Инструкции по выполнению

1. Создание файла: Создайте новый файл с любым названием (например, map.js) в вашем проекте или папке для практики.

2. Структура работы: Решайте задачи последовательно, записывая код в созданный файл. Можете добавлять комментарии для лучшего понимания.

3. Уровень сложности: Каждая следующая задача сложнее предыдущей:

• Задача 1 - Базовый уровень (простые операции с числами)
• Задача 2 - Легко-средний уровень (работа со строками и объектами)
• Задача 3 - Средний уровень (математические вычисления с объектами)
• Задача 4 - Средне-сложный уровень (сложные вычисления с несколькими полями)

4. Рекомендации по выполнению:

• Обязательно: Решите минимум первые 2 задачи для понимания основ метода map()
• По желанию: Задачи 3 и 4 помогут углубить знания, но не являются обязательными для перехода к следующему уроку

5. Проверка результатов: Используйте console.log() для вывода результатов каждой задачи в консоль браузера или Node.js.

Задача 1

Описание: Дан массив чисел. Создайте новый массив, где каждое число увеличено на 10.

const numbers = [1, 5, 10, 15, 20]
const newNumbers = XXX
console.log(newNumbers) // [11, 15, 20, 25, 30] ⬅️ Итоговый результат

Задача 2

Описание: Дан массив строк с именами. Создайте новый массив объектов, где каждый объект содержит имя и его длину.

const names = ["Alice", "Bob", "Charlie", "Diana"]
const nameInfo = XXX
console.log(nameInfo)
// ⬇️ Итоговый результат
// [
//   { name: 'Alice', length: 5 },
//   { name: 'Bob', length: 3 },
//   { name: 'Charlie', length: 7 },
//   { name: 'Diana', length: 5 }
// ]

Задача 3

Описание: Дан массив объектов с информацией о товарах (название, цена). Создайте новый массив объектов с добавленным полем "finalPrice", которое содержит цену с учетом скидки 15%.

Решение:

const products = [
  { name: "Laptop", price: 1000 },
  { name: "Mouse", price: 50 },
  { name: "Keyboard", price: 80 },
]
 
const productsWithFinalPrice = XXX
console.log(productsWithFinalPrice)
// ⬇️ Итоговый результат
// [
//   { name: 'Laptop', price: 1000, finalPrice: 850 },
//   { name: 'Mouse', price: 50, finalPrice: 42.5 },
//   { name: 'Keyboard', price: 80, finalPrice: 68 }
// ]

Задача 4

Описание: Дан массив объектов с информацией о сотрудниках (имя, зарплата, стаж работы). Создайте новый массив объектов с добавленным полем "totalSalary", которое включает зарплату плюс бонус. Бонус рассчитывается как 5% от зарплаты за каждый год стажа.

const employees = [
  { name: "Alice", salary: 50000, experience: 3 },
  { name: "Bob", salary: 60000, experience: 5 },
  { name: "Charlie", salary: 45000, experience: 2 },
]
 
const employeesWithTotal = XXX
 
console.log(employeesWithTotal)
// ⬇️ Итоговый результат
// [
//   { name: 'Alice', salary: 50000, experience: 3, totalSalary: 57500 },
//   { name: 'Bob', salary: 60000, experience: 5, totalSalary: 75000 },
//   { name: 'Charlie', salary: 45000, experience: 2, totalSalary: 49500 }
// ]