Massivlar va obyektlar

Hozircha har bir o'zgaruvchida bittadan qiymat saqladik: bitta ism, bitta son. Haqiqiy dasturlarda esa ma'lumot ko'p bo'ladi: sinfdagi 30 ta o'quvchining bahosi, do'kondagi yuzlab mahsulot, kunlik vazifalar ro'yxati. Bu darsda ko'p qiymatni bitta joyda saqlashni o'rganamiz: tartibli ro'yxat uchun massiv, xususiyatlari bor narsa uchun obyekt.

Nima uchun massiv kerak?

Tasavvur qiling, besh kunlik baholaringizni saqlamoqchisiz. Hozirgi bilimimiz bilan shunday yozardik:

let baho1 = 5;
let baho2 = 4;
let baho3 = 3;
let baho4 = 5;
let baho5 = 4;

Beshta bo'lsa-ku mayli, 30 ta yoki 1000 ta bo'lsa-chi? Ularning o'rtachasini hisoblash uchun hammasini birma-bir qo'shib chiqish kerak bo'lardi. Buning o'rniga bitta massiv (inglizcha array) ishlatamiz — u bir nechta qiymatni tartib bilan saqlaydigan bitta o'zgaruvchi.

Massiv yaratish

Massiv kvadrat qavs [ ] ichida yoziladi, qiymatlar vergul bilan ajratiladi. Massiv ichidagi har bir qiymat element deyiladi:

const mevalar = ["olma", "anor", "uzum", "behi"];
const baholar = [5, 4, 3, 5, 4];
const bosh = [];   // hali elementi yo'q massiv

console.log(mevalar);
console.log(baholar);
console.log(bosh);
console.log("Mevalar soni:", mevalar.length);

length («uzunlik») — massivdagi elementlar soni. Bitta massivda turli turdagi qiymatlar bo'lishi mumkin (masalan, [1, "salom", true]), lekin odatda bir xil narsalar saqlanadi: faqat sonlar yoki faqat ismlar.

Indeks — elementning tartib raqami

Har bir elementning o'z raqami bor — uni indeks (inglizcha index) deyiladi. Eng muhim qoida: sanash 0 dan boshlanadi. Birinchi element — 0-indeksda, ikkinchisi — 1-indeksda va hokazo.

Elementni olish uchun massiv nomidan keyin kvadrat qavsda indeksni yozamiz:

const mevalar = ["olma", "anor", "uzum", "behi"];

console.log(mevalar[0]);                   // birinchi element
console.log(mevalar[2]);                   // uchinchi element
console.log(mevalar[mevalar.length - 1]);  // oxirgi element
console.log(mevalar[10]);                  // bunday indeks yo'q

// Elementni almashtirish
mevalar[1] = "nok";
console.log(mevalar);

Nimalarga e'tibor berish kerak:

• Oxirgi elementning indeksi har doim length - 1: to'rt elementli massivda u 3 ga teng.
• Mavjud bo'lmagan indeks so'ralsa, xato chiqmaydi — undefined («aniqlanmagan», ya'ni «bu yerda hech narsa yo'q») qaytadi.
• mevalar[1] = "nok" — 1-indeksdagi elementni yangi qiymat bilan almashtiradi.

Qo'shish va olib tashlash

Massivning tayyor metodlari (inglizcha method) bor — massivga «biriktirilgan» funksiyalar. Ular nuqta orqali chaqiriladi: mevalar.push("anor"). Eng ko'p ishlatiladigan to'rttasi:

const navbat = ["Ali", "Vali"];

navbat.push("Gulnora");        // oxiriga qo'shildi
console.log(navbat);

navbat.unshift("Bobur");       // boshiga qo'shildi
console.log(navbat);

const birinchi = navbat.shift();  // birinchisi chiqdi
console.log(birinchi, "xizmatdan o'tdi");

const oxirgi = navbat.pop();      // oxirgisi chiqdi
console.log(oxirgi, "navbatni tark etdi");

console.log(navbat, "— qoldi:", navbat.length);

shift() va pop() olib tashlangan elementni qaytaradi, shuning uchun uni o'zgaruvchiga saqlab qo'yish mumkin (birinchi, oxirgi).

Qidirish va boshqa foydali metodlar

const shaharlar = ["Toshkent", "Samarqand", "Buxoro", "Xiva"];

