JavaScript obyekt bo'ylab yurish: for...in, Object.keys, values va entries

Qisqacha: Obyektni to'g'ridan-to'g'ri for...of bilan aylanib bo'lmaydi. Uni avval massivga aylantirasiz: Object.keys(obj) — kalitlar, Object.values(obj) — qiymatlar, Object.entries(obj) — [kalit, qiymat] juftliklari. Object.fromEntries esa juftliklardan qaytadan obyekt yasaydi. Son ko'rinishidagi kalitlar doim birinchi va o'sish tartibida keladi.

Bu darsda

• for...in da o'z va meros kalitlarni ajrata olasiz.
• Object.keys, Object.values, Object.entries bilan obyektni massivga aylantirasiz.
• Juftliklar bo'ylab yurib, kalit va qiymat bilan birga ishlay olasiz.
• Object.fromEntries bilan o'zgartirilgan yangi obyekt yasay olasiz.
• Kalitlar qanday tartibda kelishini oldindan ayta olasiz.

Oldin bilishingiz kerak: for...of va for...in, Massiv bo'ylab yurish, Obyekt: kalit-qiymat juftliklari, Shorthand, computed kalitlar va metodlar.

1. Nega bu kerak?

Oldingi darsda obyektni qisqa yozishni va unga metod qo'shishni o'rgandik. Endi boshqa savol: obyekt ichidagi hamma ma'lumot bilan qanday ishlaymiz?

Siz choyxonaning menyusini obyektda saqlayapsiz:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000, non: 4000 };

Egasi so'raydi: "Menyuda nechta taom bor? Hammasi qo'shilsa qancha bo'ladi? Eng qimmati qaysi?" Har bir savol uchun barcha taomlarni birma-bir ko'rib chiqish kerak.

Massivda buning yo'li tayyor: for...of yozasiz — tamom. Lekin for...of darsida ko'rganingizdek, oddiy obyekt uchun u ishlamaydi:

const menyu = { osh: 35000, lagmon: 30000 };

for (const narx of menyu) {
  console.log(narx);
}

TypeError: menyu is not iterable

Tarjimasi: "menyu — aylanib chiqsa bo'ladigan narsa emas". Bu darsda obyektni aylanishning to'rtta usulini o'rganamiz. Ulardan uchtasi obyektni massivga aylantiradi. Massiv bilan ishlashni esa allaqachon bilasiz.

2. for...in va meros kalitlar

2.1 Qisqa eslatma

for...in ni for...of va for...in darsida ko'rgansiz. U obyektning har bir kaliti bo'ylab yuradi, qiymatni esa kvadrat qavs bilan olasiz:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

for (const kalit in menyu) {
  console.log(`${kalit}: ${menyu[kalit]} so'm`);
}

Konsolda:

osh: 35000 so'm
lagmon: 30000 so'm
choy: 5000 so'm

O'sha darsda bir tuzoqni ham ko'rgan edik: for...in obyektning o'z kalitlaridan tashqari meros kalitlarni ham chiqaradi. Endi buni obyektda ko'raylik.

2.2 O'z va meros kalit

JavaScript'da obyekt boshqa obyektdan xususiyatlarni meros qilib olishi mumkin. Buning qanday ishlashini prototip darsida o'rganamiz. Hozir faqat natijaga qarang. Object.create(asos) — asos dan meros oluvchi yangi obyekt yaratadi (u haqda Object.create darsida):

const standart = { valyuta: "so'm" };

const buyurtma = Object.create(standart);
buyurtma.taom = "osh";
buyurtma.soni = 2;

console.log(buyurtma.valyuta); // so'm

for (const kalit in buyurtma) {
  console.log(kalit);
}

Konsolda:

so'm
taom
soni
valyuta

buyurtma ga biz faqat taom va soni ni qo'shdik. valyuta esa unda yo'q — u standart dan "meros" keldi. Shunga qaramay buyurtma.valyuta ishlaydi va for...in uni ham chiqaradi.

