JavaScript massiv bo'ylab yurish: for, for...of va forEach

Qisqacha: Massivning har bir elementi ustida ish bajarish uchun uch asosiy usul bor. Oddiy for — indeks kerak bo'lganda. for...of — faqat qiymatlar kerak bo'lganda. forEach — har element uchun callback chaqiradigan metod. forEach ni break bilan to'xtatib bo'lmaydi, shuning uchun erta to'xtash kerak bo'lsa — for yoki for...of.

Bu darsda

• Massivni oddiy for bilan oldinga va orqaga aylana olasiz.
• for...of bilan elementlar bo'ylab indekssiz yura olasiz.
• forEach ga callback berib, har element va uning indeksi bilan ishlay olasiz.
• Nega forEach ni break bilan to'xtatib bo'lmasligini tushuntira olasiz.
• entries() bilan for...of ichida indeksni ham ola olasiz va vaziyatga mos siklni tanlay olasiz.

Oldin bilishingiz kerak: Element qo'shish va olib tashlash, for sikli, for...of va for...in, Callback va HOF.

1. Nega bu kerak?

O'tgan darslarda savatni to'ldirish va bo'shatishni o'rgandik. Endi foydalanuvchi "To'lash" tugmasini bosdi. Savatdagi mahsulotlar narxini qo'shib, jami summani chiqarish kerak.

Hozirgi bilimimiz bilan shunday yozamiz:

const narxlar = [4000, 12000, 8500];

const jami = narxlar[0] + narxlar[1] + narxlar[2];

console.log(jami); // 24500

Bu faqat uchta mahsulot uchun ishlaydi. Ertaga savatda 7 ta mahsulot bo'lsa, kod noto'g'ri hisoblaydi. Savatda nechta mahsulot bo'lishini esa oldindan bilmaymiz.

Bizga "har bir element uchun shu ishni qil" degan buyruq kerak. Bu massiv bo'ylab yurish deyiladi — elementlarni birma-bir, boshidan oxirigacha ko'rib chiqish. Inglizcha "iteration" deyiladi. Siklni siz allaqachon bilasiz. Bu darsda uni massivga qo'llashning uch usulini o'rganamiz.

2. Oddiy for bilan

2.1 Indeks bo'yicha yurish

for darsida satrni harfma-harf aylangan edik. Massivda ham xuddi shunday:

const narxlar = [4000, 12000, 8500];
let jami = 0;

for (let i = 0; i < narxlar.length; i++) {
  jami += narxlar[i];
}

console.log(jami); // 24500

Keling, sekin ko'ramiz:

• let i = 0 — birinchi indeksdan boshlaymiz. Massivda indeks 0 dan boshlanishini eslang.
• i < narxlar.length — oxirgi indeks length - 1. Shuning uchun < yoziladi, <= emas.
• narxlar[i] — joriy element. Har aylanishda i bittaga oshadi va keyingi elementni beradi.

Endi savatda 3 ta mahsulot bo'ladimi, 300 tami — kod o'zgarmaydi. length massiv bilan birga o'zgaradi.

2.2 Indeks o'zi kerak bo'lganda

Ba'zan elementning o'rni ham kerak. Masalan, xarid ro'yxatini raqamlab chiqarish:

const savat = ["non", "sut", "tuxum"];

for (let i = 0; i < savat.length; i++) {
  console.log(`${i + 1}. ${savat[i]}`);
}

Konsolda:

1. non
2. sut
3. tuxum

Odamlar 1 dan sanaydi, massiv esa 0 dan. Shuning uchun ekranga i + 1 chiqardik.

2.3 Teskari yurish

Telegram'da eng yangi xabar pastda turadi. Ro'yxatni "eng yangisidan boshlab" ko'rsatish uchun oxiridan yuramiz:

const xabarlar = ["Salom!", "Qalaysiz?", "Ertaga ko'rishamiz"];

for (let i = xabarlar.length - 1; i >= 0; i--) {
  console.log(xabarlar[i]);
}

Konsolda:

Ertaga ko'rishamiz
Qalaysiz?
Salom!

