2.9-bob: Map, Set va Date

2-QISM — JavaScript (0 dan chuqurgacha) · 9-mavzu

1. Kirish va motivatsiya

Obyekt 2.8-bob va massiv 2.7-bob — JS'ning ikki asosiy tuzilmasi. Lekin ba'zi vazifalar uchun ular noqulay. JS yana uch maxsus tuzilma beradi:

• Map — kalit-qiymat to'plami (obyektga o'xshash), lekin har qanday turdagi kalit (obyekt, son ham!) va tartib saqlanadi, oson sanaladi.
• Set — takrorlanmas qiymatlar to'plami. Dublikatlarni o'chirish uchun ideal.
• Date — sana va vaqt bilan ishlash.

O'xshatish: obyekt — qat'iy shaklli blank (kalitlar oldindan ma'lum). Map — moslashuvchan jadval (istalgan kalit, oson o'sadi). Set — "mehmonlar ro'yxati" (har kishi faqat bir marta). Date — kalendar + soat.

Bu bob — to'g'ri vazifaga to'g'ri qurolni tanlashni o'rgatadi. Dublikatlarni tozalash, tez qidirish, sana hisoblash — kunlik ishlar.

2. Nazariya — chuqur tushuntirish

2.1. Map — kuchli kalit-qiymat to'plami

Map — kalit-qiymat juftliklari (obyektga o'xshash), lekin muhim afzalliklari bilan:

const map = new Map();

map.set("ism", "Ali");        // qo'shish (kalit, qiymat)
map.set(1, "raqam kalit");    //  son ham kalit bo'la oladi
map.set(true, "boolean");     // har qanday tur kalit

map.get("ism");               // "Ali" — olish
map.has("ism");               // true — bormi?
map.delete(1);                // o'chirish
map.size;                     // 2 — soni (obyektda .length yo'q!)

// Tsikl (tartib SAQLANADI — qo'shilish tartibida)
for (const [kalit, qiymat] of map) {
  console.log(kalit, qiymat);
}

Map vs Object (qachon qaysi):

Qachon Map: kalitlar dinamik/noma'lum, tez-tez qo'shilib-o'chiriladi, kalit son/obyekt bo'lsa, yoki tartib muhim bo'lsa. Qachon Object: sobit struktura, JSON bilan ishlash 2.8-bob.

2.2. Set — takrorlanmas qiymatlar

Set — har qiymat faqat bir marta saqlanadigan to'plam:

const set = new Set();

set.add(1);
set.add(2);
set.add(1);        //  takror — qo'shilmaydi
set.size;          // 2

set.has(1);        // true
set.delete(2);

// Massivdan dublikatlarni o'chirish (ENG MASHHUR ishlatilishi)
const arr = [1, 2, 2, 3, 3, 3];
const noyob = [...new Set(arr)];   // [1, 2, 3] (spread bilan qayta massivga — 2.8)

Set'ning eng ko'p ishlatilishi: massivdan dublikatlarni tozalash — [...new Set(arr)]. Yodlab qoling.

2.3. Set bilan to'plam amallari

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);

// Kesishma (ikkalasida ham)
const kesishma = [...a].filter(x => b.has(x));   // [2, 3]
// Birlashma (hammasi, takrorsiz)
const birlashma = [...new Set([...a, ...b])];    // [1,2,3,4]
// Farq (a'da bor, b'da yo'q)
const farq = [...a].filter(x => !b.has(x));      // [1]

2.4. WeakMap va WeakSet — xotira uchun

WeakMap va WeakSet — Map/Set'ning "zaif" versiyalari. Asosiy farq: kalitlari faqat obyekt bo'ladi va ularga zaif havola (weak reference) tutiladi — ya'ni boshqa hech kim obyektga ishora qilmasa, u avtomatik xotiradan tozalanadi (garbage collector). Oddiy Map esa kalitni "ushlab" turadi va xotiradan chiqishiga to'sqinlik qiladi.

const wm = new WeakMap();
let user = { ism: "Ali" };

wm.set(user, "ma'lumot");   //  kalit faqat obyekt (string/son bo'lmaydi)
wm.get(user);               // "ma'lumot"

user = null;                // endi obyektga havola yo'q
//  wm'dagi yozuv ham avtomatik tozalanadi (GC)

Cheklov: WeakMap/WeakSet'da .size yo'q, ularni sanab bo'lmaydi (for...of yo'q) — chunki tarkibi istalgan paytda o'zgaradi. Shuning uchun ular kamdan-kam kerak bo'ladi: asosiy ish — obyektga "yashirin" qo'shimcha ma'lumot bog'lash (xotira sizishisiz). Shubha bo'lsa, oddiy Map/Set ishlating.