Hayotdan o'xshatish: yangi xonadonga ko'chdingiz. Xonadagi o'z buyumlaringiz — sizniki. Oldingi egadan qolgan shkaf ham xonada turibdi, uni ishlatasiz ham. Lekin "mening buyumlarim ro'yxati"ga uni yozmaysiz.

2.3 Object.hasOwn bilan filtr

"Bu kalit obyektning o'zinikimi?" degan savolga obyekt darsidan tanish Object.hasOwn javob beradi. for...in ichida uni filtr sifatida ishlatish mumkin:

const standart = { valyuta: "so'm" };

const buyurtma = Object.create(standart);
buyurtma.taom = "osh";
buyurtma.soni = 2;

for (const kalit in buyurtma) {
  if (Object.hasOwn(buyurtma, kalit)) {
    console.log(kalit);
  }
}

Konsolda:

taom
soni

Endi faqat o'z kalitlar chiqdi. Eski kodlarda bu naqshni juda ko'p ko'rasiz. Lekin keyingi bo'limdagi usul ancha qisqa.

Tekshirib ko'ring: Yuqoridagi buyurtma uchun "valyuta" in buyurtma va Object.hasOwn(buyurtma, "valyuta") nima qaytaradi?

3. Object.keys: kalitlar massivi

3.1 Obyektdan massivga

Object.keys(obyekt) obyektning o'z kalitlarini massiv qilib beradi:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000, non: 4000 };

const kalitlar = Object.keys(menyu);

console.log(kalitlar); // [ 'osh', 'lagmon', 'choy', 'non' ]

Natija — oddiy massiv. Unda length, includes, for...of, forEach — massiv darslaridagi hamma narsa ishlaydi.

E'tibor bering: yozuv menyu.keys() emas, Object.keys(menyu). keys — obyektingizning metodi emas. U JavaScript'ning tayyor Object obyektiga tegishli, sizning obyektingizni esa unga argument qilib berasiz.

Object.keys meros kalitlarni bermaydi — faqat o'zinikilarini. Shuning uchun hasOwn filtri kerak bo'lmaydi.

3.2 Nechta xususiyat bor?

Obyektda length yo'q. Xususiyatlar sonini bilish uchun kalitlar massivining uzunligi olinadi:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000, non: 4000 };

console.log(menyu.length); // undefined
console.log(Object.keys(menyu).length); // 4

Xuddi shu usul bilan obyekt bo'shmi yoki yo'qligini tekshirish mumkin:

const savat = {};

if (Object.keys(savat).length === 0) {
  console.log("Savat bo'sh");
}

Konsolda:

Savat bo'sh

Nega if (savat) yetmaydi? Chunki truthy/falsy darsida ko'rganingizdek, bo'sh obyekt {} ham truthy. if (savat) doim bajariladi.

3.3 Kalitlar bo'ylab yurish

Endi kalitlar massivini odatdagi for...of bilan aylanamiz:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

for (const kalit of Object.keys(menyu)) {
  console.log(`${kalit} — ${menyu[kalit]} so'm`);
}

Konsolda:

osh — 35000 so'm
lagmon — 30000 so'm
choy — 5000 so'm

Natija for...in bilan bir xil, lekin meros kalitlar tuzog'i yo'q. Shuning uchun zamonaviy kodda obyekt bo'ylab yurish ko'pincha Object.keys (yoki keyingi ikki usul) bilan yoziladi.

forEach bilan ham yozsa bo'ladi: Object.keys(menyu).forEach((kalit) => { ... }).

O'zingiz to'ldiring: Object.keys({ ism: "Ali", yosh: 20 }) — ["ism", ""] massivini beradi. Object.keys({}).length esa ga teng.

Tekshirib ko'ring: const t = { ism: "Nodira", kurs: 3 }; bo'lsa, Object.keys(t).includes("kurs") nima qaytaradi?

4. Object.values: qiymatlar massivi

Ba'zan kalitlar kerak emas — faqat qiymatlar. Masalan, menyudagi hamma narsaning jami narxi:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000, non: 4000 };

const narxlar = Object.values(menyu);
console.log(narxlar); // [ 35000, 30000, 5000, 4000 ]

let jami = 0;
for (const narx of narxlar) {
  jami += narx;
}

