IlmHamroh
JavaScript Full-stack/8-qism. JavaScript asoslari52/61-dars17 daqiqa
Mundarija (38)

JavaScript massivni kesish va birlashtirish: slice, concat, join

Qisqacha: Massivdan bo'lak olish uchun slice(boshi, oxiri) ishlatiladi: u yangi massiv qaytaradi, asl massiv o'zgarmaydi (splice esa o'zgartiradi). Ikki massivni concat birlashtiradi. Massivni satrga join(", ") aylantiradi, satrni massivga esa split bo'ladi. reverse — istisno: u asl massivni teskari aylantirib yuboradi. Qiymat massivmi — Array.isArray bilan tekshiriladi.

Bu darsda

  • slice bilan massivdan bo'lak kesib, nusxa ola olasiz.
  • slice va splice farqini jadval bilan tushuntira olasiz.
  • concat bilan massivlarni birlashtira olasiz va uni push dan farqlaysiz.
  • join, toString va split bilan massiv ↔ satr o'rtasida o'tkaza olasiz.
  • reverse nega xavfli ekanini bilasiz va Array.isArray bilan massivni taniysiz.

Oldin bilishingiz kerak: Element qo'shish va olib tashlash, Massiv bo'ylab yurish, Kesish, bo'lish va to'ldirish.

1. Nega bu kerak?

Oldingi darsda massivdan kerakli elementni qidirdik. Endi massivdan bo'lak olish va massivlarni birlashtirish navbati.

Malika Telegram kanali uchun bot yozyapti. Kanaldagi xabarlar massivda saqlanadi. Bot "eng so'nggi 2 ta xabar"ni ko'rsatishi kerak. splice bilan urinib ko'raylik:

js
const xabarlar = ["Salom!", "Yangi dars", "Chegirma", "Tadbir"];

const songgi = xabarlar.splice(-2);

console.log(songgi); // [ 'Chegirma', 'Tadbir' ]
console.log(xabarlar); // [ 'Salom!', 'Yangi dars' ]

Kerakli ikki xabar olindi. Lekin kanalning o'zidan ular yo'qolib qoldi! splice asl massivni o'zgartiradi. Biz esa faqat "qarab olmoqchi" edik, kanalni buzmoqchi emas edik.

Bu darsdagi metodlar aynan shu muammoni hal qiladi. Ular asl massivga tegmaydi va natijani yangi massiv yoki satr sifatida beradi. Bitta istisno bor — reverse. Uni alohida, diqqat bilan ko'ramiz.

2. slice — bo'lak kesib olish

2.1 Boshi va oxiri

slice sizga tanish: satr darsida u satrdan bo'lak kesib olgan edi. Massivda ham xuddi shunday ishlaydi. Ikki argument oladi: qaysi indeksdan boshlash va qaysi indeksda to'xtash.

js
const joylar = ["Toshkent", "Samarqand", "Buxoro", "Xiva", "Nukus"];

console.log(joylar.slice(1, 3)); // [ 'Samarqand', 'Buxoro' ]

Qoida satrdagi bilan bir xil: oxiri kirmaydi. slice(1, 3) — 1 va 2-indekslar. 3-indeksdagi Xiva kirmadi. Bo'lak uzunligi = oxiri - boshi = 2.

2.2 Oxirini yozmaslik va manfiy indeks

Ikkinchi argument bo'lmasa, slice massiv oxirigacha kesadi. Manfiy indeks esa oxiridan sanaladi: -1 — oxirgi element, -2 — undan oldingisi.

js
const xabarlar = ["Salom!", "Yangi dars", "Chegirma", "Tadbir"];

console.log(xabarlar.slice(2));
console.log(xabarlar.slice(-2));
console.log(xabarlar.slice(0, -1));

Konsolda:

text
[ 'Chegirma', 'Tadbir' ]
[ 'Chegirma', 'Tadbir' ]
[ 'Salom!', 'Yangi dars', 'Chegirma' ]
  • slice(-2) — "oxirgi 2 ta". Massivda 4 ta xabarmi yoki 4000 ta — farqi yo'q.
  • slice(0, -1) — "oxirgisidan tashqari hammasi".

2.3 Asl massiv o'zgarmaydi

Endi Malikaning muammosini slice bilan yechamiz:

js
const xabarlar = ["Salom!", "Yangi dars", "Chegirma", "Tadbir"];

const songgi = xabarlar.slice(-2);

console.log(songgi); // [ 'Chegirma', 'Tadbir' ]
console.log(xabarlar.length); // 4

Kerakli xabarlar olindi, kanalda esa hammasi joyida — 4 ta xabar. slice asl massivdan faqat nusxa ko'chirib oldi. Xuddi kitobdan kerakli sahifani fotoga olgandek: rasm sizda, kitob esa butun.

2.4 slice() — butun massivning nusxasi

Argumentsiz slice() butun massivni nusxalaydi. Nusxa — alohida massiv. Unga qo'shgan narsangiz asliga ta'sir qilmaydi:

js
const asl = ["non", "sut"];
const nusxa = asl.slice();

nusxa.push("tuxum");

console.log(asl); // [ 'non', 'sut' ]
console.log(nusxa); // [ 'non', 'sut', 'tuxum' ]

Nega bu muhim? Ma'lumot turlari darsidan eslang: const b = a massivni nusxalamaydi, faqat havolani ko'chiradi. Ikkala nom bitta massivga qarab qoladi. slice() esa haqiqatan yangi massiv yasaydi.

Diqqat: Massiv ichida obyektlar bo'lsa, slice() obyektlarning o'zini emas, havolalarini nusxalaydi. Bu sayoz nusxa deyiladi. Hozircha oddiy qiymatlar (son, satr) bilan ishlayapmiz — ular uchun muammo yo'q. Batafsil — sayoz va chuqur nusxalash darsida.

2.5 Chegaradan chiqsa — xato yo'q

js
const sonlar = [10, 20, 30];

console.log(sonlar.slice(1, 100)); // [ 20, 30 ]
console.log(sonlar.slice(5)); // []

Massivda 100 ta element yo'q, lekin slice xato bermaydi — borini qaytaradi. Boshi massivdan tashqarida bo'lsa — bo'sh massiv [].

Tekshirib ko'ring: const t = ["a", "b", "c", "d", "e"]; bo'lsa, t.slice(1, 4), t.slice(-3) va t.slice(3, 1) nima qaytaradi?

Javob

[ 'b', 'c', 'd' ], [ 'c', 'd', 'e' ] va []. Birinchisi — 1, 2, 3-indekslar (4 kirmaydi). Ikkinchisi — oxirgi uchta. Uchinchisida boshi oxiridan katta, shuning uchun slice bo'sh massiv qaytaradi.

3. slice va splice: nomi o'xshash, ishi boshqa

Bu ikki metod boshlovchilarni eng ko'p chalkashtiradi. Nomlari bir harf bilan farq qiladi, lekin ishi butunlay boshqa. Bir xil argumentlar bilan chaqirib ko'ramiz:

js
const a = ["a", "b", "c", "d"];
console.log(a.slice(1, 3)); // [ 'b', 'c' ]
console.log(a); // [ 'a', 'b', 'c', 'd' ]

const b = ["a", "b", "c", "d"];
console.log(b.splice(1, 3)); // [ 'b', 'c', 'd' ]
console.log(b); // [ 'a' ]

Ikki farq ko'rindi:

  1. slice asl massivga tegmadi. splice esa undan uchta elementni olib tashladi.
  2. Ikkinchi argumentning ma'nosi har xil. slice(1, 3) da 3 — "3-indeksgacha". splice(1, 3) da esa 3 — "3 ta element".
slice splice
Asl massiv O'zgarmaydi O'zgaradi (mutatsiya)
Nima qaytaradi Kesilgan bo'lak (nusxa) O'chirilgan elementlar
2-argument Oxirgi indeks (kirmaydi) Nechta element o'chirish
Qachon "Qarab olish", nusxa Massivni joyida tahrirlash

Eslab qolish uchun: splice — slice dan bitta harf uzunroq va ko'proq ish qiladi. U kesib qolmay, massivni tahrirlaydi.

Tekshirib ko'ring: const s = [1, 2, 3, 4, 5];. s.slice(2, 4) dan keyin s.length nechaga teng? s.splice(2, 4) dan keyin-chi?

Javob

slice dan keyin — 5: slice massivni o'zgartirmaydi. splice(2, 4) esa 2-indeksdan boshlab 4 ta element o'chirishga urinadi. U yerda faqat 3 ta bor (3, 4, 5) — hammasi o'chadi. Massivda [1, 2] qoladi, length — 2.

4. concat — massivlarni birlashtirish

4.1 Ikki ro'yxatdan bitta

Do'konning ikki filiali bor. Har birining mahsulotlar ro'yxati alohida. Umumiy ro'yxat kerak:

js
const chilonzor = ["non", "sut"];
const yunusobod = ["choy", "shakar"];

const hammasi = chilonzor.concat(yunusobod);

console.log(hammasi); // [ 'non', 'sut', 'choy', 'shakar' ]
console.log(chilonzor); // [ 'non', 'sut' ]

concat (inglizcha "concatenate" — "ulash") ikkala massivning elementlarini ketma-ket yangi massivga yig'di. Asl massivlar o'zgarmadi.

Bir nechta massiv yoki oddiy qiymatlarni ham bersa bo'ladi:

js
const navbat = ["Ali"];

console.log(navbat.concat("Vali", ["Soli", "Guli"]));

Konsolda:

text
[ 'Ali', 'Vali', 'Soli', 'Guli' ]

Massiv argumentlar "ochiladi" — ularning elementlari qo'shiladi. Oddiy qiymat ("Vali") o'zicha qo'shiladi.

4.2 concat faqat bir qavat ochadi

Massiv ichidagi massivlar esa ochilmaydi:

js
const a = [1, [2, 3]];
const b = [4, [5]];

console.log(a.concat(b)); // [ 1, [ 2, 3 ], 4, [ 5 ] ]

concat faqat b ning o'zini ochdi. [2, 3] va [5] ichma-ich holida qoldi. Ichma-ich massivni butunlay "tekislash" uchun flat metodi bor — u bilan dars oxirida qisqacha tanishamiz.

4.3 Zamonaviy usul: spread [...a, ...b]

Unicode darsida [...matn] yozuvini ko'rgan edik: uch nuqta ... satrni bo'laklarga "sochib" chiqaradi. Massivni ham xuddi shunday sochish mumkin. Shunda concat o'rniga bunday yozsa bo'ladi:

js
const chilonzor = ["non", "sut"];
const yunusobod = ["choy", "shakar"];

const hammasi = [...chilonzor, ...yunusobod];
const nusxa = [...chilonzor];

console.log(hammasi); // [ 'non', 'sut', 'choy', 'shakar' ]
console.log(nusxa); // [ 'non', 'sut' ]

[...chilonzor] — slice() kabi yangi nusxa. Zamonaviy kodda bu shakl concat va slice() dan ko'ra ko'proq uchraydi. Uch nuqtaning barcha imkoniyatlari — spread va rest darsida.

Tekshirib ko'ring: ["a"].concat(["b", ["c"]]) nima qaytaradi?

Javob

[ 'a', 'b', [ 'c' ] ]. concat argument massivni bir qavat ochadi: "b" va ["c"] qo'shiladi. ["c"] ning o'zi massiv, u ochilmaydi va ichma-ich qoladi.

5. Massivdan satrga va aksincha

5.1 join — elementlarni ulab, satr yasash

Bot mijozga savatini ko'rsatishi kerak: "non, sut, tuxum". Massivni shunday matnga join (inglizcha "birlashtirmoq") aylantiradi. Qavsga elementlar orasiga qo'yiladigan ajratuvchi beriladi:

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

console.log(savat.join(", ")); // non, sut, tuxum
console.log(savat.join(" | ")); // non | sut | tuxum
console.log(savat.join("")); // nonsuttuxum
console.log(savat.join()); // non,sut,tuxum
  • Ajratuvchi faqat elementlar orasiga qo'yiladi — boshiga va oxiriga emas.
  • join("") — ajratuvchisiz, hammasi yopishib ketadi.
  • join() — argument bo'lmasa, vergul ishlatiladi (bo'sh joysiz).

