Skip to content

Commit 67f730e

Browse files
committed
[LES-3.3/st-compl] intro-to-map-obj
Practice with "new Map(), set/get/has(), entries/fromEntries() meth's". Worth noting: - all this lesson/practice (note the solutions). FS-dev: B-4 / JS advanced
1 parent 8c5fa66 commit 67f730e

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Intro to Map()</title>
8+
<script src="./practice.js" defer></script>
9+
</head>
10+
11+
<body>
12+
</body>
13+
14+
</html>
Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
'use strict';
2+
3+
// Задание 1:
4+
// 1. Создай переменную adminUser и присвой ей объект { name: 'Bob' }.
5+
// 2. Создай пустой Map с именем roles.
6+
// 3. Используя chaining (цепочку вызовов .set().set()), добавь в карту две записи:
7+
// - Ключ: строка 'guest', Значение: 'view_only'
8+
// - Ключ: переменная adminUser, Значение: 'super_admin'
9+
// В конце выведи в консоль размер карты (через свойство .size) и права для админа (через .get()).
10+
11+
const adminUser = { name: 'Bob' };
12+
const roles = new Map();
13+
14+
roles.set('guest', 'view_only').set(adminUser, 'super_admin');
15+
16+
console.log(roles.size); // 2
17+
console.log(roles.get(adminUser)); // "super_admin"
18+
19+
console.log(roles); // Map(2) {'guest' => 'view_only', {…} => 'super_admin'}
20+
21+
// Задание 2:
22+
// 1. Создай salaryMap, передав data прямо в new Map().
23+
// 2. Создай переменную total = 0.
24+
// 3. Перебери salaryMap любым удобным способом (цикл for..of или метод .forEach) и просуммируй все зарплаты в переменную total.
25+
// 4. Выведи итоговую сумму.
26+
27+
const data = [
28+
['Alice', 500],
29+
['Bob', 700],
30+
['Charlie', 600],
31+
];
32+
33+
const salaryMap = new Map(data);
34+
let total = 0;
35+
36+
console.log(salaryMap); // Map(3) { 'Alice' => 500, 'Bob' => 700, 'Charlie' => 600 }
37+
38+
// salaryMap.forEach((value) => (total += value));
39+
for (const value of salaryMap.values()) {
40+
total += value;
41+
}
42+
43+
console.log(total); // 1800
44+
45+
// Задание 3:
46+
// 1. Создай priceMap на основе pricesObj. (Подсказка: вспомни про Object.entries(), чтобы подготовить данные для Map).
47+
// 2. Внеси изменения в карту:
48+
// - Цена на 'meat' выросла в 2 раза (получи старое значение, умножь и запиши обратно).
49+
// - Товар 'banana' закончился — удали этот ключ из карты.
50+
// 4. Бонус: Преврати получившийся priceMap обратно в обычный объект newPrices (используй Object.fromEntries()) и выведи его в консоль.
51+
52+
const pricesObj = {
53+
banana: 1,
54+
orange: 2,
55+
meat: 4,
56+
};
57+
58+
const priceMap = new Map(Object.entries(pricesObj));
59+
const upMeatPrice = priceMap.get('meat') * 2;
60+
61+
priceMap.set('meat', upMeatPrice);
62+
priceMap.delete('banana');
63+
64+
console.log(Object.fromEntries(priceMap)); // { orange: 2, meat: 8 }
65+
66+
// !! Задание 4:
67+
// 1. Создай Map.
68+
// 2. Пройдись по массиву events и заполни карту так, чтобы ключом был id, а значением — весь объект целиком. (Подсказка: так как .set перезаписывает старое значение, если ключ совпадает, тебе даже не нужны проверки if).
69+
// 3. В конце получи из карты массив уникальных объектов (используя .values()) и выведи его.
70+
// В итоге должен получиться массив из 3 элементов, где у id: 101 статус 'done'.
71+
72+
const events = [
73+
{ id: 101, status: 'pending' },
74+
{ id: 102, status: 'pending' },
75+
{ id: 101, status: 'done' }, // Обновление для 101
76+
{ id: 103, status: 'error' },
77+
];
78+
79+
const eventsMap = new Map();
80+
81+
events.forEach((event) => {
82+
eventsMap.set(event.id, event);
83+
});
84+
85+
const uniqueEvents = [...eventsMap.values()];
86+
87+
console.log(uniqueEvents);
88+
/*
89+
[
90+
{ id: 101, status: 'done' },
91+
{ id: 102, status: 'pending' },
92+
{ id: 103, status: 'error' }
93+
]
94+
*/
95+
96+
// !! Задание 5:
97+
// 1. Создай пустой Map с именем tagCounts.
98+
// 2. Пройдись циклом по массиву tags.
99+
// 3. Логика внутри цикла:
100+
// - Если такой тег уже есть в карте: получи текущее количество, прибавь 1 и запиши обратно.
101+
// - Если такого тега нет: запиши его со значением 1.
102+
// 4. Выведи итоговый Map.
103+
// (Ожидаемый результат: js => 3, css => 2, html => 1, react => 1)
104+
105+
const tags = ['js', 'css', 'html', 'js', 'css', 'js', 'react'];
106+
107+
const tagCounts = new Map();
108+
109+
for (const tag of tags) {
110+
if (!tagCounts.has(tag)) {
111+
tagCounts.set(tag, 1);
112+
} else {
113+
const count = tagCounts.get(tag);
114+
tagCounts.set(tag, count + 1);
115+
}
116+
}
117+
118+
// ?? альтернативное решение (более лаконичное)
119+
// for (const tag of tags) {
120+
// // Получаем текущее значение ИЛИ 0, прибавляем 1 и сразу записываем
121+
// const currentCount = tagCounts.get(tag) || 0;
122+
// tagCounts.set(tag, currentCount + 1);
123+
// }
124+
125+
console.log(tagCounts); // Map(4) { 'js' => 3, 'css' => 2, 'html' => 1, 'react' => 1 }

0 commit comments

Comments
 (0)