8-bo‘lim

Obyektlar

Obyekt yaratish, xossalarga murojaat, metodlar va this, destrukturizatsiya, spread, Object metodlari va JSON.

🕑 18 daqiqa o‘qish 📄 552 so‘z 👁 1 marta ko‘rilgan
Ushbu bo‘lim mundarijasi
  1. Obyekt yaratish
  2. Xossa qo'shish va o'chirish
  3. Metodlar va this
  4. Destrukturizatsiya
  5. Spread bilan nusxalash va birlashtirish
  6. Object metodlari
  7. Ichma-ich obyektlar
  8. JSON bilan ishlash
  9. Obyektlarni taqqoslash
  10. Xulosa

Massiv tartiblangan ro'yxat bo'lsa, obyekt - nomlangan xossalar to'plami. Haqiqiy dunyodagi narsalarni shunday tasvirlaymiz.

Obyekt yaratish #

JavaScript
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);
Natija
Nuqta bilan : Husanboy
Qavs bilan  : Qodirov
Massiv xossa: JavaScript
Yo'q xossa  : undefined
Xossalar soni: 6
Nuqta yoki kvadrat qavs?

Nuqta - xossa nomi oldindan ma'lum bo'lganda:

JavaScript
talaba.ism

Kvadrat qavs - nom o'zgaruvchida bo'lganda yoki nomda bo'shliq/maxsus belgi bo'lganda:

JavaScript
const kalit = "ism";
talaba[kalit]              // "Husanboy"

const sozlama = { "asosiy rang": "ko'k" };
sozlama["asosiy rang"]     // nuqta bilan mumkin emas

Eng ko'p uchraydigan xato:

JavaScript
talaba.kalit               // "kalit" nomli xossani qidiradi - undefined
talaba[kalit]              // o'zgaruvchining qiymatini ishlatadi

Xossa qo'shish va o'chirish #

JavaScript
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"));
Natija
{
  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 #

JavaScript
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();
Natija
Nodira: 550000 so'm
Mablag' yetarli emas
Nodira: 550000 so'm
this chaqirish usuliga bog'liq

this funksiya qanday chaqirilganiga qarab aniqlanadi, u qayerda yozilganiga emas.

JavaScript
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:

JavaScript
setTimeout(talaba.salom, 100);      // this yo'qoladi

Uch yechim:

JavaScript
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 #

JavaScript
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);
Natija
Aziza 24
Yangi nom: Aziza
Telefon: ko'rsatilmagan
Shahar: Andijon
Massivdan: a c
Almashtirildi: 2 1
Destrukturizatsiya funksiya parametrida

Ko'p parametrli funksiyani chaqirishda tartibni eslash qiyin:

JavaScript
yaratish("Kamola", 21, "Farg'ona", true, false);   // nima nima?

Obyekt parametri bilan ancha aniq:

JavaScript
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 #

JavaScript
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);
Natija
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' }
Keyingi obyekt oldingisini bosib o'tadi
JavaScript
{ ...asosiy, ...qoshimcha }

Ikkalasida yosh bor edi - oxirgisi g'alaba qozondi (27).

Tartibni o'zgartirsangiz natija ham o'zgaradi:

JavaScript
{ ...qoshimcha, ...asosiy }    // yosh: 26

Bu standart qiymat berishda juda qulay:

JavaScript
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 #

JavaScript
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);
Natija
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 }
Obyektni massivga aylantirish Obyekt { a: 1, b: 2 } Massiv metodlari ishlamaydi entries fromEntries Massiv [["a",1], ["b",2]] map, filter, reduce hammasi mavjud Uchta metod Object.keys() Object.values() Object.entries() Obyektni qayta ishlashning standart yo'li - massivga o'tib, keyin qaytish
entries va fromEntries - obyekt bilan massiv o'rtasidagi ko'prik

Ichma-ich obyektlar #

JavaScript
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(", "));
Natija
Chuqur murojaat: Navoiy
Massivdan       : Malika
Mavjud emas     : undefined
Standart bilan  : 0
Xodimlar        : Husanboy (dasturchi), Malika (dizayner)

JSON bilan ishlash #

JavaScript
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);
Natija
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
JSON hamma narsani saqlay olmaydi
JavaScript
const obyekt = {
    sana: new Date("2026-01-01"),
    aniqlanmagan: undefined,
    funksiya: () => "salom",
    cheksiz: Infinity,
    sonEmas: NaN
};

console.log(JSON.stringify(obyekt));
Natija
{"sana":"2026-01-01T00:00:00.000Z","cheksiz":null,"sonEmas":null}

Nima bo'ldi:

QiymatJSON dan keyin
DateSatrga aylandi - qayta o'qiganda Date emas
undefinedButunlay yo'qoldi
FunksiyaButunlay yo'qoldi
Infinity, NaNnull bo'ldi
Map, SetBo'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:

JavaScript
JSON.parse(matn, (kalit, qiymat) =>
    kalit === "sana" ? new Date(qiymat) : qiymat
);

Obyektlarni taqqoslash #

JavaScript
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));
Natija
a === b : false
a === c : true
JSON bilan: true
Funksiya bilan: true
Obyektlar havola bo'yicha taqqoslanadi

=== ikki obyektning ichini emas, xotiradagi manzilini solishtiradi.

JavaScript
{ a: 1 } === { a: 1 }      // false - ikki alohida obyekt

JSON.stringify orqali taqqoslash oddiy holatlarda ishlaydi, lekin ikki kamchiligi bor:

  1. Xossalar tartibi muhim:
    JavaScript
     JSON.stringify({a:1, b:2}) === JSON.stringify({b:2, a:1})   // false
  2. Yuqoridagi JSON cheklovlari (Date, undefined) qo'llanadi.

Jiddiy loyihalarda chuqur taqqoslash uchun kutubxona ishlatiladi yoki rekursiv funksiya yoziladi.

Amaliy topshiriq
  1. Obyekt yaratib, nuqta va qavs bilan murojaat qiling.
  2. talaba.kalit va talaba[kalit] farqini ko'rsating.
  3. Xossa qo'shing, o'zgartiring va delete bilan o'chiring.
  4. Metod ichida this ishlatib, zanjir tuzing.
  5. Metodni ajratib olganda this yo'qolishini isbotlang.
  6. Destrukturizatsiya bilan ism va yoshni ajrating.
  7. Funksiya parametrida obyekt destrukturizatsiyasini qo'llang.
  8. Spread bilan standart sozlamalarni birlashtiring.
  9. Object.entries va fromEntries bilan barcha ballni oshiring.
  10. JSON.stringify Date va undefined ni qanday buzishini ko'ring.

Xulosa #

  • Xossaga nuqta yoki kvadrat qavs bilan murojaat qilinadi.
  • O'zgaruvchidagi kalit uchun faqat kvadrat qavs ishlaydi.
  • in va Object.hasOwn xossa mavjudligini tekshiradi.
  • this funksiya qanday chaqirilganiga bog'liq.
  • Metodni ajratganda this yo'qoladi - bind yoki arrow.
  • Destrukturizatsiya kodni qisqartiradi va aniqlashtiradi.
  • Funksiya parametrida obyekt ishlatish tartibni ahamiyatsiz qiladi.
  • Spread da keyingi obyekt oldingisini bosib o'tadi.
  • Object.entries obyektga massiv metodlarini qo'llash imkonini beradi.
  • JSON Date, undefined, funksiya va NaN ni buzadi.
  • Obyektlar havola bo'yicha taqqoslanadi - === ichini ko'rmaydi.

Keyingi bo'limda satrlar bilan ishlashni o'rganamiz.

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.