Natija — satr, massiv emas. Sonlar ham satrga aylanadi: [9, 10].join(" + ") — "9 + 10".

null va undefined elementlar esa bo'sh satrga aylanadi:

js
const javoblar = ["ha", null, "yo'q", undefined];

console.log(javoblar.join("-")); // ha--yo'q-

5.2 toString va massiv matn ichida

Massivning toString() metodi ham bor. U join(",") bilan bir xil ishlaydi. JavaScript massivni o'zi satrga aylantirishi kerak bo'lganda ham shu usulni ishlatadi — masalan, template literal ichida:

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

console.log(savat.toString()); // non,sut
console.log(`Savatda: ${savat}`); // Savatda: non,sut

Vergul bor, bo'sh joy yo'q — chiroyli emas. Mijozga ko'rsatiladigan matnda doim join ni aniq ajratuvchi bilan yozing: ${savat.join(", ")}.

5.3 split ↔ join: ikki tomonlama yo'l

Satr darsida split satrni ajratuvchi bo'yicha massivga bo'lgan edi. join — uning aynan teskarisi:

Metod Nimadan Nimaga
split("-") satr massiv
join("-") massiv satr

Ikkalasini birga ishlatib, satrdagi ajratuvchini almashtirish mumkin:

js
const sana = "2026-09-27";