console.log(jami); // 74000

Object.values o'z qiymatlarni kalitlar bilan bir xil tartibda beradi. Qiymatning o'zi kerak bo'lganda — eng qisqa yo'l.

Massiv bo'lgani uchun qidirish metodlari ham ishlaydi. Masalan, 30 000 so'mdan qimmat taom bormi?

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

const qimmatBor = Object.values(menyu).some((narx) => narx > 30000);

console.log(qimmatBor); // true

some — massivda qidirish darsidan: kamida bitta element shartga mos kelsa true.

Tekshirib ko'ring: Object.values({ a: 1, b: 2 }) bilan Object.keys({ a: 1, b: 2 }) ning farqi nima?

5. Object.entries: kalit va qiymat birga

5.1 Juftliklar massivi

Ko'pincha ikkalasi ham kerak: taom nomi va narxi. Buning uchun Object.entries:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

console.log(Object.entries(menyu));

Konsolda:

[ [ 'osh', 35000 ], [ 'lagmon', 30000 ], [ 'choy', 5000 ] ]

Natija — massivlar massivi. Har bir ichki massiv ikki elementli: 0-indeksda kalit, 1-indeksda qiymat. Bunday ikki elementli massiv juftlik (entry) deb ataladi.

5.2 Juftliklar bo'ylab yurish

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

for (const juft of Object.entries(menyu)) {
  const kalit = juft[0];
  const narx = juft[1];
  console.log(`${kalit}: ${narx} so'm`);
}

Konsolda:

osh: 35000 so'm
lagmon: 30000 so'm
choy: 5000 so'm

Endi menyu[kalit] deb qayta qidirish shart emas: kalit ham, qiymat ham qo'lingizda.

Real kodda bu sikl ko'pincha qisqaroq yoziladi:

const menyu = { osh: 35000, lagmon: 30000 };

for (const [kalit, narx] of Object.entries(menyu)) {
  console.log(`${kalit}: ${narx} so'm`);
}

Konsolda:

osh: 35000 so'm
lagmon: 30000 so'm

[kalit, narx] — "juftlikning 0-elementini kalit ga, 1-elementini narx ga qo'y" degani. Bu destructuring yozuvini massiv bo'ylab yurish darsida entries() bilan ko'rgan edik. Uni Massiv destructuring darsida to'liq o'rganamiz. Hozircha juft[0], juft[1] usuli yetarli — ikkalasi bir xil ishlaydi.

5.3 Misol: eng qimmat taom

Kalit ham, qiymat ham kerak bo'lgan klassik masala — eng katta qiymatli kalitni topish:

const menyu = { osh: 35000, lagmon: 30000, somsa: 8000 };

let engQimmat = "";
let engKattaNarx = 0;

for (const juft of Object.entries(menyu)) {
  if (juft[1] > engKattaNarx) {
    engKattaNarx = juft[1];
    engQimmat = juft[0];
  }
}

console.log(`${engQimmat}: ${engKattaNarx} so'm`); // osh: 35000 so'm

Har qadamda narxni hozirgacha eng kattasi bilan solishtiramiz. Kattaroq chiqsa — ham nomini, ham narxini eslab qolamiz. Object.values bilan faqat narxni topgan bo'lardik, nomini emas.

Tekshirib ko'ring: Object.entries({ shahar: "Xiva" }) nima qaytaradi?

6. Object.fromEntries: juftliklardan obyekt

6.1 Teskari yo'l

Object.entries obyektni juftliklarga ajratadi. Object.fromEntries esa aksini qiladi — juftliklardan obyekt yig'adi:

const juftlar = [["non", 4000], ["choy", 5000]];

const menyu = Object.fromEntries(juftlar);

console.log(menyu); // { non: 4000, choy: 5000 }

Bu nega kerak? Chunki endi obyektni o'zgartirilgan nusxa qilib qayta yasash mumkin: ajratamiz → har juftlik bilan ishlaymiz → qaytadan yig'amiz.

6.2 Misol: hamma narxga 10% chegirma

const menyu = { osh: 35000, lagmon: 30000, choy: 5000 };