console.log(shaharlar.includes("Buxoro"));     // bormi?
console.log(shaharlar.includes("Parij"));
console.log(shaharlar.indexOf("Samarqand"));   // qayerda?
console.log(shaharlar.indexOf("Parij"));       // yo'q bo'lsa -1

console.log(shaharlar.join(" → "));
console.log(shaharlar.slice(1, 3));
console.log(shaharlar);   // asl massiv o'zgarmadi

Massiv bo'ylab aylanish

Massiv bilan eng ko'p bajariladigan ish — har bir element bilan nimadir qilish: chiqarish, qo'shish, tekshirish. Buning uchta usuli bor.

1. Oddiy for

14-darsdagi for sikli indekslarni 0 dan length - 1 gacha aylanib chiqadi. Indeks kerak bo'lganda qulay.

2. for...of

for (const baho of baholar) — «baholar ichidagi har bir baho uchun». Indeks bilan ishlash shart emas: har aylanishda baho o'zgaruvchisiga navbatdagi element tushadi. Eng tushunarli usul.

3. forEach

baholar.forEach(function (baho, indeks) { … }) — massivning metodi: u har bir element uchun siz bergan funksiyani chaqiradi va unga elementni (kerak bo'lsa indeksini ham) beradi.

const baholar = [5, 4, 3, 5, 4];

// 1) Oddiy for — indeks bilan
for (let i = 0; i < baholar.length; i++) {
  console.log(i + "-indeks:", baholar[i]);
}

// 2) for...of — yig'indini hisoblaymiz
let yigindi = 0;
for (const baho of baholar) {
  yigindi = yigindi + baho;
}
console.log("Yig'indi:", yigindi);
console.log("O'rtacha:", yigindi / baholar.length);

// 3) forEach — har bir element uchun funksiya
baholar.forEach(function (baho, indeks) {
  if (baho === 5) {
    console.log("A'lo baho, indeksi:", indeks);
  }
});

O'rtachani hisoblash usuli bilan tanishib oling: avval yigindi = 0, keyin har bir elementni unga qo'shamiz va oxirida elementlar soniga bo'lamiz. Bu «yig'ib borish» usuli juda ko'p masalada kerak bo'ladi.

map va filter — massivdan yangi massiv

Ikki vazifa juda tez-tez uchraydi: har bir elementni o'zgartirish va faqat kerakli elementlarni tanlab olish. Ular uchun maxsus metodlar bor. Lekin avval funksiyani qisqa yozish usuli bilan tanishamiz.

Strelkali funksiya

Strelkali funksiya (inglizcha arrow function) — funksiyaning qisqa yozuvi. Quyidagi ikkita funksiya bir xil ish qiladi:

// Oddiy funksiya
function ikkilantir(x) {
  return x * 2;
}

// Xuddi shu — strelkali funksiya
const ikkilantir2 = (x) => x * 2;

=> belgisining chap tomonida parametrlar, o'ng tomonida natija turadi. Natija bitta ifoda bo'lsa, return va figurali qavslar kerak emas. Uni «x berilsa, x * 2 ni qaytar» deb o'qing.

map va filter

• map («moslab o'zgartirish») — har bir elementdan yangisini yasaydi. Natijadagi elementlar soni o'zgarmaydi.
• filter («saralash», «elak») — faqat shart true bo'lgan elementlarni qoldiradi. Natija qisqaroq bo'lishi mumkin.

const narxlar = [12000, 4000, 25000, 8000, 3000];

// map — har bir narxni "ming" ko'rinishiga keltiramiz
const qisqa = narxlar.map((narx) => narx / 1000 + " ming");
console.log(qisqa);

// filter — faqat 10 000 so'mdan arzonlarini qoldiramiz
const arzonlar = narxlar.filter((narx) => narx < 10000);
console.log(arzonlar);

// Asl massiv o'zgarmadi
console.log(narxlar);

map va filter asl massivga tegmaydi, har doim yangi massiv qaytaradi. Ularga oddiy funksiya berish ham mumkin: narxlar.filter(function (narx) { return narx < 10000; }) — natija bir xil, faqat uzunroq.

const va massiv

Massivni const bilan e'lon qildik, lekin push bilan baribir o'zgartira oldik. Qanday qilib? const o'zgaruvchiga boshqa massivni berishni taqiqlaydi, lekin massivning ichini o'zgartirishga ruxsat beradi:

const mevalar = ["olma"];

mevalar.push("anor");   // mumkin: massivning ichi o'zgaryapti
console.log(mevalar);

mevalar = ["nok"];      // mumkin emas: o'zgaruvchiga yangi massiv
console.log(mevalar);

Konsolda xato chiqdi: Assignment to constant variable — «o'zgarmas o'zgaruvchiga qiymat berish». Xatodan keyingi qator bajarilmadi.

Obyekt — xususiyatlari bor narsa

Massiv bir xil narsalar ro'yxati uchun qulay. Lekin bitta narsaning turli xususiyatlarini saqlash kerak bo'lsa-chi? Masalan, talabaning ismi, yoshi, shahri va kursi. Buning uchun obyekt (inglizcha object) ishlatiladi.

Obyekt figurali qavs { } ichida yoziladi. Har bir xususiyat kalit: qiymat ko'rinishida, ular vergul bilan ajratiladi:

const talaba = {
  ism: "Aziza",
  yosh: 19,
  shahar: "Samarqand",
  kurs: 2
};

console.log(talaba);
console.log(talaba.ism);         // nuqta orqali
console.log(talaba["shahar"]);   // kvadrat qavs orqali
console.log(talaba.telefon);     // bunday kalit yo'q

Massivda elementga raqam (indeks) bilan, obyektda esa nom (kalit) bilan murojaat qilinadi. talaba.ism — «talabaning ismi» deb o'qiladi. Mavjud bo'lmagan kalit so'ralsa, massivdagidek undefined qaytadi.

Xususiyatni o'zgartirish va qo'shish

Mavjud kalitga qiymat bersangiz — u o'zgaradi, yangi kalitga bersangiz — yangi xususiyat qo'shiladi:

const kitob = {
  nomi: "Mehrobdan chayon",
  muallif: "Abdulla Qodiriy",
  narx: 45000
};

kitob.narx = 39000;       // o'zgartirish
kitob.janr = "roman";     // yangi xususiyat qo'shish
console.log(kitob);

const kalit = "muallif";
console.log(kitob[kalit]);   // kalit o'zgaruvchida — faqat [ ] bilan
console.log(kitob.kalit);    // undefined: "kalit" degan xususiyat yo'q

console.log(Object.keys(kitob));   // barcha kalitlar massivi

Qachon nuqta, qachon kvadrat qavs? Odatda nuqta yoziladi — u qisqa va o'qishga oson. Kvadrat qavs kalitning nomi o'zgaruvchida saqlanganda kerak: kitob[kalit] «kalit o'zgaruvchisidagi nom bo'yicha» degani, kitob.kalit esa aynan «kalit» degan xususiyatni qidiradi.

Metodlar

Obyekt ichida funksiya ham saqlash mumkin — bunday funksiya metod deyiladi. Metod ichida this so'zi «shu obyekt» degan ma'noni bildiradi:

const hisob = {
  egasi: "Jasur",
  balans: 100000,
  toldir(summa) {
    this.balans = this.balans + summa;
  },
  korsat() {
    console.log(this.egasi + ": " + this.balans + " so'm");
  }
};

hisob.korsat();
hisob.toldir(50000);
hisob.korsat();

Obyektlar massivi

Haqiqiy dasturlardagi ma'lumotlarning aksariyati — obyektlar massivi: mahsulotlar, foydalanuvchilar, xabarlar. Har bir element — bitta obyekt, hamma obyektlarda kalitlar bir xil:

const mahsulotlar = [
  { nomi: "Non", narx: 4000 },
  { nomi: "Sut", narx: 12000 },
  { nomi: "Pishloq", narx: 38000 },
  { nomi: "Olma (1 kg)", narx: 15000 },
  { nomi: "Choy", narx: 9000 }
];

console.log(mahsulotlar[1].nomi);   // ikkinchi mahsulotning nomi

// Hammasining jami narxi
let jami = 0;
for (const m of mahsulotlar) {
  jami = jami + m.narx;
}
console.log("Jami:", jami, "so'm");

// 10 000 so'mdan arzonlari
const arzonlar = mahsulotlar.filter((m) => m.narx < 10000);
console.log(arzonlar.map((m) => m.nomi).join(", "));

Qadamma-qadam o'qiymiz:

• mahsulotlar[1] — ikkinchi obyekt, mahsulotlar[1].nomi — uning nomi.
• for (const m of mahsulotlar) — har aylanishda m bitta mahsulot obyekti bo'ladi, m.narx — uning narxi.
• filter arzon mahsulot obyektlarini tanladi, map ulardan faqat nomlarini oldi, join esa nomlarni bitta satrga birlashtirdi. Metodlarni shunday ketma-ket ulash mumkin.

JSON — ma'lumotni matnga aylantirish

Massiv va obyektlar dastur ishlab turganda xotirada yashaydi. Sahifa yopilsa, ular yo'qoladi. Ularni saqlash yoki serverga yuborish uchun matn ko'rinishiga keltirish kerak. Buning uchun JSON (JavaScript Object Notation — «JavaScript obyekt yozuvi») formati ishlatiladi:

• JSON.stringify(x) — obyekt yoki massivni matnga aylantiradi;
• JSON.parse(matn) — matndan yana obyekt yasaydi.

const vazifa = { matn: "Kitob o'qish", bajarildi: false };

const satr = JSON.stringify(vazifa);
console.log(satr);
console.log(typeof satr);          // string — oddiy matn

const qayta = JSON.parse(satr);
console.log(qayta.matn);
console.log(typeof qayta);         // object — yana obyekt

const royxat = [vazifa, { matn: "Sport", bajarildi: true }];
console.log(JSON.stringify(royxat));

JSON matni JavaScript kodiga juda o'xshaydi, faqat kalitlar ham qo'shtirnoqda yoziladi va doim qo'shtirnoq " ishlatiladi. Brauzerning localStorage xotirasi faqat matn saqlay oladi, shuning uchun 18-darsdagi loyihada vazifalar ro'yxatini aynan shu usulda saqlaymiz.

Mashqlar

const haroratlar = [18, 21, 25, 24, 19, 22, 25];

// 1) O'rtacha haroratni hisoblang va chiqaring

// 2) O'rtachadan issiq kunlar sonini chiqaring

const haroratlar = [18, 21, 25, 24, 19, 22, 25];

let yigindi = 0;
for (const h of haroratlar) {
  yigindi = yigindi + h;
}
const ortacha = yigindi / haroratlar.length;
console.log(ortacha);

const issiqKunlar = haroratlar.filter((h) => h > ortacha);
console.log(issiqKunlar.length);

const sozlar = ["kitob", "dastur", "olma", "kompyuter",
                "uy", "maktab", "JavaScript"];
const n = 5;

// n tadan uzun so'zlar sonini chiqaring

const sozlar = ["kitob", "dastur", "olma", "kompyuter",
                "uy", "maktab", "JavaScript"];
const n = 5;

let soni = 0;
for (const soz of sozlar) {
  if (soz.length > n) {
    soni++;
  }
}
console.log(soni);

// Qisqa usul: console.log(sozlar.filter((s) => s.length > n).length);

const savat = [
  { nomi: "Non", narx: 4000, soni: 2 },
  { nomi: "Sut", narx: 12000, soni: 1 },
  { nomi: "Olma", narx: 15000, soni: 3 }
];

// Jami narxni hisoblang

const savat = [
  { nomi: "Non", narx: 4000, soni: 2 },
  { nomi: "Sut", narx: 12000, soni: 1 },
  { nomi: "Olma", narx: 15000, soni: 3 }
];

let jami = 0;
for (const m of savat) {
  jami = jami + m.narx * m.soni;
}
console.log("Jami: " + jami + " so'm");

const mahsulotlar = [
  { nomi: "Choynak", narx: 180000 },
  { nomi: "Muzlatkich", narx: 5200000 },
  { nomi: "Dazmol", narx: 350000 },
  { nomi: "Televizor", narx: 4100000 }
];

// Eng qimmat mahsulotni toping

const mahsulotlar = [
  { nomi: "Choynak", narx: 180000 },
  { nomi: "Muzlatkich", narx: 5200000 },
  { nomi: "Dazmol", narx: 350000 },
  { nomi: "Televizor", narx: 4100000 }
];

let eng = mahsulotlar[0];
for (const m of mahsulotlar) {
  if (m.narx > eng.narx) {
    eng = m;
  }
}
console.log("Eng qimmati: " + eng.nomi);

O'zingizni sinang