const qismlar = sana.split("-");
const yangi = qismlar.join(".");

console.log(qismlar); // [ '2026', '09', '27' ]
console.log(yangi); // 2026.09.27

Satr → massiv → yana satr. Oradagi massiv bosqichida elementlar bilan istalgan ish qilish mumkin: kesish, qo'shish, tartibini o'zgartirish.

5.4 Array.from — satrdan harflar massivi

split("") satrni harflarga bo'ladi. Lekin satrda emoji bo'lsa, u emoji'ni ikki "yarim belgi"ga bo'lib yuboradi. Buni Unicode darsida ko'rgan edik. Xavfsiz usul — Array.from:

js
const ism = "Salom \u{1F600}";

console.log(ism.split("").length); // 8
console.log(Array.from(ism).length); // 7
console.log(Array.from("olma")); // [ 'o', 'l', 'm', 'a' ]

Array.from — "shundan massiv yasa". U [...matn] kabi belgilarni to'g'ri sanaydi: emoji bitta element bo'ladi. Array.from boshqa ko'p narsadan ham massiv yasay oladi — flat, fill va Array.from darsida.

Tekshirib ko'ring: "a,b,c".split(",").join(" va ") nima qaytaradi?

Javob

"a va b va c". Avval split(",") — [ 'a', 'b', 'c' ] massivi. Keyin join(" va ") elementlar orasiga " va " qo'yib, qayta satr yasaydi.

