Mundarija (39)
- Bu darsda
- 1. Nega bu kerak?
- 2. includes — bormi yoki yo'qmi?
- 2.1 Asosiy ishlatilishi
- 2.2 Qidiruv qat'iy: tur va harf muhim
- 2.3 Qidirishni o'rtadan boshlash
- 3. indexOf va lastIndexOf — qayerda turibdi?
- 3.1 indexOf — birinchi uchragan joy
- 3.2 Amaliyot: qiymat bo'yicha o'chirish
- 3.3 lastIndexOf — oxirgi uchragan joy
- 4. NaN bilan kichik, lekin muhim farq
- 5. Shart bo'yicha qidirish: find
- 5.1 Muammo: aniq qiymat noma'lum
- 5.2 find ga callback berish
- 5.3 Ichida nima bo'lyapti?
- 5.4 Hech narsa topilmasa
- 5.5 Callback'ning ikkinchi parametri — indeks
- 5.6 Eng ko'p uchraydigan holat: obyektlar ro'yxati
- 6. findIndex — shartga mos elementning joyi
- 7. Oxiridan qidirish: findLast va findLastIndex
- 8. some va every — butun ro'yxat haqida "ha" yoki "yo'q"
- 8.1 some — kamida bittasi mosmi?
- 8.2 every — hammasi mosmi?
- 8.3 Ular ham erta to'xtaydi
- 8.4 Bo'sh massiv — kutilmagan javob
- 9. Qaysi metodni tanlash kerak?
- 9.1 O'zingiz to'ldiring
- 10. Ko'p uchraydigan xatolar
- 10.1 indexOf natijasini to'g'ridan-to'g'ri if ga qo'yish
- 10.2 find natijasini tekshirmasdan ishlatish
- 10.3 Jingalak qavsli callback'da return ni unutish
- 10.4 Obyektni includes bilan qidirish
- 10.5 Mavjud bo'lmagan metod nomi
- 11. Mashqlar
- 1-mashq (oson): Menyu tekshiruvi
- 2-mashq (o'rta): Imtihon natijalari
- 3-mashq (qiyin): Yetkazib berish boti
- 12. Real ishda
- Xulosa
JavaScript massivda qidirish: includes, indexOf, find, some va every
Qisqacha: Massivda element bormi —
includes(true/false). Qayerda —indexOf(indeks yoki-1). Aniq qiymat emas, shartga mos birinchi element kerak bo'lsa —find(element yokiundefined) vafindIndex(indeks yoki-1). "Kamida bittasi mosmi?" —some, "hammasi mosmi?" —every. Bu metodlarning hech biri massivni o'zgartirmaydi.
Bu darsda
includes,indexOfvalastIndexOfbilan aniq qiymatni qidira olasiz.includesnegaNaNni topadi,indexOfesa topmasligini tushuntira olasiz.find,findIndex,findLastvafindLastIndexga callback berib, shart bo'yicha qidira olasiz.somevaeverybilan butun ro'yxat haqida "ha/yo'q" javob ola olasiz.- Har bir savol uchun to'g'ri metodni tanlay olasiz va boshlovchilarning 5 ta xatosini taniysiz.
Oldin bilishingiz kerak: Massiv bo'ylab yurish, Callback va HOF, Matn ichida qidirish.
1. Nega bu kerak?
Oldingi darsda massiv bo'ylab for...of bilan yurishni o'rgandik. Endi shu bilim bilan real masalani yechib ko'ramiz.
Jasur Telegram'da onlayn do'kon boti yuritadi. Bot faqat ba'zi viloyatlarga yetkazib beradi. Mijoz "Navoiy" deb yozdi. Yetkazamizmi?
const viloyatlar = ["Toshkent", "Samarqand", "Buxoro", "Navoiy"];
const mijoz = "Navoiy";
let bormi = false;
for (const v of viloyatlar) {
if (v === mijoz) {
bormi = true;
break;
}
}
console.log(bormi); // trueIshlaydi. Lekin oddiy savol uchun 8 qator kod ketdi. Botda bunday savollar o'nlab bo'ladi: "shu mahsulot savatda bormi?", "qaysi biri 100 000 so'mdan qimmat?", "hammasi omborda bormi?".
JavaScript massivlarida bunday savollar uchun tayyor metodlar bor. Yuqoridagi 8 qator bitta qatorga aylanadi:
const viloyatlar = ["Toshkent", "Samarqand", "Buxoro", "Navoiy"];
console.log(viloyatlar.includes("Navoiy")); // trueMetod nima ekanini matn ichida qidirish darsidan eslaysiz: qiymatdan keyin nuqta, nom va qavs. Satrlarda includes va indexOf ni ko'rgan edik. Yaxshi xabar: massivda ham ular deyarli xuddi shunday ishlaydi.
2. includes — bormi yoki yo'qmi?
2.1 Asosiy ishlatilishi
includes (inglizcha "o'z ichiga oladi") massivda shu qiymat borligini tekshiradi. Javob — mantiqiy qiymat: true yoki false.
const savat = ["non", "sut", "tuxum"];
console.log(savat.includes("sut")); // true
console.log(savat.includes("go'sht")); // falseNatija true yoki false bo'lgani uchun uni to'g'ridan-to'g'ri if ichiga qo'yish qulay:
const viloyatlar = ["Toshkent", "Samarqand", "Buxoro"];
const mijoz = "Xiva";
if (viloyatlar.includes(mijoz)) {
console.log("Yetkazib beramiz!");
} else {
console.log(`Kechirasiz, ${mijoz}ga hozircha yetkazmaymiz.`);
}Konsolda:
Kechirasiz, Xivaga hozircha yetkazmaymiz.2.2 Qidiruv qat'iy: tur va harf muhim
includes qiymatni aynan qidiradi. 5 soni va "5" satri — ikki xil qiymat:
const raqamlar = [1, 5, 10];
console.log(raqamlar.includes(5)); // true
console.log(raqamlar.includes("5")); // falseSatrlarda katta-kichik harf ham farqlanadi: ["Navoiy"].includes("navoiy") — false. Shuning uchun real botda massivni ham, mijoz yozganini ham bir xil ko'rinishda saqlashadi. Masalan, hammasini kichik harfda:
const viloyatlar = ["toshkent", "navoiy", "buxoro"];
const mijoz = "NAVOIY";
console.log(viloyatlar.includes(mijoz.toLowerCase())); // truetoLowerCase() ni matnni o'zgartirish darsida o'rgangansiz: u satrni kichik harfga o'tkazadi.
2.3 Qidirishni o'rtadan boshlash
includes ga ikkinchi argument bersangiz, qidiruv shu indeksdan boshlanadi. Bu satrdagi includes bilan bir xil:
const navbat = ["Ali", "Malika", "Jasur", "Ali"];
console.log(navbat.includes("Malika", 2)); // false
console.log(navbat.includes("Ali", 1)); // truenavbat.includes("Malika", 2) — "2-indeksdan boshlab Malika bormi?" Malika 1-indeksda, qidiruv esa undan keyin boshlandi. Ikkinchi qatorda esa 3-indeksdagi Ali topildi.
Tekshirib ko'ring:
const narxlar = [5000, 12000, 8000];bo'lsa,narxlar.includes("12000")nima qaytaradi?
Javob
false. Massivda 12000 soni bor, biz esa "12000" satrini qidirdik. includes turni o'zgartirmaydi va aynan bir xil qiymatni qidiradi. Formadan kelgan matnni avval songa aylantirish kerak: narxlar.includes(Number("12000")) — true.
3. indexOf va lastIndexOf — qayerda turibdi?
3.1 indexOf — birinchi uchragan joy
Ba'zan "bormi?" emas, "qayerda?" degan savol turadi. indexOf qiymatning indeksini qaytaradi. Qiymat bo'lmasa — -1:
const mevalar = ["olma", "nok", "uzum", "nok"];
console.log(mevalar.indexOf("nok")); // 1
console.log(mevalar.indexOf("anor")); // -1Ikkita "nok" bor, lekin indexOf birinchisini topib, to'xtaydi. Natija — 1.
Nega yo'q bo'lsa -1? Chunki 0 — haqiqiy indeks (birinchi element). Massivda -1 indeks bo'lmaydi. Shuning uchun u "topilmadi" degan belgi sifatida tanlangan.
3.2 Amaliyot: qiymat bo'yicha o'chirish
indexOf ning eng ko'p uchraydigan ishi — splice bilan birga elementni nomi bo'yicha o'chirish. splice indeks so'raydi, bizda esa faqat nom bor. indexOf indeksni topib beradi:
const savat = ["non", "sut", "tuxum", "choy"];
const ochirish = "tuxum";
const i = savat.indexOf(ochirish);
if (i !== -1) {
savat.splice(i, 1);
}
console.log(savat); // [ 'non', 'sut', 'choy' ]Keling, sekin ko'ramiz:
savat.indexOf("tuxum")—2. Tuxum 2-indeksda.if (i !== -1)— tuxum haqiqatan bormi? Bu tekshiruv muhim. Aks holdasplice(-1, 1)oxirgi elementni — choyni — o'chirib yuborardi.savat.splice(2, 1)— 2-indeksdan 1 ta element o'chiriladi.
3.3 lastIndexOf — oxirgi uchragan joy
lastIndexOf qidiruvni massiv oxiridan boshlaydi va oxirgi uchragan joyni beradi:
const mevalar = ["olma", "nok", "uzum", "nok"];
console.log(mevalar.indexOf("nok")); // 1
console.log(mevalar.lastIndexOf("nok")); // 3Indeks baribir boshidan sanaladi. lastIndexOf faqat qidiruv yo'nalishini o'zgartiradi.
Ikkala metod ham includes kabi ikkinchi argument oladi — qidiruv boshlanadigan indeks. Masalan, mevalar.indexOf("nok", 2) — 3: qidiruv 2-indeksdan boshlandi va birinchi nokni o'tkazib yubordi.
Maslahat: Faqat "bormi?" deb so'rasangiz —
includesyozing,indexOf(...) !== -1emas. Ikkalasi ham ishlaydi, lekinincludeso'qishga qulayroq.indexOfni indeksning o'zi kerak bo'lganda ishlating.
Tekshirib ko'ring:
["a", "b", "a", "c"]massividaindexOf("a"),lastIndexOf("a")vaindexOf("d")nima qaytaradi?
Javob
0, 2 va -1. indexOf birinchi "a" ni topadi — 0-indeks. lastIndexOf oxiridan qidiradi va 2-indeksdagi "a" ni topadi. "d" massivda yo'q, shuning uchun -1.
4. NaN bilan kichik, lekin muhim farq
includes va indexOf deyarli bir xil ishlaydi. Faqat bitta farqi bor — NaN bilan:
const olchovlar = [36.6, NaN, 37.2];
console.log(olchovlar.indexOf(NaN)); // -1
console.log(olchovlar.includes(NaN)); // trueNaN massivda bor, lekin indexOf uni "topa olmadi". Nega?
Tenglik operatorlari darsida ko'rgan edik: JavaScript'da NaN === NaN — false. NaN — o'ziga ham teng bo'lmagan yagona qiymat. indexOf har bir elementni === bilan solishtiradi. Shuning uchun NaN ni hech qachon topmaydi.
includes esa boshqa qoidani ishlatadi — o'sha darsda aytilgan SameValueZero. Bu qoidada NaN o'ziga teng deb hisoblanadi.
| Qidiruv | indexOf (===) |
includes (SameValueZero) |
|---|---|---|
NaN ni topadimi? |
Yo'q, -1 |
Ha, true |
0 va -0 |
Bir xil | Bir xil |
5 va "5" |
Har xil | Har xil |
Qachon bu muhim? Masalan, sensor harorat o'lchamadi va ro'yxatga NaN tushdi. "Ro'yxatda buzuq o'lchov bormi?" degan savolga faqat includes to'g'ri javob beradi.
Tekshirib ko'ring:
[1, NaN, 3].indexOf(NaN)va[1, NaN, 3].includes(NaN)nima qaytaradi?
Javob
-1 va true. indexOf === bilan solishtiradi, NaN === NaN esa false — demak topilmadi. includes SameValueZero qoidasini ishlatadi va NaN ni o'ziga teng deb biladi.
5. Shart bo'yicha qidirish: find
5.1 Muammo: aniq qiymat noma'lum
Jasurning do'konidagi narxlar ro'yxati:
const narxlar = [45000, 89000, 120000, 35000, 250000];Savol: "100 000 so'mdan qimmat birinchi narx qaysi?" includes bu yerda yordam bermaydi. U aniq qiymatni qidiradi, biz esa qiymatni bilmaymiz — faqat shartni bilamiz.
Bunday savol uchun find (inglizcha "topmoq") metodi bor. Unga qiymat emas, callback — shartni tekshiradigan funksiya beriladi.
5.2 find ga callback berish
Callback va HOF darsini eslang: callback — boshqa funksiyaga berilgan va o'sha funksiya ichida chaqiriladigan funksiya. find ham shunday ishlaydi:
const narxlar = [45000, 89000, 120000, 35000, 250000];
const qimmat = narxlar.find((narx) => narx > 100000);
console.log(qimmat); // 120000(narx) => narx > 100000 — bu callback. Arrow funksiya: narx ni oladi va narx > 100000 natijasini — true yoki false — qaytaradi.
find shu callback'ni har bir element uchun navbat bilan chaqiradi. Callback birinchi marta true qaytargan elementni find natija sifatida beradi.
5.3 Ichida nima bo'lyapti?
Buni o'z ko'zimiz bilan ko'raylik. Callback ichiga console.log qo'yamiz:
const narxlar = [45000, 89000, 120000, 35000, 250000];
const qimmat = narxlar.find((narx) => {
console.log(`Tekshiryapman: ${narx}`);
return narx > 100000;
});
console.log(`Topildi: ${qimmat}`);Konsolda:
Tekshiryapman: 45000
Tekshiryapman: 89000
Tekshiryapman: 120000
Topildi: 120000E'tibor bering: 35000 va 250000 tekshirilmadi ham. find birinchi mos elementni topgan zahoti to'xtaydi — xuddi for siklidagi break kabi. 250000 ham shartga mos, lekin u navbatga yetmadi.
| Qadam | narx |
narx > 100000 |
find nima qiladi |
|---|---|---|---|
| 1 | 45000 | false |
davom etadi |
| 2 | 89000 | false |
davom etadi |
| 3 | 120000 | true |
to'xtaydi, 120000 ni qaytaradi |
Bu yerda callback jingalak qavsli, shuning uchun return yozdik. Bir qatorli arrow'da return yashirin bo'ladi — bu farqni arrow funksiyalar darsida ko'rgan edik.
5.4 Hech narsa topilmasa
Hech bir element shartga mos kelmasa, find undefined qaytaradi:
const narxlar = [45000, 89000, 35000];
const qimmat = narxlar.find((narx) => narx > 1000000);
console.log(qimmat); // undefined
console.log(qimmat ?? "Bunday mahsulot yo'q"); // Bunday mahsulot yo'q?? — nullish coalescing operatori. Chap tomon undefined yoki null bo'lsa, o'ng tomondagi zaxira qiymat olinadi.
5.5 Callback'ning ikkinchi parametri — indeks
find callback'ni chaqirganda unga elementning o'zidan tashqari uning indeksini ham beradi. Kerak bo'lsa, ikkinchi parametr yozasiz:
const navbat = ["Ali", "Malika", "Jasur", "Dilnoza"];
const topilgan = navbat.find((ism, i) => i >= 2 && ism.length > 5);
console.log(topilgan); // DilnozaShart: "2-indeksdan keyingi va nomi 5 harfdan uzun". Jasur 2-indeksda, lekin nomi 5 harf. Dilnoza — 3-indeksda va 7 harf. Callback nima olishini to'liq callback imzosi darsida ko'ramiz. Hozircha: birinchi parametr — element, ikkinchisi — indeks.
5.6 Eng ko'p uchraydigan holat: obyektlar ro'yxati
Real dasturlarda find ko'pincha obyektlar ro'yxatida ishlatiladi. Obyekt bilan ?. darsida qisqa tanishgan edik: { nom: "Choynak", narx: 85000 } — nomli qiymatlar to'plami, qiymat esa nuqta bilan olinadi. Obyektlarni to'liq keyingi darslardan birida o'rganamiz.
const mahsulotlar = [
{ nom: "Choynak", narx: 85000 },
{ nom: "Piyola", narx: 15000 },
{ nom: "Dasturxon", narx: 120000 },
];
const kerakli = mahsulotlar.find((m) => m.nom === "Piyola");
console.log(kerakli); // { nom: 'Piyola', narx: 15000 }
console.log(kerakli.narx); // 15000Callback har bir obyektning nom xususiyatini tekshiradi. find butun obyektni qaytaradi — endi uning narxini ham, boshqa ma'lumotlarini ham olish mumkin. Online do'konda mahsulot sahifasi ochilganda aynan shunday qidiruv ishlaydi.
Tekshirib ko'ring:
[3, 8, 12, 5].find((n) => n > 4)nima qaytaradi? Callback necha marta chaqiriladi?
Javob
8, callback 2 marta chaqiriladi. Birinchi 3 — shart false. Keyin 8 — shart true, find shu yerda to'xtaydi. 12 va 5 ham 4 dan katta, lekin ular tekshirilmaydi: find faqat birinchi mos elementni beradi.
6. findIndex — shartga mos elementning joyi
findIndex xuddi find kabi callback oladi. Farqi: elementning o'zini emas, indeksini qaytaradi. Topilmasa — -1, xuddi indexOf dagidek.
const qoldiq = [12, 5, 0, 8, 0];
console.log(qoldiq.findIndex((soni) => soni === 0)); // 2
console.log(qoldiq.findIndex((soni) => soni < 0)); // -1Omborda har mahsulotning qoldig'i saqlangan. findIndex birinchi tugagan mahsulotning o'rnini topdi — 2-indeks.
indexOf(0) ham shu yerda 2 beradi. Farqi: indexOf faqat aniq qiymatni qidiradi, findIndex esa istalgan shartni — "5 dan kam", "juft son", "narxi 0". Shuning uchun obyektlar ro'yxatidan o'chirishda indexOf o'rniga findIndex + splice ishlatiladi:
const savat = [
{ nom: "Kitob", narx: 60000 },
{ nom: "Sovg'a xaltasi", narx: 0 },
{ nom: "Daftar", narx: 8000 },
];
const i = savat.findIndex((m) => m.narx === 0);
if (i !== -1) {
savat.splice(i, 1);
}
console.log(savat.length); // 27. Oxiridan qidirish: findLast va findLastIndex
find va findIndex massiv boshidan qidiradi. Ba'zan esa oxirgi mos element kerak bo'ladi. Masalan, Click'dagi to'lovlar tarixidan eng oxirgi katta to'lovni topish.
Buning uchun findLast va findLastIndex bor. Ular xuddi shunday callback oladi, faqat qidiruvni oxiridan boshlaydi:
const tolovlar = [50000, 1200000, 30000, 2500000, 70000];
const oxirgiKatta = tolovlar.findLast((t) => t >= 1000000);
const uningJoyi = tolovlar.findLastIndex((t) => t >= 1000000);
console.log(oxirgiKatta); // 2500000
console.log(uningJoyi); // 3find bu yerda 1200000 ni bergan bo'lardi — boshidan birinchi mos kelgan. findLast esa oxiridan boshladi: 70000 mos emas, keyingi 2500000 — mos. Indeks baribir boshidan sanaladi — 3.
Topilmasa — findLast undefined, findLastIndex -1 qaytaradi. Qoida o'zgarmaydi.
Maslahat:
findLastvafindLastIndexJavaScript'ga 2023-yilda (ES2023 standarti) qo'shilgan. Hamma zamonaviy brauzer va Node 18+ ularni biladi. Eski kodda o'rniga massivni teskari aylantirib, keyinfindqilishgan — bunday kodni ko'rsangiz, hayron bo'lmang.
Tekshirib ko'ring:
const b = [4, 9, 2, 7];bo'lsa,b.find((n) => n > 5)vab.findLast((n) => n > 5)nima qaytaradi?
Javob
9 va 7. find boshidan qidiradi: 4 — yo'q, 9 — ha. findLast oxiridan qidiradi: 7 — darhol ha.
8. some va every — butun ro'yxat haqida "ha" yoki "yo'q"
8.1 some — kamida bittasi mosmi?
Ba'zan element kerak emas, faqat javob kerak: "ro'yxatda shunday narsa bormi?" some (inglizcha "ba'zi") callback'ni har element uchun chaqiradi. Kamida bitta element uchun true chiqsa — true qaytaradi:
const baholar = [4, 5, 3, 5, 2];
console.log(baholar.some((b) => b === 2)); // true
console.log(baholar.some((b) => b > 5)); // false"Sinfda ikki olgan o'quvchi bormi?" — ha. "5 dan yuqori baho bormi?" — yo'q.
includes(2) ham birinchi savolga javob berardi. Lekin some istalgan shartni tekshiradi: "3 dan past baho bormi?" — baholar.some((b) => b < 3).
8.2 every — hammasi mosmi?
every (inglizcha "har bir") — aksincha. U hamma element shartga mos kelsagina true qaytaradi. Bitta mos kelmasa — false:
const qoldiq = [12, 5, 3, 8];
console.log(qoldiq.every((soni) => soni > 0)); // true
console.log(qoldiq.every((soni) => soni >= 5)); // false"Hamma mahsulot omborda bormi?" — ha, hammasining qoldig'i 0 dan katta. "Har biridan kamida 5 tadan bormi?" — yo'q, bittasida 3 ta.
Formalarni tekshirishda every juda qulay. Masalan, ro'yxatdan o'tish formasidagi hamma maydon to'ldirilganmi?
const maydonlar = ["Malika", "malika@mail.uz", ""];
const hammasiToldirilgan = maydonlar.every((m) => m !== "");
console.log(hammasiToldirilgan); // falseUchinchi maydon bo'sh, shuning uchun forma yuborilmaydi.
8.3 Ular ham erta to'xtaydi
some birinchi true topgan zahoti to'xtaydi — javob allaqachon "ha". every esa birinchi false da to'xtaydi — javob allaqachon "yo'q".
Bu sizga tanish: mantiqiy operatorlar darsidagi qisqa tutashuv. some — elementlar orasiga || qo'yilgandek ishlaydi, every — && qo'yilgandek.
| Metod | Qachon true |
Qayerda to'xtaydi |
|---|---|---|
some |
Kamida bittasi mos | Birinchi true da |
every |
Hammasi mos | Birinchi false da |
8.4 Bo'sh massiv — kutilmagan javob
Bo'sh massivda bu ikki metod qiziq javob beradi:
const bosh = [];
console.log(bosh.some((n) => n > 0)); // false
console.log(bosh.every((n) => n > 0)); // truesome — false: bo'sh ro'yxatda mos keladigan element yo'q, bu tushunarli. every esa true qaytardi. Boshida bu g'alati tuyulishi tabiiy.
Mantiq shunday: every "qoidani buzgan element bormi?" deb qidiradi. Bo'sh ro'yxatda qoidani buzadigan element yo'q — demak "hammasi joyida". Tasavvur qiling: o'qituvchi "bugun hamma uy vazifasini topshirdimi?" deb so'radi, sinfda esa bugun hech kim yo'q. Topshirmagan birorta o'quvchi yo'q, rasmiy javob — "ha".
Bu real kodda xatoga olib kelishi mumkin. Masalan, savat bo'sh bo'lsa, savat.every(...) "hammasi to'lovga tayyor" deydi. Shuning uchun bunday joyda avval savat.length > 0 ni ham tekshiring.
Tekshirib ko'ring:
const yoshlar = [19, 22, 17, 25];bo'lsa,yoshlar.some((y) => y < 18)vayoshlar.every((y) => y >= 18)nima qaytaradi?
Javob
true va false. 17 yoshli bitta odam bor — "18 dan kichik kimdir bormi?" savoliga javob "ha". Aynan shu odam tufayli "hammasi 18 dan kattami?" savoliga javob "yo'q". Bu ikki savol bir-birining teskarisi.
9. Qaysi metodni tanlash kerak?
Hamma metodni bitta jadvalda ko'raylik. Avval savolingizni aniqlang — metod o'zi tanlanadi:
| Savolingiz | Metod | Nima qaytaradi |
|---|---|---|
| Shu qiymat bormi? | includes |
true / false |
| Shu qiymat qayerda? | indexOf, lastIndexOf |
indeks yoki -1 |
| Shartga mos birinchi element? | find |
element yoki undefined |
| U qayerda? | findIndex |
indeks yoki -1 |
| Shartga mos oxirgi element? | findLast, findLastIndex |
element / indeks |
| Kamida bittasi mosmi? | some |
true / false |
| Hammasi mosmi? | every |
true / false |
Bitta oddiy qoida: aniq qiymat qidirsangiz — qavsga qiymat (includes("Navoiy")). Shart bo'yicha qidirsangiz — qavsga funksiya (find((n) => n > 5)).
Va eng muhimi: bu darsdagi hech bir metod massivni o'zgartirmaydi. Ular faqat qarab chiqadi va javob beradi. push yoki splice dan farqli ravishda, asl massiv joyida qoladi.
9.1 O'zingiz to'ldiring
Taksi ilovasida haydovchilar reytingi saqlangan: [4.9, 4.7, 3.8, 5.0, 4.2]. Uchta savolga javob kerak. Kodning yarmi tayyor, qaysi metod kerakligini siz tanlaysiz:
const reyting = [4.9, 4.7, 3.8, 5.0, 4.2];
// 4.5 dan past birinchi reyting (element kerak)
const past = reyting.____((r) => r < 4.5);
// uning indeksi
const joyi = reyting.____((r) => r < 4.5);
// hamma reyting 3 dan yuqorimi? (true/false)
const yaxshi = reyting.____((r) => r > 3);pastuchun metod:reyting..joyiuchun metod:reyting..yaxshiuchun metod:reyting..4.2ham 4.5 dan past. Lekinpastga3.8tushadi, chunkifindfaqat mos elementni beradi.
Javob
const reyting = [4.9, 4.7, 3.8, 5.0, 4.2];
const past = reyting.find((r) => r < 4.5);
const joyi = reyting.findIndex((r) => r < 4.5);
const yaxshi = reyting.every((r) => r > 3);
console.log(past); // 3.8
console.log(joyi); // 2
console.log(yaxshi); // trueElement kerak — find, indeks kerak — findIndex, "hammasi?" — every. Konsolda 5.0 emas, 5 ko'rinishini ham bilib qo'ying: JavaScript uchun 5.0 va 5 — bitta son.
10. Ko'p uchraydigan xatolar
10.1 indexOf natijasini to'g'ridan-to'g'ri if ga qo'yish
const navbat = ["Ali", "Malika"];
if (navbat.indexOf("Ali")) {
console.log("Ali navbatda");
} else {
console.log("Ali yo'q");
}Konsolda:
Ali yo'qAli navbatda turibdi, lekin kod "yo'q" dedi. Nega? indexOf("Ali") — 0, chunki Ali birinchi. 0 esa falsy qiymat — if uni "yolg'on" deb tushunadi. Aksincha, topilmasa -1 qaytadi, -1 esa truthy.
Tuzatish: "bormi?" savoli uchun includes ishlating: if (navbat.includes("Ali")). Indeks baribir kerak bo'lsa — -1 bilan aniq solishtiring: if (navbat.indexOf("Ali") !== -1).
10.2 find natijasini tekshirmasdan ishlatish
const mahsulotlar = [
{ nom: "Choynak", narx: 85000 },
{ nom: "Piyola", narx: 15000 },
];
const topilgan = mahsulotlar.find((m) => m.nom === "Qozon");
console.log(topilgan.narx);TypeError: Cannot read properties of undefined (reading 'narx')Tarjimasi: "undefined ning xususiyatlarini o'qib bo'lmaydi (narx ni o'qishda)". Qozon ro'yxatda yo'q, shuning uchun find undefined qaytardi. Keyin biz undefined.narx ni so'radik — dastur to'xtadi.
Tuzatish: find natijasi doim undefined bo'lishi mumkinligini unutmang. if bilan tekshiring yoki ?. ishlating:
const mahsulotlar = [{ nom: "Choynak", narx: 85000 }];
const topilgan = mahsulotlar.find((m) => m.nom === "Qozon");
console.log(topilgan?.narx ?? "Topilmadi"); // Topilmadi10.3 Jingalak qavsli callback'da return ni unutish
const narxlar = [45000, 120000, 35000];
const qimmat = narxlar.find((narx) => {
narx > 100000;
});
console.log(qimmat); // undefined120000 bor, lekin find hech narsa topmadi. Sababi: callback jingalak qavs ichida, return esa yo'q. Bunday funksiya har doim undefined qaytaradi. undefined esa falsy — find uchun bu "mos emas" degani. Xato xabari yo'q, shuning uchun bu xatoni topish qiyin.
Tuzatish: return narx > 100000; deb yozing yoki qavssiz qisqa shaklga o'ting: (narx) => narx > 100000.
10.4 Obyektni includes bilan qidirish
const savat = [{ nom: "Non" }, { nom: "Sut" }];
console.log(savat.includes({ nom: "Non" })); // falseKo'rinishi bir xil obyekt bor, lekin javob false. Ma'lumot turlari darsida ko'rgandik: obyekt o'zgaruvchida havola sifatida saqlanadi. Qavs ichidagi { nom: "Non" } — yangi, alohida obyekt. Massivdagisi bilan ichi bir xil, lekin ular ikki xil "quti".
Tuzatish: obyektni xususiyati bo'yicha qidiring: savat.some((m) => m.nom === "Non") — true. Havolalar haqida batafsil — havola semantikasi darsida.
10.5 Mavjud bo'lmagan metod nomi
const mevalar = ["olma", "nok"];
console.log(mevalar.contains("olma"));TypeError: mevalar.contains is not a functionTarjimasi: "mevalar.contains — funksiya emas". Boshqa dasturlash tillarida contains yoki has bor. JavaScript massivida bunday metod yo'q — mevalar.contains undefined bo'ladi, undefined ni esa chaqirib bo'lmaydi. Tuzatish: includes yozing. Bu xabarni ko'rsangiz, metod nomini harfma-harf tekshiring.
11. Mashqlar
1-mashq (oson): Menyu tekshiruvi
Choyxona menyusi: ["osh", "shashlik", "lag'mon", "manti", "somsa"].
includesbilan menyuda"manti"borligini tekshiring.indexOfbilan"lag'mon"ning o'rnini toping.includesbilan"pitsa"bormi — tekshiring.
Har bir natijani console.log bilan chiqaring. Eslatma: lag'mon so'zida apostrof bor — satrni qo'shtirnoq "..." bilan yozing.
Yechim
const menyu = ["osh", "shashlik", "lag'mon", "manti", "somsa"];
console.log(menyu.includes("manti")); // true
console.log(menyu.indexOf("lag'mon")); // 2
console.log(menyu.includes("pitsa")); // falseincludes "bormi?" savoliga true/false beradi. indexOf joyni beradi: osh — 0, shashlik — 1, lag'mon — 2.
2-mashq (o'rta): Imtihon natijalari
Guruhning test ballari: [72, 85, 56, 91, 64, 48, 77]. O'tish bali — 60.
findbilan 90 va undan yuqori birinchi ballni toping.findIndexbilan o'tolmagan (60 dan past) birinchi talabaning indeksini toping.somebilan kamida bitta talaba o'tolmaganini tekshiring.everybilan hamma 40 dan yuqori ball olganini tekshiring.
Ishora: har biriga arrow callback yozing, masalan (ball) => ball >= 90.
Yechim
const ballar = [72, 85, 56, 91, 64, 48, 77];
const alochi = ballar.find((ball) => ball >= 90);
const birinchiYiqilgan = ballar.findIndex((ball) => ball < 60);
const kimdirYiqildi = ballar.some((ball) => ball < 60);
const hammasi40danYuqori = ballar.every((ball) => ball > 40);
console.log(alochi); // 91
console.log(birinchiYiqilgan); // 2
console.log(kimdirYiqildi); // true
console.log(hammasi40danYuqori); // truefindIndex 2 qaytardi: 56 bali 2-indeksda. 48 ham 60 dan past, lekin u keyinroq turibdi — findIndex birinchisida to'xtaydi. every — true, chunki eng past ball 48, u ham 40 dan yuqori.
3-mashq (qiyin): Yetkazib berish boti
Jasurning botiga funksiya kerak. yetkazishMumkinmi(viloyat, savat) funksiyasi ikki narsani tekshirsin:
- Viloyat ro'yxatda bormi:
["toshkent", "samarqand", "buxoro", "navoiy"]. Mijoz katta harf bilan yozishi mumkin —toLowerCase()ishlating. - Savatdagi hamma mahsulot omborda bormi: har bir mahsulot obyektida
qoldiqxususiyati bor, u 0 dan katta bo'lishi kerak.
Savat bo'sh bo'lsa, funksiya false qaytarsin (bo'sh massivda every nima qaytarishini eslang). Hammasi joyida bo'lsa — true.
Ishora: funksiya ichida avval viloyatni tekshirib, erta qaytish (return false) qiling.
Yechim
const viloyatlar = ["toshkent", "samarqand", "buxoro", "navoiy"];
function yetkazishMumkinmi(viloyat, savat) {
if (!viloyatlar.includes(viloyat.toLowerCase())) {
return false;
}
if (savat.length === 0) {
return false;
}
return savat.every((m) => m.qoldiq > 0);
}
const savat1 = [
{ nom: "Choynak", qoldiq: 4 },
{ nom: "Piyola", qoldiq: 12 },
];
const savat2 = [
{ nom: "Choynak", qoldiq: 4 },
{ nom: "Dasturxon", qoldiq: 0 },
];
console.log(yetkazishMumkinmi("Buxoro", savat1)); // true
console.log(yetkazishMumkinmi("Xiva", savat1)); // false
console.log(yetkazishMumkinmi("NAVOIY", savat2)); // false
console.log(yetkazishMumkinmi("Toshkent", [])); // false- Birinchi chaqiruv: Buxoro ro'yxatda, ikkala mahsulot omborda —
true. - Ikkinchi: Xiva ro'yxatda yo'q — funksiya birinchi
ifda qaytdi. - Uchinchi: viloyat to'g'ri, lekin Dasturxon tugagan —
everyfalseberdi. - To'rtinchi: savat bo'sh.
lengthtekshiruvisizeverybu yerdatrueqaytargan bo'lardi.
12. Real ishda
Bu metodlar deyarli har bir JavaScript loyihasida bor:
- Online do'kon: mahsulot sahifasi ochilganda ro'yxatdan
findbilan kerakli mahsulot olinadi. "Savatda bormi?" —some. - Formalar: "hamma maydon to'g'ri to'ldirilganmi?" —
every. Kamida bitta xato bo'lsa, "Yuborish" tugmasi o'chiriladi. - Ruxsatlar: "foydalanuvchining rollari ichida
adminbormi?" —includes. - React (sayt yasash uchun mashhur vosita, kursda alohida o'rganamiz): ro'yxatdan bitta elementni yangilash yoki o'chirish uchun avval
findIndexbilan uning joyi topiladi.
Intervyularda ko'p so'raladigan savollar: "find va filter farqi nima?" (filter — keyingi darslardan birida). "includes va indexOf farqi nima?" — javob: NaN va natija turi. Endi siz bunga javob bera olasiz.
Xulosa
includes— "bormi?" (true/false);indexOf/lastIndexOf— "qayerda?" (indeks yoki-1).includesNaNni topadi (SameValueZero),indexOftopmaydi (===).find/findIndexshart bo'yicha birinchi mos elementni yoki indeksni beradi;findLast/findLastIndex— oxiridan.findtopmasa —undefined: natijani?.yokiifbilan tekshiring.some— kamida bittasi,every— hammasi. Bo'sh massivdaeverytrueberadi.- Hech biri massivni o'zgartirmaydi.
Keyingi dars: Kesish, birlashtirish va matnga aylantirish — massivdan bo'lak kesib olish, ikki massivni qo'shish va massivni chiroyli matnga aylantirishni o'rganamiz.
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!