const yangiJuftlar = [];
for (const juft of Object.entries(menyu)) {
  yangiJuftlar.push([juft[0], juft[1] * 0.9]);
}

const chegirmali = Object.fromEntries(yangiJuftlar);

console.log(chegirmali); // { osh: 31500, lagmon: 27000, choy: 4500 }
console.log(menyu); // { osh: 35000, lagmon: 30000, choy: 5000 }

Uch qadam:

1. Object.entries(menyu) — obyektni juftliklarga ajratdik.
2. Sikl ichida har juftlikdan yangi juftlik yasab, push bilan yangi massivga qo'shdik.
3. Object.fromEntries — yangi juftliklardan yangi obyekt yig'dik.

E'tibor bering: asl menyu o'zgarmadi. Biz yangi obyekt yasadik. Nega bu muhimligini keyingi darsda ko'ramiz.

6.3 Misol: faqat arzon taomlar

Xuddi shu yo'l bilan juftliklarni tanlab olish ham mumkin:

const menyu = { osh: 35000, lagmon: 30000, choy: 5000, non: 4000 };

const arzonlar = [];
for (const juft of Object.entries(menyu)) {
  if (juft[1] <= 10000) {
    arzonlar.push(juft);
  }
}

const arzonMenyu = Object.fromEntries(arzonlar);
console.log(arzonMenyu); // { choy: 5000, non: 4000 }

Maslahat: entries → o'zgartirish → fromEntries — obyektni qayta ishlashning mashhur naqshi. Hozir uni sikl bilan yozdik. Keyingi qismda map va filter metodlarini o'rgangach, xuddi shu ish bitta qatorga tushadi.

O'zingiz to'ldiring: Object.fromEntries([["ism", "Ali"]]) — { ism: "" } obyektini beradi.

7. Kalitlar tartibi

7.1 Kutilmagan tartib

Mobil operator kodlarini obyektda saqlaylik. Kalitlarni xohlagan tartibda yozdik:

const operatorlar = {
  "99": "Uzmobile",
  "90": "Beeline",
  "33": "Humans",
  "97": "Mobiuz",
};

console.log(Object.keys(operatorlar)); // [ '33', '90', '97', '99' ]

Kalitlar biz yozgan tartibda emas, o'sish tartibida chiqdi! Xato yo'q — bu JavaScript'ning qoidasi.

7.2 Qoida

Obyekt kalitlari (for...in, Object.keys, values, entries — hammasida) quyidagi tartibda keladi:

1. Avval butun son ko'rinishidagi kalitlar — o'sish tartibida ("1", "2", "10").
2. Keyin qolgan satr kalitlar — qo'shilgan tartibda.

Oddiy so'z kalitlarda (osh, lagmon) siz hech qachon farqni sezmaysiz — ular yozilgan tartibda turadi. Tuzoq faqat son ko'rinishidagi kalitlarda:

const aralash = { b: 1, 2: "ikki", a: 2, 1: "bir" };

console.log(Object.keys(aralash)); // [ '1', '2', 'b', 'a' ]

1 va 2 oldinga o'tdi va saralandi. b va a esa yozilgan tartibda qoldi — alifbo bo'yicha saralanmadi.

"Butun son ko'rinishidagi" deganda 0, 1, 25 kabi, oldida nolsiz, musbat butun sonlar tushuniladi. "01", "-1", "1.5", "+998" — oddiy satr hisoblanadi va qo'shilgan tartibda qoladi.

Diqqat: Tartib muhim bo'lsa (masalan, reyting, navbat), obyektga ishonmang. Tartiblangan ro'yxat uchun massiv ishlating. Yoki kalitlar tartibini aniq saqlaydigan Map ni — uni Map darsida o'rganamiz.

Maslahat: Kalit sifatida symbol turi ham ishlatilishi mumkin. Bu to'rt usulning birortasi ham symbol kalitlarni ko'rsatmaydi. Symbol haqida Symbol darsida — hozir bilish shart emas.

Tekshirib ko'ring: Object.keys({ z: 1, 5: 1, a: 1, 3: 1 }) nima qaytaradi?

8. Qaysi usulni qachon tanlash kerak?