Oxirgi indeksdan (length - 1) boshlab, i >= 0 bo'lguncha kamaytiramiz. Teskari yurish, bittalab emas ikkitalab sakrash (i += 2) — bularni faqat oddiy for qila oladi.

2.4 Elementlarni joyida o'zgartirish

Do'konda hamma narsaga 10% chegirma e'lon qilindi. Narxlarni massivning o'zida yangilaymiz:

const narxlar = [4000, 12000, 8500];

for (let i = 0; i < narxlar.length; i++) {
  narxlar[i] = narxlar[i] * 0.9;
}

console.log(narxlar); // [ 3600, 10800, 7650 ]

narxlar[i] = ... — indeks orqali katakka yangi qiymat yozish. Bu ham mutatsiya: asl massiv o'zgardi. Buning uchun indeks kerak — keyingi bo'limda ko'rasiz, for...of buni qila olmaydi.

Tekshirib ko'ring: const a = [5, 10, 15]; uchun for (let i = 0; i < a.length; i += 2) { console.log(a[i]); } nima chiqaradi?

3. for...of bilan

3.1 Faqat qiymatlar

Ko'pincha indeks umuman kerak emas — bizga faqat elementlar kerak. for...of darsida ko'rgan sikl aynan shu uchun:

const narxlar = [4000, 12000, 8500];
let jami = 0;

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

console.log(jami); // 24500

"narxlar ning har bir narx i uchun". Hisoblagich, shart va narxlar[i] yo'q. Xato qilish uchun joy kam — shuning uchun zamonaviy kodda for...of eng ko'p ishlatiladigan sikl.

Nomlashga e'tibor bering: massiv — ko'plikda (narxlar), sikl o'zgaruvchisi — birlikda (narx). Bu kodni o'qishni osonlashtiradi.

3.2 break va continue ishlaydi

Savatda 50 000 so'mdan qimmat mahsulot bormi? Birinchisini topgan zahoti to'xtaymiz — qolganini tekshirish shart emas:

const narxlar = [4000, 65000, 8500, 120000];
let qimmati = null;

for (const narx of narxlar) {
  if (narx > 50000) {
    qimmati = narx;
    break;
  }
}

console.log(qimmati); // 65000

break darsidagi kabi, sikl darhol tugadi. 120000 gacha yetib ham bormadi. continue ham xuddi oddiy for dagidek ishlaydi.

3.3 Sikl o'zgaruvchisi — nusxa

for...of bilan elementni o'zgartirishga urinib ko'ramiz:

const narxlar = [4000, 12000];

for (let narx of narxlar) {
  narx = narx * 2;
}

console.log(narxlar); // [ 4000, 12000 ]

Massiv o'zgarmadi! narx — elementning o'zi emas, uning qiymati yozilgan alohida o'zgaruvchi. Xuddi daftardan raqamni qog'ozga ko'chirib, qog'ozdagini o'zgartirgandek: daftardagi raqam o'sha-o'sha qoladi. Elementni joyida o'zgartirish kerak bo'lsa — indeksli for ishlating.

Tekshirib ko'ring: for (const x of [3, 0, 7]) { if (x === 0) continue; console.log(10 / x); } necha qator chiqaradi?

4. forEach — har element uchun callback

4.1 Avval o'zimiz yozib ko'ramiz

Callback darsida takrorla(n, amal) funksiyasini yozgan edik. U callback'ni n marta chaqirardi. Endi shunga o'xshash, lekin massiv uchun ishlaydigan HOF yozamiz. U massivning har bir elementi uchun callback'ni chaqiradi:

function harBiriUchun(massiv, amal) {
  for (let i = 0; i < massiv.length; i++) {
    amal(massiv[i]);
  }
}

const savat = ["non", "sut", "tuxum"];

harBiriUchun(savat, (mahsulot) => {
  console.log(`Olindi: ${mahsulot}`);
});

Konsolda:

Olindi: non
Olindi: sut
Olindi: tuxum

Sikl bir marta, harBiriUchun ichida yozildi. Har element bilan nima qilish kerakligini esa callback aytadi.

