DarslarWeb dasturlash
Array — metodlar va spread operator
Massivlar bilan ishlash: push, pop, map, filter, spread operator va destructuring.
50 daqiqa
JavaScript — Dars 9
Array — ro'yxatlar bilan ishlash
Foydalanuvchilar, mahsulotlar, postlar — hamma narsa ro'yxat. Massiv metodlarisiz JS yozib bo'lmaydi.
pushmapfilter...
Dars rejasi
6 ta mavzu1. Array yaratish va o'qish
1// Yaratish2const mevalar = ["olma", "anor", "banan"];3const sonlar = [1, 2, 3, 4, 5];4const aralash = ["Ali", 17, true, null];5const bosh = [];6
7// O'qish — indeks orqali (0 dan)8mevalar[0] // "olma"9mevalar[2] // "banan"10mevalar[10] // undefined11
12// Uzunlik13mevalar.length // 314
15// Oxirgi element16mevalar[mevalar.length - 1] // "banan"17mevalar.at(-1) // "banan" (yangi metod)18
19// O'zgartirish20mevalar[1] = "nok";21console.log(mevalar); // ["olma", "nok", "banan"]2. Qo'shish va olib tashlash
1let a = ["olma", "anor"];2
3// OXIRIDAN4a.push("banan"); // oxiriga qo'shish5// ["olma", "anor", "banan"]6
7a.pop(); // oxiridan olib tashlash8// ["olma", "anor"]9
10// BOSHIDAN11a.unshift("uzum"); // boshiga qo'shish12// ["uzum", "olma", "anor"]13
14a.shift(); // boshidan olib tashlash15// ["olma", "anor"]16
17// O'RTADAN18a.splice(1, 0, "nok"); // 1-o'rinda 0 ta o'chirib, "nok" qo'shish19// ["olma", "nok", "anor"]20
21a.splice(1, 1); // 1-o'rindan 1 ta o'chirish22// ["olma", "anor"]push / pop
Oxiridan: push qo'shadi, pop olib tashlaydi.
unshift / shift
Boshidan: unshift qo'shadi, shift olib tashlaydi.
3. Qidirish
1const mevalar = ["olma", "anor", "banan", "olma"];2
3// indexOf — topgan birinchi o'rin (-1 agar yo'q)4mevalar.indexOf("anor") // 15mevalar.indexOf("kivi") // -16
7// includes — bor/yo'q (true/false)8mevalar.includes("banan") // true9
10// find — shartga mos birinchi element11const sonlar = [1, 5, 10, 15, 20];12sonlar.find(x => x > 7) // 1013
14// findIndex — uning indeksi15sonlar.findIndex(x => x > 7) // 216
17// some — kamida bittasi shartga mos?18sonlar.some(x => x > 15) // true19
20// every — hammasi shartga mosmi?21sonlar.every(x => x > 0) // true4. Aylanib chiqish
forEach — har bir element ustida amal
1const ismlar = ["Ali", "Vali", "Hasan"];2
3ismlar.forEach(ism => {4 console.log("Salom, " + ism);5});6// Salom, Ali7// Salom, Vali8// Salom, Hasanmap — har birini o'zgartirib yangi massiv
1const sonlar = [1, 2, 3, 4];2
3const kvadratlar = sonlar.map(x => x * x);4// [1, 4, 9, 16]5
6const userlar = [7 { ism: "Ali", yosh: 17 },8 { ism: "Vali", yosh: 20 }9];10
11const ismlar = userlar.map(u => u.ism);12// ["Ali", "Vali"]filter — shartga mos elementlarni ajratib olish
1const sonlar = [1, 2, 3, 4, 5, 6, 7, 8];2
3const juftlar = sonlar.filter(x => x % 2 === 0);4// [2, 4, 6, 8]5
6const kattalar = sonlar.filter(x => x > 4);7// [5, 6, 7, 8]8
9// Zanjir bilan10const natija = sonlar11 .filter(x => x > 2)12 .map(x => x * 10);13// [30, 40, 50, 60, 70, 80]Boshqa foydali metodlar
1const sonlar = [3, 1, 4, 1, 5, 9, 2];2
3sonlar.reverse() // tartibni o'zgartiradi4sonlar.sort() // alifbo tartibida!5sonlar.sort((a, b) => a - b) // sonlar uchun to'g'ri6
7["olma", "anor"].join(", ") // "olma, anor"8
9// reduce — umumiy natijaga kelish (summa, ko'paytma)10const narxlar = [100, 200, 300];11const jami = narxlar.reduce((yig, x) => yig + x, 0);12// 6005. Spread operator (...)
Spread — massivni «yoyib» ishlatish. Funksiyaga argumentlar, ikki massivni birlashtirish, nusxa olish uchun.
1// Funksiyaga argument sifatida2const sonlar = [3, 7, 1, 9, 4];3Math.max(sonlar) // NaN (xato)4Math.max(...sonlar) // 9 (yoyib yuboriladi)5
6// Ikki massivni qo'shish7const a = [1, 2, 3];8const b = [4, 5, 6];9const c = [...a, ...b]; // [1, 2, 3, 4, 5, 6]10const d = [0, ...a, 100]; // [0, 1, 2, 3, 100]11
12// Nusxa olish (original qolmaydi)13const nusxa = [...a];14
15// Matnni massivga16[..."salom"] // ["s", "a", "l", "o", "m"]17
18// Obyekt uchun ham ishlaydi19const u1 = { ism: "Ali", yosh: 17 };20const u2 = { ...u1, yosh: 18 }; // { ism: "Ali", yosh: 18 }6. Destructuring
1// Massivdan2const [birinchi, ikkinchi] = ["Ali", "Vali"];3console.log(birinchi); // "Ali"4
5// O'tkazib yuborish6const [, , uchinchi] = [1, 2, 3];7console.log(uchinchi); // 38
9// Qolganlari (rest)10const [bosh, ...qolgan] = [1, 2, 3, 4, 5];11console.log(qolgan); // [2, 3, 4, 5]12
13// Default qiymat14const [a = 10, b = 20] = [5];15console.log(a, b); // 5, 2016
17// Obyektdan18const foydalanuvchi = { ism: "Ali", yosh: 17, shahar: "Toshkent" };19const { ism, yosh } = foydalanuvchi;20console.log(ism); // "Ali"21
22// Nomini o'zgartirib23const { ism: firstName } = foydalanuvchi;24console.log(firstName); // "Ali"Xarid ro'yxati
Natijajonli
Kichik test
0 / 51.Massiv oxiriga element qo'shish uchun?
2.Har bir elementni o'zgartirib yangi massiv olish?
3.Spread operatori qanday belgi?
4.[...[1,2], ...[3,4]] natijasi?
5.filter nimani qaytaradi?