Mundarija (37)
- Bu darsda
- 1. Nega bu kerak?
- 2. Mutatsiya nima?
- 3. Oxiri bilan ishlash: push va pop
- 3.1 push — oxiriga qo'shish
- 3.2 push nima qaytaradi?
- 3.3 pop — oxirgisini olib tashlash
- 3.4 Stek: oxirgi kirgan — birinchi chiqadi
- 4. Boshi bilan ishlash: unshift va shift
- 4.1 unshift — boshiga qo'shish
- 4.2 shift — birinchisini olib tashlash
- 4.3 Navbat: birinchi kelgan — birinchi ketadi
- 4.4 Tezlik haqida bir eslatma
- 4.5 To'rt metod — bitta jadvalda
- 5. splice — o'rtadan o'zgartirish
- 5.1 O'chirish
- 5.2 Qo'shish
- 5.3 Almashtirish
- 5.4 Manfiy indeks va oxirigacha o'chirish
- 5.5 O'zingiz to'ldiring
- 6. Massivni tozalash: length = 0
- 7. Tuzoq: delete savat[i]
- 8. Mutatsiya nega muhim?
- 8.1 Funksiya argumentni o'zgartirib qo'yishi
- 8.2 Nusxa bilan ishlaydigan metodlar
- 9. Ko'p uchraydigan xatolar
- 9.1 push natijasini massiv deb o'ylash
- 9.2 Zanjir qilib yozish
- 9.3 splice ning ikkinchi argumentini indeks deb o'ylash
- 9.4 splice va slice ni adashtirish
- 9.5 Massiv bo'lmagan narsaga push
- 10. Mashqlar
- 1-mashq (oson): Savat
- 2-mashq (o'rta): Telegram chat — oxirgi 3 ta xabar
- 3-mashq (qiyin): Bank navbati
- 11. Real ishda
- Xulosa
JavaScript massivga element qo'shish va olib tashlash: push, pop, shift, splice
Qisqacha:
pushmassiv oxiriga element qo'shadi,popoxirgisini olib tashlaydi.unshiftvashiftxuddi shu ishni massiv boshida qiladi. O'rtadan qo'shish, o'chirish yoki almashtirish uchunspliceishlatiladi. Bu metodlarning hammasi asl massivni o'zgartiradi (mutatsiya) va bir narsa qaytaradi:push— yangi uzunlikni,pop— olib tashlangan elementni.
Bu darsda
push,pop,unshift,shiftbilan massivning ikki chetidan element qo'sha va olib tashlay olasiz.- Har bir metod nima qaytarishini bilasiz va uni ishlata olasiz.
splicebilan o'rtadan element o'chira, qo'sha va almashtira olasiz.- Mutatsiya nima ekanini va nega muhimligini tushuntira olasiz.
length = 0hiylasini vadeletetuzog'ini bilasiz.
Oldin bilishingiz kerak: Massiv: yaratish va elementga murojaat, return va erta qaytish, Pure funksiya va side effect.
1. Nega bu kerak?
O'tgan darsda massiv yaratishni, elementni o'qish va almashtirishni o'rgandik. Lekin real ro'yxatlar joyida turmaydi.
Onlayn do'kondagi savatni o'ylang. Foydalanuvchi "Savatga qo'shish" tugmasini bosadi — ro'yxatga yangi mahsulot kiradi. Fikridan qaytadi — mahsulot chiqib ketadi. Telegram chatiga har daqiqada yangi xabar tushadi. Bankdagi navbatdan esa odamlar birin-ketin kassaga o'tadi.
Hozirgi bilimimiz bilan qo'shish mumkin, lekin noqulay: savat[savat.length] = "olma". O'chirish esa umuman chiqmaydi. savat[1] = undefined elementni o'chirmaydi — katak joyida qoladi, faqat ichi bo'shaydi.
Bu darsda massivni to'ldiradigan va bo'shatadigan beshta metodni o'rganamiz.
2. Mutatsiya nima?
Avval bitta muhim tushuncha.
Satr metodlari asl satrga tegmas edi. ism.toUpperCase() yangi satr qaytarardi, ism esa avvalgidek qolardi. Satr o'zgarmas edi.
Bu darsdagi metodlar boshqacha. Ular asl massivning o'zini o'zgartiradi. Bu mutatsiya (mutation) deyiladi — qiymatni yangisini yasamasdan, joyida o'zgartirish.
Hayotdan o'xshatish: sumkangizga non soldingiz. Sizga yangi sumka berilmadi — o'sha sumkaning ichi o'zgardi. Mutatsiya — xuddi shunday.
Shuning uchun har bir metodda ikki narsani kuzatamiz:
- Massiv qanday o'zgardi?
- Metod nima qaytardi?
Boshlovchilar ko'pincha shu ikkisini adashtiradi. Keling, har bir metodda ikkalasini ham aniq ko'ramiz.
3. Oxiri bilan ishlash: push va pop
3.1 push — oxiriga qo'shish
const savat = ["non", "sut"];
savat.push("tuxum");
console.log(savat); // [ 'non', 'sut', 'tuxum' ]push inglizcha "itarmoq" degani: yangi element ro'yxatning oxiriga "itarib" qo'yiladi.
Bir yo'la bir nechta element ham qo'shish mumkin — ular vergul bilan beriladi:
const savat = ["non"];
savat.push("sut", "qatiq", "pishloq");
console.log(savat); // [ 'non', 'sut', 'qatiq', 'pishloq' ]3.2 push nima qaytaradi?
push massivni o'zgartiradi va yangi uzunlikni qaytaradi:
const savat = ["non", "sut"];
const natija = savat.push("tuxum");
console.log(natija); // 3
console.log(savat); // [ 'non', 'sut', 'tuxum' ]natija da massiv emas, son — 3. Bu savatdagi mahsulotlar soni. Ba'zan qulay: "Savatda endi 3 ta mahsulot" deb yozish uchun alohida length so'rash shart emas.
3.3 pop — oxirgisini olib tashlash
pop oxirgi elementni massivdan chiqaradi va o'sha elementni qaytaradi:
const savat = ["non", "sut", "tuxum"];
const olibTashlangan = savat.pop();
console.log(olibTashlangan); // tuxum
console.log(savat); // [ 'non', 'sut' ]pop ga argument berilmaydi — u doim oxirgisini oladi. Olib tashlangan element yo'qolib ketmaydi: siz uni o'zgaruvchiga saqlab, ishlata olasiz.
Massiv bo'sh bo'lsa-chi? Xato chiqmaydi:
const savat = [];
console.log(savat.pop()); // undefined
console.log(savat.length); // 0Olib tashlanadigan narsa yo'q — pop undefined qaytaradi.
3.4 Stek: oxirgi kirgan — birinchi chiqadi
push va pop birga ishlatilsa, stek (stack) hosil bo'ladi. Stek — faqat bitta uchidan qo'shiladigan va olinadigan ro'yxat.
Hayotdan o'xshatish: choyxonadagi likopchalar taxlami. Yuvilgan likopcha tepaga qo'yiladi. Kerak bo'lganda ham tepadagisi olinadi. Eng oxirgi qo'yilgan likopcha birinchi bo'lib ishlatiladi.
Matn muharririda "Bekor qilish" (Ctrl+Z) ham aynan stek bilan ishlaydi:
const tarix = [];
tarix.push("Salom yozildi");
tarix.push("Vergul qo'shildi");
tarix.push("Ism yozildi");
console.log(tarix.pop()); // Ism yozildi
console.log(tarix.pop()); // Vergul qo'shildi
console.log(tarix); // [ 'Salom yozildi' ]Har bir amal push bilan tarixga yoziladi. Ctrl+Z bosilganda pop eng oxirgi amalni oladi va bekor qiladi. Rekursiya darsidagi chaqiruvlar steki (call stack) ham xuddi shu tamoyilda ishlaydi.
Tekshirib ko'ring: Konsolda nima chiqadi?
jsconst a = [10, 20]; console.log(a.push(30, 40)); console.log(a.pop());
Javob
4 va 40. push(30, 40) ikki element qo'shdi, massivda 4 ta element bo'ldi — push shu yangi uzunlikni qaytaradi. pop() oxirgi elementni — 40 ni — olib tashlaydi va qaytaradi. Oxirida a — [ 10, 20, 30 ].
4. Boshi bilan ishlash: unshift va shift
4.1 unshift — boshiga qo'shish
unshift elementni massivning boshiga qo'shadi va, push kabi, yangi uzunlikni qaytaradi:
const navbat = ["Malika", "Jasur"];
const uzunlik = navbat.unshift("Ali");
console.log(uzunlik); // 3
console.log(navbat); // [ 'Ali', 'Malika', 'Jasur' ]Bir narsaga e'tibor bering: qolgan elementlarning indeksi o'zgardi. Avval "Malika" — navbat[0] edi, endi — navbat[1]. Boshga element qo'shilsa, hamma bir qadam o'ngga suriladi.
4.2 shift — birinchisini olib tashlash
shift birinchi elementni chiqaradi va uni qaytaradi. Qolganlar bir qadam chapga suriladi:
const navbat = ["Ali", "Malika", "Jasur"];
const kassada = navbat.shift();
console.log(kassada); // Ali
console.log(navbat); // [ 'Malika', 'Jasur' ]
console.log(navbat[0]); // MalikaNomlar biroz chalkash tuyulishi tabiiy. Eslab qolish usuli: shift va unshift — ikkalasi ham massiv boshi bilan ishlaydi. Qisqa nom (shift) — olib tashlaydi, uzun nom (unshift) — qo'shadi. pop / push juftligi ham xuddi shunday: qisqasi oladi, uzuni qo'shadi.
4.3 Navbat: birinchi kelgan — birinchi ketadi
push va shift birga ishlatilsa, navbat (queue) hosil bo'ladi. Yangi odam oxiriga qo'shiladi, xizmat esa boshdagiga ko'rsatiladi:
const navbat = [];
navbat.push("Ali");
navbat.push("Malika");
navbat.push("Jasur");
console.log(`Kassaga: ${navbat.shift()}`); // Kassaga: Ali
console.log(`Kassaga: ${navbat.shift()}`); // Kassaga: Malika
console.log(navbat); // [ 'Jasur' ]Bankdagi elektron navbat, taksi buyurtmalari, Telegram botga kelgan xabarlarni qayta ishlash — hammasi shu tamoyilda ishlaydi.
| Tuzilma | Metodlar | Qoida | Hayotda |
|---|---|---|---|
| Stek | push + pop |
Oxirgi kirgan — birinchi chiqadi | Likopchalar, Ctrl+Z |
| Navbat | push + shift |
Birinchi kirgan — birinchi chiqadi | Bank navbati |
4.4 Tezlik haqida bir eslatma
push va pop juda tez ishlaydi: ular faqat oxiriga tegadi. shift va unshift esa boshqa elementlarning hammasini bir qadam surib, qayta raqamlab chiqadi.
10 yoki 1000 elementli massivda buni sezmaysiz. Lekin yuz minglab elementli massivda shift ni sikl ichida chaqirish dasturni sekinlashtiradi. Buni algoritmlar qismida chuqurroq ko'ramiz. Hozircha qoida: imkoni bo'lsa, oxiri bilan ishlang.
4.5 To'rt metod — bitta jadvalda
| Metod | Nima qiladi | Nima qaytaradi |
|---|---|---|
push(x) |
Oxiriga qo'shadi | Yangi uzunlik |
pop() |
Oxirgisini oladi | Olingan element |
unshift(x) |
Boshiga qo'shadi | Yangi uzunlik |
shift() |
Birinchisini oladi | Olingan element |
Qonuniyatni ko'ryapsizmi? Qo'shadiganlar — uzunlikni, oladiganlar — elementni qaytaradi.
Tekshirib ko'ring:
const a = ["b", "c"];massividaa.unshift("a")dan keyina[1]nimaga teng?
Javob
"b". unshift "a" ni boshiga qo'ydi: [ 'a', 'b', 'c' ]. Hamma element bir qadam suriladi, shuning uchun avval 0-indeksda turgan "b" endi 1-indeksda.
5. splice — o'rtadan o'zgartirish
push, pop, shift, unshift faqat massivning chetlari bilan ishlaydi. O'rtadagi elementni-chi? Masalan, savatdagi ikkinchi mahsulotni o'chirish kerak bo'lsa?
Buning uchun splice bor. U universal: o'chiradi ham, qo'shadi ham, almashtiradi ham. Inglizcha "splice" — arqon yoki kinoplyonkani kesib, ulash degani.
Umumiy ko'rinishi:
massiv.splice(qayerdan, nechta, ...qoshiladiganlar);qayerdan— qaysi indeksdan boshlash.nechta— nechta elementni o'chirish....qoshiladiganlar— o'sha joyga qo'yiladigan yangi elementlar (ixtiyoriy). Bu yerdagi...— "istalgancha argument" degan belgi, kodda yozilmaydi.
splice doim o'chirilgan elementlar massivini qaytaradi. Hech narsa o'chirilmasa — bo'sh massiv [].
5.1 O'chirish
const savat = ["non", "sut", "tuxum", "olma"];
const ochirilgan = savat.splice(1, 2);
console.log(ochirilgan); // [ 'sut', 'tuxum' ]
console.log(savat); // [ 'non', 'olma' ]splice(1, 2) — "1-indeksdan boshlab 2 ta elementni o'chir". "sut" va "tuxum" chiqib ketdi va massiv ko'rinishida qaytdi.
Eng ko'p uchraydigan holat — bitta elementni o'chirish: splice(indeks, 1).
5.2 Qo'shish
Ikkinchi argument 0 bo'lsa, hech narsa o'chmaydi — faqat qo'shiladi:
const kunlar = ["Dushanba", "Chorshanba"];
kunlar.splice(1, 0, "Seshanba");
console.log(kunlar); // [ 'Dushanba', 'Seshanba', 'Chorshanba' ]splice(1, 0, "Seshanba") — "1-indeksga borib, 0 ta element o'chir va "Seshanba" ni qo'y". Qolganlar o'ngga surildi.
5.3 Almashtirish
O'chirish va qo'shishni birga qilsa — almashtirish bo'ladi:
const savat = ["non", "sut", "tuxum"];
const eski = savat.splice(1, 1, "qatiq");
console.log(eski); // [ 'sut' ]
console.log(savat); // [ 'non', 'qatiq', 'tuxum' ]Bitta elementni almashtirish uchun savat[1] = "qatiq" ham yetardi. splice ning afzalligi — bir elementni bir nechtasiga almashtira oladi: splice(1, 1, "qatiq", "kefir").
5.4 Manfiy indeks va oxirigacha o'chirish
qayerdan manfiy bo'lsa, oxiridan sanaladi — xuddi at(-1) kabi. nechta berilmasa, o'sha joydan oxirigacha hammasi o'chadi:
const xabarlar = ["Salom", "Qalaysiz?", "Rahmat", "Xayr"];
const oxirgiIkki = xabarlar.splice(-2);
console.log(oxirgiIkki); // [ 'Rahmat', 'Xayr' ]
console.log(xabarlar); // [ 'Salom', 'Qalaysiz?' ]| Maqsad | Yozilishi | Qaytaradi |
|---|---|---|
i dagi elementni o'chirish |
a.splice(i, 1) |
[o'chirilgan] |
i ga x ni qo'shish |
a.splice(i, 0, x) |
[] |
i dagisini x ga almashtirish |
a.splice(i, 1, x) |
[eski] |
i dan oxirigacha o'chirish |
a.splice(i) |
[o'chirilganlar] |
5.5 O'zingiz to'ldiring
Kinoteatr ro'yxatida "Shum bola" filmi yo'q. Uni "O'tkan kunlar" bilan "Abdullajon" orasiga qo'shing:
const filmlar = ["O'tkan kunlar", "Abdullajon"];
filmlar.splice(1, ___, "Shum bola");
console.log(filmlar);
// [ "O'tkan kunlar", 'Shum bola', 'Abdullajon' ]Bo'sh joyga qanday son yoziladi?
Javob
0. Biz hech narsani o'chirmoqchi emasmiz, faqat qo'shyapmiz. 1 yozsak, "Abdullajon" o'chib ketardi va uning o'rniga "Shum bola" turardi.
Node apostrofli satrni qo'shtirnoqda ko'rsatganiga e'tibor bering: "O'tkan kunlar". Satr ichida ' bor — shuning uchun Node chalkashmaslik uchun boshqa qo'shtirnoqni tanlaydi.
6. Massivni tozalash: length = 0
Massivning length xususiyatiga qiymat yozish mumkin. Bu massivni qisqartiradi:
const savat = ["non", "sut", "tuxum", "olma"];
savat.length = 2;
console.log(savat); // [ 'non', 'sut' ]
savat.length = 0;
console.log(savat); // []length = 0 — massivni butunlay bo'shatishning eng qisqa usuli. Buyurtma rasmiylashtirilgach savatni tozalash kabi holatlarda ishlatiladi.
Nega savat = [] emas? Birinchidan, savat — const, unga yangi massiv berib bo'lmaydi. Ikkinchidan, savat = [] eski massivni tozalamaydi — shunchaki nomni boshqa, yangi massivga bog'laydi. Bu farq havola semantikasi darsida juda muhim bo'ladi. length = 0 esa aynan shu massivning ichini bo'shatadi — bu ham mutatsiya.
7. Tuzoq: delete savat[i]
JavaScript'da delete degan operator bor. U obyektdan xususiyatni o'chiradi — obyekt darsida ko'ramiz. Massivda ham "ishlayotgandek" ko'rinadi:
const savat = ["non", "sut", "tuxum"];
delete savat[1];
console.log(savat); // [ 'non', <1 empty item>, 'tuxum' ]
console.log(savat.length); // 3Element o'chdi, lekin uning katagi joyida qoldi — <1 empty item>, ya'ni teshik. length hamon 3. Qolgan elementlar surilmadi.
Massivdan element o'chirishning to'g'ri yo'li — splice(indeks, 1). Massivda delete ishlatmang. Teshiklar nega xavfli ekanini teshikli massivlar darsida ko'rasiz.
Tekshirib ko'ring:
const a = [1, 2, 3];massividan2ni o'chirish kerak.delete a[1]vaa.splice(1, 1)dan keyina.lengthqanday bo'ladi?
Javob
delete a[1] dan keyin — 3, chunki katak joyida qoladi, faqat ichi bo'shaydi. a.splice(1, 1) dan keyin — 2: element butunlay chiqib ketadi va 3 uning o'rniga suriladi.
8. Mutatsiya nega muhim?
8.1 Funksiya argumentni o'zgartirib qo'yishi
Mutatsiya qulay, lekin kutilmagan joyda xavfli. Mana misol. Navbatdagi birinchi odamning ismini faqat ko'rsatadigan funksiya yozdik:
function birinchisiniKorsat(navbat) {
return navbat.shift();
}
const navbat = ["Ali", "Malika", "Jasur"];
console.log(birinchisiniKorsat(navbat)); // Ali
console.log(navbat); // [ 'Malika', 'Jasur' ]Funksiya ismni ko'rsatdi-yu, Alini navbatdan chiqarib ham yubordi! Uni chaqirgan odam bunga tayyor emas edi. Funksiya tashqaridagi massivni o'zgartirdi — bu yon ta'sir (side effect).
Faqat ko'rish kerak bo'lsa, mutatsiya qilmaydigan usulni tanlang — navbat[0] yoki navbat.at(0):
function birinchisiniKorsat(navbat) {
return navbat[0];
}
const navbat = ["Ali", "Malika", "Jasur"];
console.log(birinchisiniKorsat(navbat)); // Ali
console.log(navbat); // [ 'Ali', 'Malika', 'Jasur' ]Qoida: funksiya massivni o'zgartirsa, bu uning nomida ko'rinsin (navbatdanChiqar, savatgaQosh). Faqat o'qisa — hech narsani o'zgartirmasin.
8.2 Nusxa bilan ishlaydigan metodlar
Ba'zan asl massivga tegmasdan, o'zgartirilgan nusxa kerak bo'ladi. Zamonaviy JavaScript'da (2023-yildan) buning uchun alohida metodlar bor. Ikkitasini tanishtirib qo'yamiz:
const savat = ["non", "sut", "tuxum"];
const sutsiz = savat.toSpliced(1, 1);
const yangi = savat.with(0, "somsa");
console.log(sutsiz); // [ 'non', 'tuxum' ]
console.log(yangi); // [ 'somsa', 'sut', 'tuxum' ]
console.log(savat); // [ 'non', 'sut', 'tuxum' ]toSpliced—splicening "nusxa" varianti: xuddi shu argumentlarni oladi, lekin natijani yangi massivda qaytaradi.with(indeks, qiymat)—savat[0] = "somsa"ning "nusxa" varianti.
Asl savat o'zgarmay qoldi. Bu metodlarni nusxa bilan o'zgartirish darsida to'liq o'rganamiz. Ular ayniqsa React'da (sayt yasash vositasi, kursda alohida o'rganamiz) kerak bo'ladi — u yerda massivni mutatsiya qilish taqiqlanadi.
9. Ko'p uchraydigan xatolar
9.1 push natijasini massiv deb o'ylash
let savat = ["non"];
savat = savat.push("sut");
console.log(savat); // 2Massiv yo'qoldi, o'rnida son qoldi! push massivni qaytarmaydi — u yangi uzunlikni qaytaradi. savat = ... esa shu sonni savat ga yozdi.
To'g'risi — natijani qayta yozmaslik. push massivni o'zi o'zgartiradi:
const savat = ["non"];
savat.push("sut");
console.log(savat); // [ 'non', 'sut' ]Massivni const bilan e'lon qilish sizni bu xatodan himoya qiladi: savat = savat.push(...) darhol TypeError: Assignment to constant variable. beradi.
9.2 Zanjir qilib yozish
const savat = ["non"];
savat.push("sut").push("tuxum");TypeError: savat.push(...).push is not a functionTarjimasi: "savat.push(...) natijasining push i — funksiya emas". Birinchi push son (2) qaytardi. Sonda push metodi yo'q. Bir nechta element qo'shish uchun bitta chaqiruv yetadi: savat.push("sut", "tuxum").
9.3 splice ning ikkinchi argumentini indeks deb o'ylash
const harflar = ["a", "b", "c", "d", "e"];
harflar.splice(1, 3);
console.log(harflar); // [ 'a', 'e' ]"1-indeksdan 3-indeksgacha o'chiraman" deb o'ylagan odam [ 'a', 'd', 'e' ] ni kutadi. Lekin ikkinchi argument — son, qayergacha emas, nechta. splice(1, 3) — "1-indeksdan boshlab 3 ta element": b, c, d.
9.4 splice va slice ni adashtirish
Kesish darsida satrlarning slice metodini o'rgangan edik. Massivda ham slice bor va nomi splice ga juda o'xshaydi. Lekin farqi katta:
| Metod | Asl massiv | Ikkinchi argument |
|---|---|---|
splice |
O'zgaradi | Nechta element |
slice |
O'zgarmaydi | Qayergacha (indeks) |
Massiv slice ini kesish va birlashtirish darsida batafsil ko'ramiz. Hozircha eslab qoling: nomida p bor splice — massivni "parchalaydi", ya'ni o'zgartiradi.
9.5 Massiv bo'lmagan narsaga push
let xabarlar;
xabarlar.push("Salom");TypeError: Cannot read properties of undefined (reading 'push')Tarjimasi: "undefined ning xususiyatlarini o'qib bo'lmaydi (push ni o'qishda)". xabarlar ga qiymat berilmagan — u undefined. Unda push metodi yo'q. Tuzatish: bo'sh massiv bilan boshlang — const xabarlar = [];.
Satrga push qilsangiz ham xato chiqadi: TypeError: ism.push is not a function. Satrda push yo'q — u o'zgarmas.
10. Mashqlar
1-mashq (oson): Savat
Bo'sh savat massividan boshlang. Quyidagilarni ketma-ket bajaring va har qadamdan keyin savatni chiqaring:
"non"va"sut"ni oxiriga qo'shing."choy"ni boshiga qo'shing.- Oxirgi mahsulotni olib tashlang va
Olib tashlandi: sutdeb chiqaring.
Yechim
const savat = [];
savat.push("non", "sut");
console.log(savat); // [ 'non', 'sut' ]
savat.unshift("choy");
console.log(savat); // [ 'choy', 'non', 'sut' ]
const olingan = savat.pop();
console.log(`Olib tashlandi: ${olingan}`); // Olib tashlandi: sut
console.log(savat); // [ 'choy', 'non' ]pop olib tashlangan elementni qaytaradi — shuning uchun uni olingan ga saqlab, xabarda ishlata oldik.
2-mashq (o'rta): Telegram chat — oxirgi 3 ta xabar
Chat oynasida faqat oxirgi 3 ta xabar ko'rinadi. xabarQosh(chat, matn) funksiyasini yozing:
- Yangi xabarni
chatoxiriga qo'shsin. - Xabarlar 3 tadan ko'p bo'lib qolsa, eng eski xabarni (birinchisini) olib tashlasin.
Keyin bo'sh chatga 4 ta xabar qo'shib, natijani chiqaring. Ishora: tekshiruv uchun if va length kerak.
Yechim
function xabarQosh(chat, matn) {
chat.push(matn);
if (chat.length > 3) {
chat.shift();
}
}
const chat = [];
xabarQosh(chat, "Salom!");
xabarQosh(chat, "Qalaysiz?");
xabarQosh(chat, "Ertaga uchrashamizmi?");
xabarQosh(chat, "Soat 10 da");
console.log(chat.length); // 3
console.log(chat[0]); // Qalaysiz?
console.log(chat.at(-1)); // Soat 10 daBu yerda navbat tamoyili ishladi: yangi xabar oxiriga (push), eng eskisi boshidan chiqadi (shift). Funksiya nomi — xabarQosh — u massivni o'zgartirishini ochiq aytadi — mutatsiya haqidagi qoidani eslang.
3-mashq (qiyin): Bank navbati
Bank navbatini boshqaradigan uchta funksiya yozing:
navbatgaQosh(navbat, ism, vip)—viptruebo'lsa, odamni boshiga qo'shadi, aks holda oxiriga.keyingisi(navbat)— navbat bo'sh bo'lsa"Navbat bo'sh"qaytaradi. Aks holda birinchi odamni navbatdan chiqarib,"Kassaga: Ali"kabi satr qaytaradi.navbatdanChiq(navbat, indeks)— shu indeksdagi odamni navbatdan olib tashlaydi (u kutishdan charchab ketdi).
Ishora: bo'shlikni length === 0 bilan tekshiring, erta qaytish ishlating. Satr uchun template literal.
Yechim
function navbatgaQosh(navbat, ism, vip) {
if (vip) {
navbat.unshift(ism);
} else {
navbat.push(ism);
}
}
function keyingisi(navbat) {
if (navbat.length === 0) {
return "Navbat bo'sh";
}
return `Kassaga: ${navbat.shift()}`;
}
function navbatdanChiq(navbat, indeks) {
navbat.splice(indeks, 1);
}
const navbat = [];
navbatgaQosh(navbat, "Ali", false);
navbatgaQosh(navbat, "Malika", false);
navbatgaQosh(navbat, "Jasur", true);
navbatgaQosh(navbat, "Dilnoza", false);
console.log(navbat);
navbatdanChiq(navbat, 2);
console.log(navbat);
console.log(keyingisi(navbat));
console.log(keyingisi(navbat));
console.log(keyingisi(navbat));
console.log(keyingisi(navbat));Konsolda:
[ 'Jasur', 'Ali', 'Malika', 'Dilnoza' ]
[ 'Jasur', 'Ali', 'Dilnoza' ]
Kassaga: Jasur
Kassaga: Ali
Kassaga: Dilnoza
Navbat bo'shQadamma-qadam: Jasur VIP — u Ali va Malikadan keyin kelgan bo'lsa ham boshiga turdi. navbatdanChiq(navbat, 2) 2-indeksdagi Malikani chiqardi. Keyin keyingisi odamlarni birma-bir kassaga chaqirdi. Navbat bo'shagach, shift ga yetmasdan erta qaytish ishladi.
11. Real ishda
- Savat va ro'yxatlar: onlayn do'konda "Savatga qo'shish" —
push, "O'chirish" —splice(i, 1). Vazifalar ro'yxati (to-do), sevimlilar, kontaktlar — hammasi shunday. - Navbatlar: serverda "ish navbati" bor: foydalanuvchilarga email yuborish, rasm siqish kabi og'ir ishlar navbatga (
push) qo'yiladi va birma-bir (shift) bajariladi. Katta loyihalarda buning uchun maxsus vositalar ishlatiladi, lekin g'oya bir xil. - Bekor qilish (undo): Figma, VS Code, Google Docs — Ctrl+Z hammasida stek bilan ishlaydi.
- React: React'da massivni mutatsiya qilish mumkin emas —
pusho'rniga nusxa yasaladi,spliceo'rnigatoSpliced. Mutatsiya nima ekanini hozir tushunganingiz o'sha darslarda juda asqotadi.
Intervyularda "push nima qaytaradi?", "splice va slice farqi nima?", "stek va navbat farqi nima?" savollari ko'p beriladi. Ularning hammasiga endi javob bera olasiz.
Xulosa
push/pop— massiv oxiri bilan,unshift/shift— boshi bilan ishlaydi.- Qo'shadigan metodlar yangi uzunlikni, oladiganlar olingan elementni qaytaradi.
splice(qayerdan, nechta, ...yangilar)— o'rtadan o'chiradi, qo'shadi, almashtiradi; o'chirilganlarni massivda qaytaradi.- Bu metodlarning hammasi mutatsiya qiladi — asl massiv o'zgaradi. Funksiya argument massivini o'zgartirsa, bu yon ta'sir.
length = 0— massivni tozalaydi.delete a[i]— teshik qoldiradi, ishlatmang.- Nusxa kerak bo'lsa —
toSplicedvawith.
Oldingi dars: Massiv: yaratish va elementga murojaat.
Keyingi dars: Massiv bo'ylab yurish — for, for...of va forEach bilan massivning har bir elementi ustida ish bajarishni o'rganamiz.
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!