2.5. Date — sana va vaqt yaratish

Date — sana/vaqt obyekti:

const hozir = new Date();              // hozirgi sana-vaqt
const aniq = new Date("2026-06-21");   // matndan (ISO format — eng ishonchli)
const aniq2 = new Date(2026, 5, 21);   //  OY 0 dan! (5 = iyun, 0 = yanvar)
const vaqtBelgisi = new Date(1750000000000); // millisekund (timestamp)

OY 0 dan boshlanadi: new Date(2026, 5, 21) — bu iyun (yanvar=0, fevral=1...iyun=5). Bu — Date'ning eng mashhur tuzog'i. Shuning uchun ISO matn ("2026-06-21") ishonchliroq.

2.6. Date — o'qish metodlari

const d = new Date("2026-06-21T14:30:00");

d.getFullYear();    // 2026
d.getMonth();       // 5 (iyun — 0 dan! 2.5)
d.getDate();        // 21 (oyning kuni)
d.getDay();         // hafta kuni (0=yakshanba, 1=dushanba...)
d.getHours();       // 14
d.getMinutes();     // 30
d.getTime();        // millisekund (1970-yandan beri — Unix time)
Date.now();         // hozirgi timestamp (millisekund)

2.7. Date — formatlash

const d = new Date("2026-06-21T14:30:00");

d.toISOString();    // "2026-06-21T14:30:00.000Z" (standart, DB uchun)
d.toLocaleDateString("uz-UZ");  // mahalliy sana ("21.06.2026")
d.toLocaleString("uz-UZ");      // sana + vaqt
d.toLocaleTimeString();         // faqat vaqt

// Intl bilan moslashuvchan format (zamonaviy, eng yaxshi)
new Intl.DateTimeFormat("uz-UZ", {
  day: "numeric", month: "long", year: "numeric"
}).format(d);       // "21-iyun, 2026-yil" (taxminan)

2.8. Date — hisoblash

const a = new Date("2026-06-21");
const b = new Date("2026-06-25");

// Farq — millisekundda (getTime — 2.6)
const farqMs = b.getTime() - a.getTime();
const kunlar = farqMs / (1000 * 60 * 60 * 24);   // 4 (kun)

// Sanaga qo'shish (millisekund bilan)
const ertaga = new Date(Date.now() + 24 * 60 * 60 * 1000);

Maslahat: murakkab sana ishlari (formatlash, parse, vaqt zonalari) uchun real loyihada date-fns yoki Day.js kutubxonasi ishlatiladi (npm install — 0.7). Native Date — asoslar uchun yetadi, lekin og'ir ishda noqulay.

3. Sintaksis — tez ma'lumotnoma

// MAP
const m = new Map();
m.set(k, v)  m.get(k)  m.has(k)  m.delete(k)  m.size
for (const [k, v] of m) {}

// SET
const s = new Set([iterable]);
s.add(x)  s.has(x)  s.delete(x)  s.size
[...new Set(arr)]   // dublikatlarni o'chirish

// DATE
new Date()  new Date("2026-06-21")  Date.now()
d.getFullYear()  d.getMonth()/*0 dan!*/  d.getDate()  d.getTime()
d.toISOString()  d.toLocaleDateString("uz-UZ")
new Intl.DateTimeFormat("uz-UZ", {...}).format(d)

4. Batafsil kod namunalari

Misol 1 — Map: ovoz berish sanog'i

const ovozlar = ["Ali", "Vali", "Ali", "Guli", "Ali", "Vali"];

const sanoq = new Map();
for (const nomzod of ovozlar) {
  // bor bo'lsa +1, yo'q bo'lsa 1 (2.1)
  sanoq.set(nomzod, (sanoq.get(nomzod) || 0) + 1);
}
console.log(sanoq.get("Ali"));   // 3

// G'olibni topish (entries  Array — 2.7)
const golib = [...sanoq.entries()].sort((a, b) => b[1] - a[1])[0];
console.log(golib);   // ["Ali", 3]

Misol 2 — Set: dublikatlarni tozalash va to'plam amallari

const teglar = ["js", "react", "js", "node", "react", "css"];
const noyob = [...new Set(teglar)];   // ["js","react","node","css"] (2.2)
console.log(noyob.length);             // 4

// Ikki ro'yxat umumiyi (kesishma — 2.3)
const a = new Set(["js", "react", "css"]);
const b = new Set(["react", "vue", "css"]);
const umumiy = [...a].filter(x => b.has(x));   // ["react", "css"]

