8-bo‘lim
Obyektlar
Obyekt yaratish, xossalarga murojaat, metodlar va this, destrukturizatsiya, spread, Object metodlari va JSON.
Ushbu bo‘lim mundarijasi
Massiv tartiblangan ro'yxat bo'lsa, obyekt - nomlangan xossalar to'plami. Haqiqiy dunyodagi narsalarni shunday tasvirlaymiz.
Obyekt yaratish #
const talaba = {
ism: "Husanboy",
familiya: "Qodirov",
yosh: 25,
shahar: "Namangan",
faol: true,
fanlar: ["JavaScript", "Python"]
};
console.log("Nuqta bilan :", talaba.ism);
console.log("Qavs bilan :", talaba["familiya"]);
console.log("Massiv xossa:", talaba.fanlar[0]);
console.log("Yo'q xossa :", talaba.telefon);
console.log("Xossalar soni:", Object.keys(talaba).length);
Nuqta bilan : Husanboy
Qavs bilan : Qodirov
Massiv xossa: JavaScript
Yo'q xossa : undefined
Xossalar soni: 6
Nuqta - xossa nomi oldindan ma'lum bo'lganda:
talaba.ism
Kvadrat qavs - nom o'zgaruvchida bo'lganda yoki nomda bo'shliq/maxsus belgi bo'lganda:
const kalit = "ism";
talaba[kalit] // "Husanboy"
const sozlama = { "asosiy rang": "ko'k" };
sozlama["asosiy rang"] // nuqta bilan mumkin emas
Eng ko'p uchraydigan xato:
talaba.kalit // "kalit" nomli xossani qidiradi - undefined
talaba[kalit] // o'zgaruvchining qiymatini ishlatadi
Xossa qo'shish va o'chirish #
const mahsulot = { nom: "Noutbuk", narx: 8000000 };
mahsulot.rang = "kulrang"; // qo'shish
mahsulot["ishlab_chiqaruvchi"] = "Asus";
mahsulot.narx = 7500000; // o'zgartirish
console.log(mahsulot);
delete mahsulot.rang; // o'chirish
console.log("O'chirilgandan keyin:", Object.keys(mahsulot));
console.log("narx bormi? :", "narx" in mahsulot);
console.log("rang bormi? :", "rang" in mahsulot);
console.log("hasOwn :", Object.hasOwn(mahsulot, "nom"));
{
nom: 'Noutbuk',
narx: 7500000,
rang: 'kulrang',
ishlab_chiqaruvchi: 'Asus'
}
O'chirilgandan keyin: [ 'nom', 'narx', 'ishlab_chiqaruvchi' ]
narx bormi? : true
rang bormi? : false
hasOwn : true
Metodlar va this #
const hisob = {
egasi: "Nodira",
qoldiq: 500000,
kirim(summa) {
this.qoldiq += summa;
return this; // zanjir uchun
},
chiqim(summa) {
if (summa > this.qoldiq) {
console.log("Mablag' yetarli emas");
return this;
}
this.qoldiq -= summa;
return this;
},
korsat() {
console.log(`${this.egasi}: ${this.qoldiq} so'm`);
return this;
}
};
hisob.kirim(200000).chiqim(150000).korsat();
hisob.chiqim(10000000).korsat();
Nodira: 550000 so'm
Mablag' yetarli emas
Nodira: 550000 so'm
this chaqirish usuliga bog'liqthis funksiya qanday chaqirilganiga qarab aniqlanadi, u
qayerda yozilganiga emas.
const talaba = {
ism: "Malika",
salom() {
return `Men ${this.ism}`;
}
};
console.log(talaba.salom()); // "Men Malika"
const ajratilgan = talaba.salom;
console.log(ajratilgan()); // "Men undefined" (!)
Metodni obyektdan ajratganingizda this yo'qoladi. Bu
callback uzatganda tez-tez uchraydi:
setTimeout(talaba.salom, 100); // this yo'qoladi
Uch yechim:
setTimeout(() => talaba.salom(), 100); // arrow o'raydi
setTimeout(talaba.salom.bind(talaba), 100); // bind bog'laydi
bind yangi funksiya qaytaradi, this esa doimiy qilib
biriktiriladi.
Destrukturizatsiya #
const foydalanuvchi = {
ism: "Aziza",
yosh: 24,
manzil: { shahar: "Andijon", kocha: "Navoiy" }
};
// Asosiy shakl
const { ism, yosh } = foydalanuvchi;
console.log(ism, yosh);
// Nomni o'zgartirish
const { ism: toliqIsm } = foydalanuvchi;
console.log("Yangi nom:", toliqIsm);
// Standart qiymat
const { telefon = "ko'rsatilmagan" } = foydalanuvchi;
console.log("Telefon:", telefon);
// Ichma-ich
const { manzil: { shahar } } = foydalanuvchi;
console.log("Shahar:", shahar);
// Massivda
const [birinchi, , uchinchi] = ["a", "b", "c"];
console.log("Massivdan:", birinchi, uchinchi);
// Almashtirish
let x = 1, y = 2;
[x, y] = [y, x];
console.log("Almashtirildi:", x, y);
Aziza 24
Yangi nom: Aziza
Telefon: ko'rsatilmagan
Shahar: Andijon
Massivdan: a c
Almashtirildi: 2 1
Ko'p parametrli funksiyani chaqirishda tartibni eslash qiyin:
yaratish("Kamola", 21, "Farg'ona", true, false); // nima nima?
Obyekt parametri bilan ancha aniq:
function yaratish({ ism, yosh, shahar, faol = true }) {
return `${ism}, ${yosh}, ${shahar}, ${faol}`;
}
yaratish({ ism: "Kamola", yosh: 21, shahar: "Farg'ona" });
Afzalliklari:
- Tartib muhim emas;
- Har argument nima ekani ko'rinib turadi;
- Standart qiymat berish oson;
- Yangi parametr qo'shish eski chaqiruvlarni buzmaydi.
React va zamonaviy kutubxonalar deyarli hamma joyda shu naqshni ishlatadi.
Spread bilan nusxalash va birlashtirish #
const asosiy = { ism: "Dilnoza", yosh: 26 };
const qoshimcha = { shahar: "Toshkent", yosh: 27 };
const nusxa = { ...asosiy };
const birlashgan = { ...asosiy, ...qoshimcha };
const ozgartirilgan = { ...asosiy, yosh: 30 };
console.log("Nusxa :", nusxa);
console.log("Birlashgan :", birlashgan);
console.log("O'zgartirilgan:", ozgartirilgan);
// Rest - qolgan xossalar
const { ism, ...qolgani } = birlashgan;
console.log("Ism :", ism);
console.log("Qolgani :", qolgani);
Nusxa : { ism: 'Dilnoza', yosh: 26 }
Birlashgan : { ism: 'Dilnoza', yosh: 27, shahar: 'Toshkent' }
O'zgartirilgan: { ism: 'Dilnoza', yosh: 30 }
Ism : Dilnoza
Qolgani : { yosh: 27, shahar: 'Toshkent' }
{ ...asosiy, ...qoshimcha }
Ikkalasida yosh bor edi - oxirgisi g'alaba qozondi (27).
Tartibni o'zgartirsangiz natija ham o'zgaradi:
{ ...qoshimcha, ...asosiy } // yosh: 26
Bu standart qiymat berishda juda qulay:
function sozlash(foydalanuvchiSozlamasi) {
const standart = { til: "uz", rejim: "yorug'", hajm: 14 };
return { ...standart, ...foydalanuvchiSozlamasi };
}
Foydalanuvchi bergan qiymatlar standartni bosib o'tadi, u bermaganlari esa standart bo'lib qoladi.
Diqqat: spread ham sayoz nusxa - ichki obyektlar ulashiladi (6-bo'limdagi kabi).
Object metodlari #
const ballar = { matematika: 90, fizika: 75, ingliz: 85 };
console.log("keys :", Object.keys(ballar));
console.log("values :", Object.values(ballar));
console.log("entries:", Object.entries(ballar));
// entries bilan aylanish
for (const [fan, ball] of Object.entries(ballar)) {
console.log(` ${fan.padEnd(12)} ${ball}`);
}
// Massiv metodlarini qo'llash
const jami = Object.values(ballar).reduce((a, b) => a + b, 0);
console.log("O'rtacha:", (jami / Object.keys(ballar).length).toFixed(1));
// Obyektga qaytarish
const oshirilgan = Object.fromEntries(
Object.entries(ballar).map(([fan, ball]) => [fan, ball + 5])
);
console.log("Oshirilgan:", oshirilgan);
keys : [ 'matematika', 'fizika', 'ingliz' ]
values : [ 90, 75, 85 ]
entries: [ [ 'matematika', 90 ], [ 'fizika', 75 ], [ 'ingliz', 85 ] ]
matematika 90
fizika 75
ingliz 85
O'rtacha: 83.3
Oshirilgan: { matematika: 95, fizika: 80, ingliz: 90 }
Ichma-ich obyektlar #
const kompaniya = {
nom: "Softromeda",
manzil: {
shahar: "Namangan",
kocha: { nomi: "Navoiy", uy: 12 }
},
xodimlar: [
{ ism: "Husanboy", lavozim: "dasturchi" },
{ ism: "Malika", lavozim: "dizayner" }
]
};
console.log("Chuqur murojaat:", kompaniya.manzil.kocha.nomi);
console.log("Massivdan :", kompaniya.xodimlar[1].ism);
// Xavfsiz murojaat
console.log("Mavjud emas :", kompaniya.moliya?.byudjet);
console.log("Standart bilan :", kompaniya.moliya?.byudjet ?? 0);
// Xodimlar ro'yxati
const lavozimlar = kompaniya.xodimlar.map((x) => `${x.ism} (${x.lavozim})`);
console.log("Xodimlar :", lavozimlar.join(", "));
Chuqur murojaat: Navoiy
Massivdan : Malika
Mavjud emas : undefined
Standart bilan : 0
Xodimlar : Husanboy (dasturchi), Malika (dizayner)
JSON bilan ishlash #
const talaba = {
ism: "Kamola",
yosh: 21,
fanlar: ["JS", "SQL"],
faol: true
};
const matn = JSON.stringify(talaba);
console.log("JSON matn:", matn);
console.log("Turi :", typeof matn);
const chiroyli = JSON.stringify(talaba, null, 2);
console.log(chiroyli);
const qaytadan = JSON.parse(matn);
console.log("Qayta o'qildi:", qaytadan.ism, qaytadan.yosh);
console.log("Teng obyektmi?:", qaytadan === talaba);
JSON matn: {"ism":"Kamola","yosh":21,"fanlar":["JS","SQL"],"faol":true}
Turi : string
{
"ism": "Kamola",
"yosh": 21,
"fanlar": [
"JS",
"SQL"
],
"faol": true
}
Qayta o'qildi: Kamola 21
Teng obyektmi?: false
const obyekt = {
sana: new Date("2026-01-01"),
aniqlanmagan: undefined,
funksiya: () => "salom",
cheksiz: Infinity,
sonEmas: NaN
};
console.log(JSON.stringify(obyekt));
{"sana":"2026-01-01T00:00:00.000Z","cheksiz":null,"sonEmas":null}
Nima bo'ldi:
| Qiymat | JSON dan keyin |
|---|---|
Date | Satrga aylandi - qayta o'qiganda Date emas |
undefined | Butunlay yo'qoldi |
| Funksiya | Butunlay yo'qoldi |
Infinity, NaN | null bo'ldi |
Map, Set | Bo'sh obyekt {} |
Shuning uchun JSON.parse(JSON.stringify(x)) chuqur nusxa
sifatida ishonchsiz - structuredClone ishlating.
Sanani qayta tiklash uchun JSON.parse ning ikkinchi
argumentidan foydalaning:
JSON.parse(matn, (kalit, qiymat) =>
kalit === "sana" ? new Date(qiymat) : qiymat
);
Obyektlarni taqqoslash #
const a = { son: 1 };
const b = { son: 1 };
const c = a;
console.log("a === b :", a === b);
console.log("a === c :", a === c);
// To'g'ri taqqoslash - JSON orqali (oddiy holatlar uchun)
console.log("JSON bilan:", JSON.stringify(a) === JSON.stringify(b));
// Xossalarni solishtirish
function tengmi(x, y) {
const kalitlarX = Object.keys(x);
const kalitlarY = Object.keys(y);
if (kalitlarX.length !== kalitlarY.length) {
return false;
}
return kalitlarX.every((k) => x[k] === y[k]);
}
console.log("Funksiya bilan:", tengmi(a, b));
a === b : false
a === c : true
JSON bilan: true
Funksiya bilan: true
=== ikki obyektning ichini emas, xotiradagi manzilini
solishtiradi.
{ a: 1 } === { a: 1 } // false - ikki alohida obyekt
JSON.stringify orqali taqqoslash oddiy holatlarda ishlaydi,
lekin ikki kamchiligi bor:
- Xossalar tartibi muhim:
JSON.stringify({a:1, b:2}) === JSON.stringify({b:2, a:1}) // false - Yuqoridagi JSON cheklovlari (
Date,undefined) qo'llanadi.
Jiddiy loyihalarda chuqur taqqoslash uchun kutubxona ishlatiladi yoki rekursiv funksiya yoziladi.
- Obyekt yaratib, nuqta va qavs bilan murojaat qiling.
talaba.kalitvatalaba[kalit]farqini ko'rsating.- Xossa qo'shing, o'zgartiring va
deletebilan o'chiring. - Metod ichida
thisishlatib, zanjir tuzing. - Metodni ajratib olganda
thisyo'qolishini isbotlang. - Destrukturizatsiya bilan ism va yoshni ajrating.
- Funksiya parametrida obyekt destrukturizatsiyasini qo'llang.
- Spread bilan standart sozlamalarni birlashtiring.
Object.entriesvafromEntriesbilan barcha ballni oshiring.JSON.stringifyDatevaundefinedni qanday buzishini ko'ring.
Xulosa #
- Xossaga nuqta yoki kvadrat qavs bilan murojaat qilinadi.
- O'zgaruvchidagi kalit uchun faqat kvadrat qavs ishlaydi.
invaObject.hasOwnxossa mavjudligini tekshiradi.thisfunksiya qanday chaqirilganiga bog'liq.- Metodni ajratganda
thisyo'qoladi -bindyoki arrow. - Destrukturizatsiya kodni qisqartiradi va aniqlashtiradi.
- Funksiya parametrida obyekt ishlatish tartibni ahamiyatsiz qiladi.
- Spread da keyingi obyekt oldingisini bosib o'tadi.
Object.entriesobyektga massiv metodlarini qo'llash imkonini beradi.- JSON
Date,undefined, funksiya vaNaNni buzadi. - Obyektlar havola bo'yicha taqqoslanadi -
===ichini ko'rmaydi.
Keyingi bo'limda satrlar bilan ishlashni o'rganamiz.
O‘qish tarixini saqlamoqchimisiz?
Tizimga kirsangiz, tugatgan bo‘limlaringiz saqlanadi va qoldirgan joyingizdan davom etasiz.
Xatolik topdingizmi?
Imlo xatosi, ishlamaydigan kod yoki noto‘g‘ri ma‘lumotni ko‘rsangiz - bizga xabar bering. Har bir xabar administrator tomonidan ko‘rib chiqiladi.