6. reverse — teskari aylantirish (ehtiyot bo'ling!)

6.1 reverse asl massivni o'zgartiradi

reverse (inglizcha "teskari") massiv elementlarini teskari tartibga qo'yadi. Lekin u bu darsdagi boshqa metodlardan farq qiladi — asl massivni o'zgartiradi:

js
const navbat = ["Ali", "Malika", "Jasur"];

const teskari = navbat.reverse();

console.log(teskari); // [ 'Jasur', 'Malika', 'Ali' ]
console.log(navbat); // [ 'Jasur', 'Malika', 'Ali' ]
console.log(teskari === navbat); // true

navbat ning o'zi ham teskari bo'lib qoldi! reverse yangi massiv yasamaydi. U asl massivni joyida aylantiradi va o'sha massivning o'zini qaytaradi. teskari === navbat — true: bu ikki nom bitta massivga qarab turibdi.

Bu push va splice kabi mutatsiya. Navbatdagi odamlar tartibi buzildi — Ali endi oxirgi bo'lib qoldi.

6.2 To'g'ri usul: avval nusxa, keyin reverse

Asl massiv kerak bo'lsa, reverse ni nusxaga qo'llang:

js
const navbat = ["Ali", "Malika", "Jasur"];

const teskari = [...navbat].reverse();

console.log(teskari); // [ 'Jasur', 'Malika', 'Ali' ]
console.log(navbat); // [ 'Ali', 'Malika', 'Jasur' ]

[...navbat] yangi nusxa yasadi, reverse o'sha nusxani aylantirdi. navbat.slice().reverse() ham xuddi shunday ishlaydi.

Maslahat: 2023-yilda JavaScript'ga toReversed() metodi qo'shildi. U asl massivga tegmay, teskari nusxa qaytaradi: navbat.toReversed(). Unga o'xshash boshqa metodlarni nusxa bilan o'zgartirish darsida o'rganamiz.

6.3 Metodlar zanjiri: so'zni teskari o'qish

split, reverse va join birga ishlatilsa, satrni teskari aylantirish mumkin:

js
const soz = "salom";

const teskari = soz.split("").reverse().join("");

console.log(teskari); // molas

Bu metodlar zanjiri: har bir metod oldingisining natijasi bilan ishlaydi. Chapdan o'ngga o'qing:

  1. soz.split("") — [ 's', 'a', 'l', 'o', 'm' ] (yangi massiv).
  2. .reverse() — shu yangi massivni teskari qiladi: [ 'm', 'o', 'l', 'a', 's' ].
  3. .join("") — harflarni yopishtirib, satr yasaydi: "molas".

Bu yerda reverse xavfsiz. U split yasagan yangi massivni o'zgartiradi, soz satriga esa tegmaydi. Satrlar umuman o'zgarmas.

Tekshirib ko'ring: const a = [1, 2, 3]; const b = a.reverse(); dan keyin a[0] nechaga teng?

Javob

3. reverse asl massivni aylantiradi. a endi [3, 2, 1], b esa aynan shu massivning o'zi. Asl tartib kerak bo'lsa: const b = [...a].reverse();.

7. Array.isArray — bu massivmi?

Funksiyangiz ba'zan bitta qiymat, ba'zan ro'yxat oladi, deylik. Qiymat massivmi — qanday bilamiz? Massiv darsida ko'rgandik: typeof massiv uchun "object" deydi, ishonchli yo'l — Array.isArray. Qisqa eslatma:

js
console.log(typeof ["non", "sut"]); // object
console.log(Array.isArray(["non", "sut"])); // true
console.log(Array.isArray("non")); // false
console.log(Array.isArray([])); // true

Array.isArray(x) — "x massivmi?" degan savolga aniq true yoki false beradi. Bo'sh massiv ham massiv.

Amalda bunday ishlatiladi: mijoz bitta mahsulot yoki ro'yxat yuborishi mumkin. Biz uni doim ro'yxatga aylantiramiz:

js
function savatgaQosh(savat, narsa) {
  const royxat = Array.isArray(narsa) ? narsa : [narsa];
  return savat.concat(royxat);
}

console.log(savatgaQosh(["non"], "sut"));
console.log(savatgaQosh(["non"], ["choy", "shakar"]));

Konsolda:

text
[ 'non', 'sut' ]
[ 'non', 'choy', 'shakar' ]

? : — ternary operator: "massiv bo'lsa — o'zini ol, bo'lmasa — bitta elementli massivga o'ra".

8. flat bilan qisqa tanishuv

concat ichma-ich massivlarni ochmasligini ko'rdik. Buning uchun flat (inglizcha "tekis") bor:

js
const guruhlar = [["Ali", "Vali"], ["Soli"], ["Guli", "Nodir"]];

console.log(guruhlar.flat());

Konsolda:

text
[ 'Ali', 'Vali', 'Soli', 'Guli', 'Nodir' ]

Uchta guruhdan bitta tekis ro'yxat chiqdi. flat ham yangi massiv qaytaradi. Uning chuqurlik argumenti va boshqa imkoniyatlari — flat, fill va Array.from darsida.

9. Umumiy jadval

Metod Asl massiv Nima qaytaradi
slice(b, o) O'zgarmaydi Yangi massiv (bo'lak)
splice(b, n) O'zgaradi O'chirilgan elementlar
concat(...) O'zgarmaydi Yangi massiv
[...a, ...b] O'zgarmaydi Yangi massiv
join(ajr) O'zgarmaydi Satr
reverse() O'zgaradi O'sha massivning o'zi
flat() O'zgarmaydi Yangi massiv