4.2 forEach — tayyor harBiriUchun

Bu naqsh shunchalik ko'p kerak bo'ladiki, u har bir massivga metod sifatida qo'shib qo'yilgan. Uning nomi — forEach ("har biri uchun"):

const savat = ["non", "sut", "tuxum"];

savat.forEach((mahsulot) => {
  console.log(`Olindi: ${mahsulot}`);
});

Konsolda:

Olindi: non
Olindi: sut
Olindi: tuxum

Natija bir xil. forEach ichida ham xuddi bizning harBiriUchun dagidek sikl bor — faqat u yashirin. Siz faqat callback berasiz. Demak forEach — HOF, unga berilgan arrow funksiya esa — callback.

Callback'ni oldindan nom bilan yozib, keyin berish ham mumkin. Faqat qavssiz bering:

function chiqar(mahsulot) {
  console.log(`- ${mahsulot}`);
}

const savat = ["non", "sut"];

savat.forEach(chiqar);

Konsolda:

- non
- sut

4.3 Callback'ga indeks ham beriladi

forEach callback'ni har safar uchta argument bilan chaqiradi:

1. joriy element;
2. uning indeksi;
3. butun massivning o'zi.

Callback qaysilari kerak bo'lsa, shularni parametr qilib oladi. Raqamlangan ro'yxat uchun ikkinchisi kerak:

const xabarlar = ["Salom!", "Qalaysiz?", "Rahmat"];

xabarlar.forEach((xabar, indeks) => {
  console.log(`${indeks + 1}) ${xabar}`);
});

Konsolda:

1) Salom!
2) Qalaysiz?
3) Rahmat

Parametr nomlari sizning ixtiyoringizda: (xabar, indeks) yoki (x, i) — muhimi tartib. Birinchisi doim element, ikkinchisi doim indeks.

Uchinchi argument — massivning o'zi — kamdan-kam kerak bo'ladi. Barcha massiv metodlari callback'ni shu uchta argument bilan chaqiradi. Buni callback imzosi darsida batafsil ko'ramiz.

4.4 forEach hech narsa qaytarmaydi

const narxlar = [4000, 12000];

const natija = narxlar.forEach((narx) => narx * 2);

console.log(natija); // undefined

forEach faqat "har biri uchun bajar" deydi. Callback nima qaytarsa ham, forEach uni tashlab yuboradi va o'zi doim undefined qaytaradi. Har elementdan yangi massiv yasash uchun boshqa metod bor — map. Uni keyingi qismda o'rganamiz.

Tekshirib ko'ring: [10, 20, 30].forEach((x, i) => console.log(i)); nima chiqaradi?

5. forEach ni to'xtatib bo'lmaydi

5.1 break — sintaksis xatosi

Qimmat mahsulotni forEach bilan topib, darhol to'xtamoqchi bo'lsak:

const narxlar = [4000, 65000, 8500];

narxlar.forEach((narx) => {
  if (narx > 50000) {
    break;
  }
});

SyntaxError: Illegal break statement

Tarjimasi: "break bu yerda noqonuniy". Kod umuman ishga tushmaydi.

Nega? break faqat sikl ichida ishlaydi. Callback esa — alohida funksiya. Sikl forEach ning ichida yashiringan va sizning kodingizdan ko'rinmaydi. Callback ichidagi break o'zi turgan funksiyada sikl topa olmaydi — shuning uchun xato.

Hayotdan o'xshatish: siz ofitsiantga "har bir stolga non olib bor" dedingiz va ketdingiz. Ofitsiant yo'lda turib to'xtashga qaror qila olmaydi — buyruq allaqachon berilgan, u oxirigacha bajaradi.

5.2 return — faqat bitta elementni o'tkazib yuboradi

Callback ichida return yozish mumkin. Lekin u forEach ni to'xtatmaydi — faqat shu element uchun callback'ni tugatadi:

const narxlar = [4000, 65000, 8500];

narxlar.forEach((narx) => {
  if (narx > 50000) {
    return;
  }
  console.log(narx);
});

Konsolda:

4000
8500

65000 o'tkazib yuborildi, lekin 8500 baribir chiqdi. Demak forEach dagi return — break emas, continue ga o'xshaydi.

5.3 Xulosa: erta to'xtash kerak bo'lsa

"Topdim — to'xta" degan vazifalarda forEach o'rniga for...of yoki oddiy for ishlating. Ular break ni tushunadi. Keraksiz aylanishlar ham bo'lmaydi.

Qidirish uchun maxsus tayyor metodlar ham bor (find, some) — ular topishi bilan o'zi to'xtaydi. Ularni keyingi darsda o'rganamiz.

6. entries(), keys() va values()

6.1 for...of da indeksni olish

for...of qulay, lekin indeksni bermaydi. for...of darsida indeks kerak bo'lsa hisoblagichni o'zingiz yuritishingiz kerak degan edik. Massivlarda qulayroq yo'l bor — entries() metodi.

entries() har bir element uchun [indeks, element] juftligini beradi:

const savat = ["non", "sut"];

for (const juft of savat.entries()) {
  console.log(juft);
}

Konsolda:

[ 0, 'non' ]
[ 1, 'sut' ]

Har juft — ikki elementli massiv. Uning [0] i — indeks, [1] i — element:

const savat = ["non", "sut", "tuxum"];

for (const juft of savat.entries()) {
  console.log(`${juft[0] + 1}. ${juft[1]}`);
}

Konsolda:

1. non
2. sut
3. tuxum

6.2 Qisqa yozuv: [i, mahsulot]

juft[0], juft[1] yozish noqulay. JavaScript juftlikni darhol ikkita nomga "ochib" berishga ruxsat beradi:

const savat = ["non", "sut", "tuxum"];

for (const [i, mahsulot] of savat.entries()) {
  console.log(`${i + 1}. ${mahsulot}`);
}

Konsolda:

1. non
2. sut
3. tuxum

const [i, mahsulot] — "juftlikning birinchi elementini i ga, ikkinchisini mahsulot ga yoz". Bu yozuv destructuring deyiladi. Uni massiv destructuring darsida to'liq o'rganamiz. Hozircha shu bitta shaklni tanib olsangiz yetarli — real kodda u juda ko'p uchraydi.

6.3 keys() va values()

entries() ning ikki "ukasi" bor:

• keys() — faqat indekslar: 0, 1, 2.
• values() — faqat elementlar. for...of massivni to'g'ridan-to'g'ri aylanganda ham aynan shu ishlaydi.

const savat = ["non", "sut"];

for (const i of savat.keys()) {
  console.log(i);
}

Konsolda:

0
1

for...in dan farqli o'laroq, keys() indekslarni son sifatida beradi ("0" emas, 0). Begona kalitlar ham qo'shilmaydi.

Bu metodlarning natijasini console.log bilan chiqarsangiz, Object [Array Iterator] {} ko'rasiz. Bu massiv emas, balki iterator — qiymatlarni for...of ga birma-bir beradigan maxsus obyekt. U qanday ishlashini iteratorlar darsida ko'ramiz. Hozircha qoida: entries(), keys(), values() — for...of bilan birga ishlatiladi.

Tekshirib ko'ring: for (const [i, x] of ["a", "b"].entries()) { console.log(i + x); } nima chiqaradi?

7. Qaysi birini tanlash kerak?

Va bitta qat'iy qoida: massivda for...in ishlatmang — u indekslarni satr sifatida beradi va begona kalitlarni qo'shib yuboradi.

Tanlashda ikkilansangiz — for...of dan boshlang. Indeks kerak bo'lib qolsa, entries() qo'shing. Teskari yoki sakrab yurish kerak bo'lsa — oddiy for.

8. Ko'p uchraydigan xatolar

8.1 <= bilan chegaradan chiqish

const narxlar = [4000, 12000, 8500];
let jami = 0;

for (let i = 0; i <= narxlar.length; i++) {
  jami += narxlar[i];
}

console.log(jami); // NaN