Misol 3 — Date: yosh va qolgan kunlar

function yoshHisobla(tugilganSana) {
  const tugilgan = new Date(tugilganSana);
  const hozir = new Date();
  let yosh = hozir.getFullYear() - tugilgan.getFullYear();
  // tug'ilgan kun hali kelmaganmi — bir yil ayir
  const oyFarq = hozir.getMonth() - tugilgan.getMonth();
  if (oyFarq < 0 || (oyFarq === 0 && hozir.getDate() < tugilgan.getDate())) {
    yosh--;
  }
  return yosh;
}
console.log(yoshHisobla("2007-03-15"));   // yoshi (hozirgi sanaga qarab)

// Bayramgacha qolgan kunlar (2.8)
const bayram = new Date("2026-12-31");
const qolgan = Math.ceil((bayram - new Date()) / (1000 * 60 * 60 * 24));
console.log(`${qolgan} kun qoldi`);

Misol 4 — Map vs Object tanlovi

//  Map — kalit dinamik/obyekt, tez-tez o'zgaradi
const userCache = new Map();
function userOl(id) {
  if (userCache.has(id)) return userCache.get(id);   // cache (0.1)
  const user = { id, ism: `User${id}` };             // (haqiqatda DB'dan)
  userCache.set(id, user);
  return user;
}

//  Object — sobit struktura, JSON
const config = { port: 3000, host: "localhost" };

5. To'g'ri va noto'g'ri holatlar

1) Dublikat tozalashda murakkab kod

//  qo'lda filter/indexOf bilan
const noyob = arr.filter((x, i) => arr.indexOf(x) === i);

//  Set bilan (2.2)
const noyob = [...new Set(arr)];

2) Date oyini 1 dan deb o'ylash

//  iyul kutilgan, lekin iyun chiqadi (2.5)
new Date(2026, 6, 1);   // bu IYUL (oy 0 dan!)

//  ISO matn
new Date("2026-07-01");

3) Tez qidiruv uchun massiv (Set/Map o'rniga)

//  katta ro'yxatda includes — sekin (O(n) — 3.1)
if (kattaMassiv.includes(x)) { }

//  Set — tez qidiruv (O(1))
const set = new Set(kattaMassiv);
if (set.has(x)) { }

4) Date'ni === bilan taqqoslash

//  ikki Date obyekti hech qachon === emas (obyekt — 2.1)
new Date("2026-01-01") === new Date("2026-01-01");   // false!

//  getTime() bilan
a.getTime() === b.getTime();

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Invalid Date

new Date("21-06-2026");   // Invalid Date (noto'g'ri format)

Sababi: noto'g'ri sana formati. Yechimi: ISO format ("2026-06-21") ishlating; isNaN(d.getTime()) bilan tekshiring.

Xato 2 — Oy/kun adashishi

Sababi: getMonth() 0 dan 2.5-bob. Yechimi: ko'rsatishda +1 yoki ism massivi (["yanvar",...][d.getMonth()]).

Xato 3 — Map'ni JSON qilishda bo'shaydi

JSON.stringify(new Map([["a", 1]]));   // "{}" (!!)

Sababi: JSON.stringify Map'ni qo'llamaydi 2.8-bob. Yechimi: JSON.stringify([...map]) (avval massivga).

Xato 4 — Set/Map'ni massiv kabi ishlatish

const s = new Set([1, 2]);
s.map(...);   //  Set'da map yo'q
s[0];         //  undefined (indeks yo'q)

Sababi: Set/Map — massiv emas. Yechimi: avval [...set] (massivga), keyin Array metodlari 2.7-bob.

Xato 5 — Vaqt zonasi chalkashligi

Sababi: Date lokal vaqt zonasida; server boshqa zonada. Yechimi: DB'da ISO/UTC (toISOString) saqlang; ko'rsatishda mahalliy formatlang 2.7-bob.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Array 2.7-bob: [...set], [...map] Array metodlari; dublikat tozalash.
• Object 2.8-bob: Map Object tanlovi; Object.entries Map.
• Performance (0.1, 3.1): Set/Map — tez qidiruv (O(1)) katta ma'lumotda.
• Backend/DB (5, 6): sanani ISO/UTC saqlash; timestamp.
• Caching 5.21-bob: Map — oddiy in-memory cache (Misol 4).
• React (11): noyob ro'yxat; key; sana ko'rsatish.
• Kutubxonalar: date-fns/Day.js — sana ishlari.

8. Eng yaxshi amaliyotlar (best practices)