9.1 O'zingiz to'ldiring

Kitob do'koni eng ko'p sotilgan 5 kitobni ro'yxatda saqlaydi. Bot "TOP-3" ni 1) ... 2) ... emas, oddiy "Kitob1 / Kitob2 / Kitob3" ko'rinishida chiqarishi kerak. Asl ro'yxat buzilmasin.

js
const top = ["O'tkan kunlar", "Kecha va kunduz", "Sariq devni minib",
  "Dunyoning ishlari", "Ufq"];

const uchtasi = top.____(0, 3);
const matn = uchtasi.____(" / ");
  • Asl massivni buzmay bo'lak olish uchun metod: .
  • Massivdan satr yasash uchun metod: .
  • slice(0, 3) nechta element qaytaradi?
Javob
js
const top = ["O'tkan kunlar", "Kecha va kunduz", "Sariq devni minib",
  "Dunyoning ishlari", "Ufq"];

const uchtasi = top.slice(0, 3);
const matn = uchtasi.join(" / ");

console.log(matn);
console.log(top.length);

Konsolda:

text
O'tkan kunlar / Kecha va kunduz / Sariq devni minib
5

slice(0, 3) — 0, 1, 2-indekslar, ya'ni 3 ta. splice ishlatilganda top da faqat 2 ta kitob qolardi.