Xato xabari yo'q, lekin natija NaN — "son emas". Nima bo'ldi? <= tufayli sikl i = 3 da ham ishladi. narxlar[3] — undefined. Son bilan undefined qo'shilsa — NaN. Bitta NaN esa butun yig'indini buzadi.

Tuzatish: i < narxlar.length. Yoki indeks umuman kerak bo'lmasa — for...of, unda bu xato bo'lmaydi.

8.2 forEach natijasini saqlash

const savat = ["non", "sut"];

const natija = savat.forEach((m) => m.toUpperCase());

console.log(natija); // undefined

forEach doim undefined qaytaradi. Katta harfli yangi massiv kerak bo'lsa — hozircha for...of va push:

const savat = ["non", "sut"];
const kattaHarfli = [];

for (const m of savat) {
  kattaHarfli.push(m.toUpperCase());
}

console.log(kattaHarfli); // [ 'NON', 'SUT' ]

Keyinchalik buni map bitta qatorda qiladi.

8.3 Callback'ni qavs bilan berish

function chiqar(mahsulot) {
  console.log(mahsulot);
}

["non", "sut"].forEach(chiqar());

TypeError: undefined is not a function

Tarjimasi: "undefined — funksiya emas". Callback darsidagi klassik xato. chiqar() darhol chaqirildi va undefined qaytardi. forEach esa undefined ni callback sifatida oldi. To'g'risi — qavssiz: forEach(chiqar).

8.4 Aylanayotganda massivdan o'chirish

Savatdan hamma "sut" larni olib tashlamoqchimiz:

const savat = ["sut", "sut", "non", "sut"];

for (let i = 0; i < savat.length; i++) {
  if (savat[i] === "sut") {
    savat.splice(i, 1);
  }
}

console.log(savat); // [ 'sut', 'non' ]

Bitta "sut" qolib ketdi! Sababi: i = 0 da birinchi "sut" o'chdi va qolganlar chapga surildi. Ikkinchi "sut" 0-indeksga keldi. Lekin sikl allaqachon i = 1 ga o'tdi — surilgan element tekshirilmay qoldi.

Tuzatish: oxiridan yuring. Unda o'chirilgan elementdan keyingilar suriladi, tekshirilmaganlariga esa tegilmaydi:

const savat = ["sut", "sut", "non", "sut"];

for (let i = savat.length - 1; i >= 0; i--) {
  if (savat[i] === "sut") {
    savat.splice(i, 1);
  }
}

console.log(savat); // [ 'non' ]

Qoida: aylanayotgan massivingizga element qo'shmang va undan o'chirmang. Majbur bo'lsangiz — teskari yuring. Keyinroq filter bu vazifani massivga tegmasdan, xavfsiz bajaradi.

9. Mashqlar

1-mashq (oson): O'rtacha ball

Talabaning ballari: [85, 92, 78, 95, 70]. for...of bilan ballar yig'indisini toping, keyin o'rtacha ballni chiqaring. Natija: O'rtacha: 84.

Ishora: o'rtacha = yig'indi / ballar soni (length).

const ballar = [85, 92, 78, 95, 70];
let yigindi = 0;

for (const ball of ballar) {
  yigindi += ball;
}

const ortacha = yigindi / ballar.length;

console.log(`O'rtacha: ${ortacha}`); // O'rtacha: 84

