Array — metodlar va spread operator

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 mavzu
  1. 01Array yaratish va o'qish
  2. 02Qo'shish/olib tashlash: push, pop, shift, unshift
  3. 03Qidirish: indexOf, includes, find
  4. 04Aylanib chiqish: forEach, map, filter
  5. 05Spread operator (...)
  6. 06Destructuring

1. Array yaratish va o'qish

1// Yaratish
2const 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] // undefined
11
12// Uzunlik
13mevalar.length // 3
14
15// Oxirgi element
16mevalar[mevalar.length - 1] // "banan"
17mevalar.at(-1) // "banan" (yangi metod)
18
19// O'zgartirish
20mevalar[1] = "nok";
21console.log(mevalar); // ["olma", "nok", "banan"]

2. Qo'shish va olib tashlash

1let a = ["olma", "anor"];
2
3// OXIRIDAN
4a.push("banan"); // oxiriga qo'shish
5// ["olma", "anor", "banan"]
6
7a.pop(); // oxiridan olib tashlash
8// ["olma", "anor"]
9
10// BOSHIDAN
11a.unshift("uzum"); // boshiga qo'shish
12// ["uzum", "olma", "anor"]
13
14a.shift(); // boshidan olib tashlash
15// ["olma", "anor"]
16
17// O'RTADAN
18a.splice(1, 0, "nok"); // 1-o'rinda 0 ta o'chirib, "nok" qo'shish
19// ["olma", "nok", "anor"]
20
21a.splice(1, 1); // 1-o'rindan 1 ta o'chirish
22// ["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") // 1
5mevalar.indexOf("kivi") // -1
6
7// includes — bor/yo'q (true/false)
8mevalar.includes("banan") // true
9
10// find — shartga mos birinchi element
11const sonlar = [1, 5, 10, 15, 20];
12sonlar.find(x => x > 7) // 10
13
14// findIndex — uning indeksi
15sonlar.findIndex(x => x > 7) // 2
16
17// some — kamida bittasi shartga mos?
18sonlar.some(x => x > 15) // true
19
20// every — hammasi shartga mosmi?
21sonlar.every(x => x > 0) // true

4. 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, Ali
7// Salom, Vali
8// Salom, Hasan
map — 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 bilan
10const natija = sonlar
11 .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'zgartiradi
4sonlar.sort() // alifbo tartibida!
5sonlar.sort((a, b) => a - b) // sonlar uchun to'g'ri
6
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// 600

5. Spread operator (...)

Spread — massivni «yoyib» ishlatish. Funksiyaga argumentlar, ikki massivni birlashtirish, nusxa olish uchun.

1// Funksiyaga argument sifatida
2const sonlar = [3, 7, 1, 9, 4];
3Math.max(sonlar) // NaN (xato)
4Math.max(...sonlar) // 9 (yoyib yuboriladi)
5
6// Ikki massivni qo'shish
7const 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 massivga
16[..."salom"] // ["s", "a", "l", "o", "m"]
17
18// Obyekt uchun ham ishlaydi
19const u1 = { ism: "Ali", yosh: 17 };
20const u2 = { ...u1, yosh: 18 }; // { ism: "Ali", yosh: 18 }

6. Destructuring

1// Massivdan
2const [birinchi, ikkinchi] = ["Ali", "Vali"];
3console.log(birinchi); // "Ali"
4
5// O'tkazib yuborish
6const [, , uchinchi] = [1, 2, 3];
7console.log(uchinchi); // 3
8
9// Qolganlari (rest)
10const [bosh, ...qolgan] = [1, 2, 3, 4, 5];
11console.log(qolgan); // [2, 3, 4, 5]
12
13// Default qiymat
14const [a = 10, b = 20] = [5];
15console.log(a, b); // 5, 20
16
17// Obyektdan
18const foydalanuvchi = { ism: "Ali", yosh: 17, shahar: "Toshkent" };
19const { ism, yosh } = foydalanuvchi;
20console.log(ism); // "Ali"
21
22// Nomini o'zgartirib
23const { ism: firstName } = foydalanuvchi;
24console.log(firstName); // "Ali"
Xarid ro'yxati
Natijajonli

Kichik test

0 / 5

1.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?

Mustaqil ish

0 / 6