10. Ko'p uchraydigan xatolar

10.1 slice o'rniga splice

js
const mahsulotlar = ["olma", "nok", "uzum", "anor"];

const birinchiIkki = mahsulotlar.splice(0, 2);

console.log(birinchiIkki); // [ 'olma', 'nok' ]
console.log(mahsulotlar); // [ 'uzum', 'anor' ]

Xato xabari yo'q, natija ham to'g'ri ko'rinadi. Lekin asl ro'yxatning yarmi yo'qolgan. Bu xato keyinroq, butunlay boshqa joyda "negadir mahsulotlar kamayib qoldi" ko'rinishida chiqadi. Tuzatish: faqat o'qish kerak bo'lsa — slice.

10.2 Massivni push bilan qo'shish

js
const a = ["non", "sut"];
const b = ["choy", "shakar"];

a.push(b);

console.log(a); // [ 'non', 'sut', [ 'choy', 'shakar' ] ]
console.log(a.length); // 3

Kutilgan 4 ta element o'rniga 3 ta chiqdi. push b ni ochmadi — butun massivni bitta element qilib qo'shdi. Tuzatish: yangi massiv kerak bo'lsa — a.concat(b) yoki [...a, ...b]. Aynan a ning o'ziga qo'shish kerak bo'lsa — a.push(...b): uch nuqta b ni elementlarga sochib, push ga alohida-alohida beradi.

10.3 concat natijasini saqlamaslik

js
const savat = ["non"];

savat.concat(["sut"]);

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

concat asl massivni o'zgartirmaydi — yangi massiv qaytaradi. Natijani hech qayerga yozmadik, u yo'qolib ketdi. Tuzatish: const yangiSavat = savat.concat(["sut"]);. slice, join va boshqa o'zgartirmaydigan metodlarda ham shu qoida.

10.4 reverse dan keyin aslini kutish

js
const reyting = [5, 4, 3];
const pastdanYuqori = reyting.reverse();

console.log(reyting[0]); // 3

Muallif reyting[0] — 5 deb o'yladi, lekin reverse asl massivni aylantirib yubordi. Tuzatish: [...reyting].reverse() yoki reyting.toReversed().

10.5 join natijasini massiv deb o'ylash

js
const matn = ["non", "sut"].join(", ");

matn.push("tuxum");
text
TypeError: matn.push is not a function

Tarjimasi: "matn.push — funksiya emas". join dan keyin qo'lingizda satr bor, satrda esa push metodi yo'q. Tuzatish: elementlarni avval massivga qo'shing, join ni eng oxirida chaqiring.

11. Mashqlar

1-mashq (oson): Navbat

Klinikadagi navbat: ["Ali", "Malika", "Jasur", "Dilnoza", "Sardor", "Nodira"].

  1. slice bilan birinchi 3 kishini oling.
  2. slice bilan oxirgi 2 kishini oling (manfiy indeks bilan).
  3. Birinchi 3 kishini join(", ") bilan bitta satrga aylantiring.
  4. Oxirida asl navbat uzunligini chiqarib, 6 ta qolganini tekshiring.
Yechim
js
const navbat = [
  "Ali", "Malika", "Jasur", "Dilnoza", "Sardor", "Nodira",
];

const birinchi3 = navbat.slice(0, 3);
const oxirgi2 = navbat.slice(-2);

console.log(birinchi3); // [ 'Ali', 'Malika', 'Jasur' ]
console.log(oxirgi2); // [ 'Sardor', 'Nodira' ]
console.log(birinchi3.join(", ")); // Ali, Malika, Jasur
console.log(navbat.length); // 6

slice asl massivga tegmaydi, shuning uchun navbatda hali ham 6 kishi.