Object.fromEntries — teskari yo'l: juftliklardan obyekt. To'rtta usulning hammasi faqat sanaladigan (enumerable) kalitlarni ko'rsatadi — for...in darsida ko'rgan tushuncha. O'zingiz qo'shgan kalitlar doim sanaladigan bo'ladi.

Maslahat: Object.keys har safar yangi massiv qaytaradi — o'sha paytdagi kalitlarning "surati". Shuning uchun sikl ichida obyektdan kalit o'chirsangiz ham (delete), sikl buzilmaydi: u oldindan olingan ro'yxat bo'ylab yuradi.

9. Ko'p uchraydigan xatolar

9.1 obyekt.keys() deb yozish

const menyu = { osh: 35000 };

console.log(menyu.keys());

TypeError: menyu.keys is not a function

Tarjimasi: "menyu.keys — funksiya emas". Obyektingizda keys degan metod yo'q, shuning uchun menyu.keys — undefined, uni esa chaqirib bo'lmaydi. To'g'risi: Object.keys(menyu). Massivdagi mevalar.keys() dan (massiv bo'ylab yurish darsi) farqli, obyekt uchun metod Object da turadi.

9.2 undefined ni berib yuborish

const foydalanuvchi = { ism: "Ali" };

console.log(Object.keys(foydalanuvchi.sozlamalar));

TypeError: Cannot convert undefined or null to object

Tarjimasi: "undefined yoki null ni obyektga aylantirib bo'lmaydi". foydalanuvchi.sozlamalar yo'q, demak undefined. Object.keys esa obyekt kutgan edi. Ma'lumot kelmasligi mumkin bo'lsa, ?? operatori bilan bo'sh obyekt bering: Object.keys(foydalanuvchi.sozlamalar ?? {}) — xato o'rniga [] qaytadi.

9.3 Kalitni son deb o'ylash

const xonalar = { 101: "bo'sh", 102: "band" };

const birinchi = Object.keys(xonalar)[0];

console.log(birinchi + 1); // 1011

102 kutilgan edi, 1011 chiqdi. Obyekt kaliti doim satr: "101" + 1 — yopishtirish. Son kerak bo'lsa, aniq aylantiring: Number(birinchi) + 1.

9.4 Son kalitlar tartibiga ishonish

Yuqoridagi operator kodlari misolidagidek, "2024", "2023", "2025" kabi yil kalitlari ham saralanib ketadi. Tartib muhim bo'lsa — massiv yoki Map.

10. Mashqlar

1-mashq (oson): Oylik xarajat

const xarajatlar = {
  ijara: 2500000,
  oziqOvqat: 1800000,
  transport: 400000,
  internet: 150000,
};

Ikki narsani konsolga chiqaring: nechta xarajat turi borligini va jami summani.

Ishora: turlar soni — Object.keys(...).length. Summa uchun Object.values va for...of bilan yig'indi hisoblang.

const xarajatlar = {
  ijara: 2500000,
  oziqOvqat: 1800000,
  transport: 400000,
  internet: 150000,
};

console.log(Object.keys(xarajatlar).length); // 4

let jami = 0;
for (const summa of Object.values(xarajatlar)) {
  jami += summa;
}

console.log(jami); // 4850000

2-mashq (o'rta): Imtihon natijalari

const natijalar = { Ali: 85, Malika: 92, Jasur: 67, Nodira: 74 };

Har bir talaba uchun Ali: 85 — o'tdi yoki Jasur: 67 — qayta topshiradi qatorini chiqaring (o'tish bali — 70). Oxirida nechta talaba o'tganini chiqaring.

Ishora: Object.entries bo'ylab yuring, ism — juft[0], ball — juft[1]. Holat uchun ternary yoki if ishlating.

const natijalar = { Ali: 85, Malika: 92, Jasur: 67, Nodira: 74 };
let otganlar = 0;

for (const juft of Object.entries(natijalar)) {
  const ism = juft[0];
  const ball = juft[1];
  const holat = ball >= 70 ? "o'tdi" : "qayta topshiradi";
  console.log(`${ism}: ${ball} — ${holat}`);
  if (ball >= 70) {
    otganlar++;
  }
}

console.log(`O'tganlar: ${otganlar} ta`);

Ali: 85 — o'tdi
Malika: 92 — o'tdi
Jasur: 67 — qayta topshiradi
Nodira: 74 — o'tdi
O'tganlar: 3 ta

3-mashq (qiyin): Sayohat uchun ovoz berish

Sinf qaysi shaharga sayohatga borishini ovoz berib tanladi:

const ovozlar = {
  Toshkent: 120,
  Samarqand: 95,
  Buxoro: 130,
  Xiva: 60,
};

Uch narsani hisoblang:

1. Jami ovozlar soni.
2. G'olib shahar (eng ko'p ovoz olgan).
3. Yangi foizlar obyekti: har shahar uchun ovozlarning necha foizi, butun songa yaxlitlangan. Masalan, Toshkent uchun Math.round(120 / 405 * 100).