• Dublikat [...new Set(arr)] 2.2-bob.
• Tez qidiruv (katta ma'lumot) Set/Map (has — O(1), 3.1).
• Dinamik/obyekt kalit, tartib muhim Map; sobit struktura/JSON Object 2.1-bob.
• Sana matni — ISO format ("2026-06-21"), Date konstruktorida oy 0 dan 2.5-bob.
• DB'da sana — ISO/UTC (toISOString); ko'rsatishda mahalliy (toLocaleString/Intl).
• Date'ni getTime() bilan taqqosla (=== emas — 5-bo'lim).
• Og'ir sana ishlari uchun date-fns/Day.js 2.8-bob.
• Set/Map Array ([...]) qilib Array metodlaridan foydalaning.

9. Amaliy loyiha: "Tadbir va Tashrif Boshqaruvi"

Map, Set va Date'ni birlashtiruvchi loyiha.

Maqsad

Map (sanash/cache), Set (noyoblik) va Date (sana hisoblash)ni to'g'ri vazifaga to'g'ri qurol sifatida ishlatish.

Talablar (requirements)

1. Noyob tashrif (Set): tashrif buyuruvchilar ro'yxatidan (takrorli) noyob odamlarni ajrating ([...new Set] — 2.2).
2. Teg sanog'i (Map): maqolalar teglarini sanab, eng mashhur 3 tegni toping (Misol 1).
3. Kategoriya bo'yicha guruh (Map): tadbirlarni kategoriya bo'yicha Map'da guruhlang.
4. Sana hisoblash (Date): har tadbirgacha qolgan kunlarni hisoblang (Misol 3); o'tib ketganlarni ajrating.
5. Sana formatlash: tadbir sanasini o'zbekcha mahalliy formatda ko'rsating (Intl — 2.7).
6. To'plam amallari (Set): ikki tadbir ishtirokchilarining umumiy (kesishma) va faqat birida bo'lganlarni toping 2.3-bob.
7. Cache (Map): "qimmat" hisobni (masalan yosh) Map'da cache'lang — ikkinchi so'rovda qayta hisoblamasin (Misol 4).
8. (Bonus) Tadbirlarni sana bo'yicha tartiblang (sort + getTime — 2.8).

Maslahatlar (hint)

• Dublikat: [...new Set(arr)].
• Teg sanog'i: map.set(teg, (map.get(teg) || 0) + 1) (Misol 1).
• Eng mashhur: [...map.entries()].sort((a,b) => b[1]-a[1]).slice(0,3) 2.7-bob.
• Qolgan kun: Math.ceil((sana - new Date()) / (1000*60*60*24)) 2.8-bob.
• Sana taqqoslashda getTime() (5-bo'lim).
• Cache: avval map.has(id) tekshiring, bo'lsa get, bo'lmasa hisoblab set.

"Tayyor" mezonlari (acceptance criteria)

• Noyob tashrif Set bilan to'g'ri.
• Teg sanog'i Map bilan; eng mashhur 3 teg.
• Kategoriya guruhi Map bilan.
• Qolgan kunlar to'g'ri hisoblanadi; o'tganlar ajratilgan.
• Sana o'zbekcha formatda (Intl/toLocaleDateString).
• Kesishma/farq to'plam amallari ishlaydi.
• Cache ikkinchi so'rovda qayta hisoblamaydi.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda uch maxsus tuzilmani o'rgandik:

• Map — har qanday kalitli, tartibli, oson sanaladigan kalit-qiymat to'plami; dinamik/tez o'zgaradigan ma'lumot uchun obyektdan afzal.
• Set — takrorlanmas qiymatlar; [...new Set(arr)] — dublikat tozalashning klassik usuli; to'plam amallari.
• Date — sana/vaqt; oy 0 dan (tuzoq!), ISO format ishonchli; getTime() bilan taqqoslash/hisoblash; Intl/toLocaleString bilan formatlash.
• Performance: Set/Map — tez qidiruv (O(1) — 3.1).

Keyingi bob — 2.10-bob: OOP — class, constructor, inheritance, encapsulation, polymorphism, getter/setter, static. 2.5-bobda prototype'ni xom ko'rdik; endi uning chiroyli yuzasi — class sintaksisi va to'liq OOP (obyektga yo'naltirilgan dasturlash) ni o'rganamiz. Bu — katta loyihalarni tashkil qilishning asosiy usullaridan biri.

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — Map, Set (metodlar, iteratsiya)
• MDN Web Docs — Date (yaratish, get/format metodlari), Intl.DateTimeFormat
• MDN Web Docs — Keyed collections, Set operations