2-mashq (o'rta): Ikki sinf va teskari tartib

Ikki sinf ro'yxati bor: ["Aziz", "Bekzod"] va ["Kamola", "Laylo"].

  1. concat bilan umumiy ro'yxat yasang.
  2. Umumiy ro'yxatni teskari tartibda chiqaring. Umumiy ro'yxatning o'zi buzilmasin — avval [...massiv] bilan nusxa oling.
  3. Teskari ro'yxatni " → " bilan satrga aylantiring.
  4. Array.isArray bilan uchinchi qadam natijasi massivmi — tekshiring.
Yechim
js
const aSinf = ["Aziz", "Bekzod"];
const bSinf = ["Kamola", "Laylo"];

const umumiy = aSinf.concat(bSinf);
const teskari = [...umumiy].reverse();
const matn = teskari.join(" → ");

console.log(umumiy); // [ 'Aziz', 'Bekzod', 'Kamola', 'Laylo' ]
console.log(matn); // Laylo → Kamola → Bekzod → Aziz
console.log(Array.isArray(matn)); // false

umumiy asl tartibda qoldi, chunki reverse nusxaga qo'llandi. matn — satr, massiv emas: join doim satr qaytaradi.

3-mashq (qiyin): Palindrom tekshiruvchi

Palindrom — o'ngdan ham, chapdan ham bir xil o'qiladigan so'z: "kiyik", "qoq", "Anna".

palindromMi(soz) funksiyasini yozing. U true yoki false qaytarsin. Katta-kichik harf farq qilmasin — avval toLowerCase() qiling. Harflarga bo'lish uchun Array.from ishlating, keyin reverse va join("").

Bonus: funksiya bitta so'z o'rniga so'zlar massivini ham qabul qilsin. Massiv kelsa, har bir so'z uchun natijani yangi massivga push qilib, shu massivni qaytarsin. Massivni Array.isArray bilan aniqlang.

Yechim
js
function birSozMi(soz) {
  const kichik = soz.toLowerCase();
  const teskari = Array.from(kichik).reverse().join("");
  return kichik === teskari;
}

function palindromMi(kirish) {
  if (!Array.isArray(kirish)) {
    return birSozMi(kirish);
  }
  const natijalar = [];
  for (const soz of kirish) {
    natijalar.push(birSozMi(soz));
  }
  return natijalar;
}

console.log(palindromMi("kiyik"));
console.log(palindromMi("Anna"));
console.log(palindromMi("salom"));
console.log(palindromMi(["qoq", "olma", "non"]));

Konsolda:

text
true
true
false
[ true, false, true ]
  • birSozMi bitta so'zni tekshiradi. Uni alohida funksiya qildik, chunki u ikki joyda kerak.
  • Array.from(kichik) — yangi massiv. reverse shu yangi massivni aylantiradi, kichik satriga tegmaydi.
  • palindromMi avval kirish massivmi — tekshiradi. Massiv bo'lmasa, darhol bitta so'z natijasini qaytaradi.

12. Real ishda

  • Sahifalash (pagination): online do'konda 500 ta mahsulotdan bir sahifada 20 tasi ko'rinadi. 1-sahifa — slice(0, 20), 2-sahifa — slice(20, 40). Sahifalar 0 dan sanalsa, umumiy formula: slice(sahifa * 20, sahifa * 20 + 20).
  • Matn yig'ish: sayt tepasidagi "Bosh sahifa / Kurslar / JavaScript" yo'li — massivdan join(" / "). CSV fayl qatori — join(",").
  • React (sayt yasash uchun mashhur vosita, kursda alohida o'rganamiz): holatdagi massivni joyida o'zgartirish taqiqlanadi. Shuning uchun u yerda push va reverse o'rniga concat, slice, spread va toReversed ishlatiladi.

Intervyularda "slice va splice farqi nima?" — eng ko'p beriladigan boshlang'ich savollardan biri. "Qaysi massiv metodlari asl massivni o'zgartiradi?" savoli ham tez-tez uchraydi.

Xulosa

  • slice(boshi, oxiri) — bo'lak nusxasi, oxiri kirmaydi, asl massiv o'zgarmaydi. slice() — butun nusxa.
  • splice esa massivni o'zgartiradi, ikkinchi argumenti — elementlar soni.
  • concat va [...a, ...b] massivlarni yangi massivga birlashtiradi; push(b) esa ichma-ich massiv yasaydi.
  • join(ajratuvchi) massivni satrga aylantiradi, split — teskarisi. toString va template ichida vergul bilan ulanadi.
  • reverse asl massivni o'zgartiradi — kerak bo'lsa avval nusxa oling yoki toReversed().
  • Array.isArray — massivni aniqlashning ishonchli yo'li (typeof "object" deydi).

Keyingi dars: Obyekt: kalit-qiymat juftliklari — ro'yxat emas, nomlangan ma'lumotlar: mahsulot kartochkasi, foydalanuvchi profili.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
JavaScript massivni kesish va birlashtirish: slice, concat, join — IlmHamroh