Ishora: foizlar uchun juftliklar massivini yig'ib, Object.fromEntries ishlating. Yaxlitlash — Math obyekti darsidagi Math.round.

const ovozlar = {
  Toshkent: 120,
  Samarqand: 95,
  Buxoro: 130,
  Xiva: 60,
};

// 1. Jami
let jami = 0;
for (const son of Object.values(ovozlar)) {
  jami += son;
}

// 2. G'olib
let golib = "";
let engKop = 0;
for (const juft of Object.entries(ovozlar)) {
  if (juft[1] > engKop) {
    engKop = juft[1];
    golib = juft[0];
  }
}

// 3. Foizlar
const juftlar = [];
for (const juft of Object.entries(ovozlar)) {
  const foiz = Math.round((juft[1] / jami) * 100);
  juftlar.push([juft[0], foiz]);
}
const foizlar = Object.fromEntries(juftlar);

console.log(jami);
console.log(golib);
console.log(foizlar);

405
Buxoro
{ Toshkent: 30, Samarqand: 23, Buxoro: 32, Xiva: 15 }

11. Real ishda

• Serverdan kelgan ma'lumot. API (dasturlar bir-biri bilan gaplashadigan "eshik") ko'pincha obyekt qaytaradi. Uni sahifada jadval qilib chiqarish uchun Object.entries bilan aylanasiz.
• Statistika va hisobotlar. "Har kategoriya bo'yicha nechta buyurtma", "har viloyat bo'yicha savdo" — hammasi obyektda saqlanadi va Object.values/entries bilan hisoblanadi.
• React. Obyektdagi ma'lumotdan ro'yxat chizishda Object.entries(obyekt).map(...) naqshi juda ko'p uchraydi.
• Sozlamalar. Dastur sozlamalari obyektida hamma kalit to'g'ri yozilganini Object.keys bilan tekshirish mumkin.

Intervyuda "for...in va Object.keys farqi nima?" deb so'rashadi. Javob: "for...in meros kalitlarni ham beradi, Object.keys — faqat obyektning o'zinikini, va natijani massiv qilib beradi". Tajribali dasturchilarga "kalitlar qaysi tartibda keladi?" degan savol ham beriladi.

Xulosa

• Oddiy obyekt for...of bilan aylanmaydi — avval massivga aylantiriladi.
• for...in meros kalitlarni ham beradi; filtr — Object.hasOwn.
• Object.keys — kalitlar, Object.values — qiymatlar, Object.entries — [kalit, qiymat] juftliklari. Hammasi faqat o'z kalitlar bilan ishlaydi.
• Object.fromEntries — juftliklardan yangi obyekt; entries → o'zgartirish → fromEntries naqshi asl obyektga tegmaydi.
• Son ko'rinishidagi kalitlar birinchi va o'sish tartibida, qolganlari — qo'shilgan tartibda.
• Xususiyatlar soni: Object.keys(obj).length.

Keyingi dars: Havola semantikasi: nega nusxa o'zgarib ketdi? — obyekt va massiv o'zgaruvchida qanday saqlanishini va "nusxa" nima uchun ba'zan asl nusxani ham o'zgartirib yuborishini ko'ramiz.