2-mashq (o'rta): Chatdagi savol

Chat xabarlari berilgan:

const chat = ["Salom", "Bugun darsmi?", "Ha, soat 3 da", "Qayerda?"];

1. forEach bilan xabarlarni #1: Salom ko'rinishida raqamlab chiqaring.
2. for...of bilan birinchi savolni — ? bilan tugaydigan xabarni — toping va Birinchi savol: Bugun darsmi? deb chiqaring. Topishi bilan siklni to'xtating.

Ishora: satr metodi xabar.endsWith("?") — satr ? bilan tugasa true qaytaradi.

const chat = ["Salom", "Bugun darsmi?", "Ha, soat 3 da", "Qayerda?"];

chat.forEach((xabar, i) => {
  console.log(`#${i + 1}: ${xabar}`);
});

let savol = null;

for (const xabar of chat) {
  if (xabar.endsWith("?")) {
    savol = xabar;
    break;
  }
}

console.log(`Birinchi savol: ${savol}`);

#1: Salom
#2: Bugun darsmi?
#3: Ha, soat 3 da
#4: Qayerda?
Birinchi savol: Bugun darsmi?

3-mashq (qiyin): X-O g'olibi — qator va ustunlar

Massiv darsidagi X-O taxtasiga qaytamiz. U yerda faqat diagonalni tekshirgan edik. Endi golibniTop(taxta) funksiyasini yozing. U:

1. for...of bilan har bir qatorni tekshiradi: uchala katak bir xil va " " emas bo'lsa — g'olib belgisini qaytaradi.
2. Oddiy for bilan har bir ustunni tekshiradi: u-ustun kataklari — taxta[0][u], taxta[1][u], taxta[2][u].
3. G'olib bo'lmasa — null qaytaradi.

Ishora: funksiya ichidagi return siklni ham, funksiyani ham darhol tugatadi — erta qaytish.

function golibniTop(taxta) {
  for (const qator of taxta) {
    if (qator[0] !== " " && qator[0] === qator[1]
        && qator[1] === qator[2]) {
      return qator[0];
    }
  }

  for (let u = 0; u < 3; u++) {
    const a = taxta[0][u];
    if (a !== " " && a === taxta[1][u] && a === taxta[2][u]) {
      return a;
    }
  }

  return null;
}

const qatorli = [
  ["O", "O", "O"],
  ["X", "X", " "],
  [" ", " ", "X"],
];

const ustunli = [
  ["X", "O", " "],
  ["X", "O", " "],
  [" ", "O", "X"],
];

const durang = [
  ["X", "O", "X"],
  ["X", "O", "O"],
  ["O", "X", "X"],
];

console.log(golibniTop(qatorli)); // O
console.log(golibniTop(ustunli)); // O
console.log(golibniTop(durang)); // null

10. Real ishda

• Savat va hisob-kitob: jami summa, chegirma, soliq — hammasi massiv bo'ylab yurish. for...of bu yerda eng ko'p ishlatiladi.
• Ekranga chiqarish: Telegram botda mahsulotlar ro'yxatini tugmalar qilib chiqarish, saytda ro'yxatni sahifaga qo'shish — forEach bilan. DOM darslarida har element uchun sahifada yangi qator yaratamiz.
• Kod uslubi: jamoalarda ko'pincha for...of va massiv metodlari (forEach, map, filter) afzal ko'riladi. Oddiy for esa indeks yoki tezlik muhim bo'lgan joylarda qoladi.
• Asinxron kod: keyinroq serverdan ma'lumotni navbat bilan kutish kerak bo'lganda, forEach kutmasligini ko'rasiz. U yerda ham yechim — for...of.

Intervyuda "forEach va for...of farqi nima?" savoli ko'p beriladi. Yaxshi javob: "forEach — callback qabul qiladigan metod, uni break bilan to'xtatib bo'lmaydi va u undefined qaytaradi. for...of — til sikli, unda break, continue ishlaydi".

Xulosa

• Oddiy for — indeks kerak bo'lganda: teskari yurish, sakrash, elementni joyida o'zgartirish. Shart — i < a.length.
• for...of — faqat qiymatlar kerak bo'lganda. Eng qisqa va xavfsiz, break ishlaydi.
• forEach(callback) — har element uchun callback'ni (element, indeks, massiv) bilan chaqiradi. undefined qaytaradi.
• forEach ni break bilan to'xtatib bo'lmaydi, callback'dagi return faqat bitta elementni o'tkazib yuboradi.
• for (const [i, x] of a.entries()) — for...of ichida indeks va qiymat birga.
• Aylanayotgan massivdan element o'chirmang; majbur bo'lsangiz — oxiridan yuring.

Oldingi dars: Element qo'shish va olib tashlash.

Keyingi dars: Massivda qidirish va tekshirish — includes, indexOf, find va some bilan elementni sikl yozmasdan topishni o'rganamiz.