Arrow funksiyalar va massiv metodlari

DarslarWeb dasturlash

Arrow funksiyalar va massiv metodlari

map, filter, reduce, forEach — zamonaviy JS'ning eng ko'p ishlatiladigan metodlari. Arrow funksiyalar bilan chuqur amaliyot.

55 daqiqa
JavaScript — Dars 11

map, filter, reduce — mahorat

Har qanday real loyihada sizni kutayotgan 4 ta metod. Bugun ularni chin haqida o'rganamiz.

mapfilterreduce=>

Dars rejasi

6 ta mavzu
  1. 01Arrow funksiya — chuqurroq
  2. 02forEach — aylanib chiqish
  3. 03map — o'zgartirib yangi massiv
  4. 04filter — tanlab olish
  5. 05reduce — umumiy natijaga
  6. 06Zanjirlash (chaining)

1. Arrow funksiya — chuqurroq

1// Klassik
2function kvadrat(x) {
3 return x * x;
4}
5
6// Arrow — bosqichma-bosqich qisqartirish
7const k1 = (x) => { return x * x; };
8const k2 = (x) => x * x;
9const k3 = x => x * x; // 1 parametr — qavssiz
10
11// Parametrsiz
12const salom = () => "Salom!";
13
14// Obyekt qaytarish uchun — qavs ichida
15const user = (ism, yosh) => ({ ism, yosh });
16user("Ali", 17) // { ism: "Ali", yosh: 17 }
17
18// Bir nechta qator kerak — figurali qavs + return
19const hisoble = (a, b) => {
20 const summa = a + b;
21 const ayirma = a - b;
22 return { summa, ayirma };
23};

2. forEach — aylanib chiqish

forEach har bir element ustida amal bajaradi, lekin hech narsa qaytarmaydi. Faqat yon ta'sir (console, DOM) uchun.

1const ismlar = ["Ali", "Vali", "Hasan"];
2
3// Oddiy
4ismlar.forEach(ism => console.log(ism));
5
6// Indeks bilan
7ismlar.forEach((ism, i) => {
8 console.log(`${i + 1}. ${ism}`);
9});
10// 1. Ali
11// 2. Vali
12// 3. Hasan
13
14// DOM bilan
15const elementlar = document.querySelectorAll("button");
16elementlar.forEach(btn => {
17 btn.addEventListener("click", () => console.log("bosildi"));
18});

3. map — o'zgartirib yangi massiv

1const sonlar = [1, 2, 3, 4];
2
3// Har birini 2 ga ko'paytirish
4sonlar.map(x => x * 2) // [2, 4, 6, 8]
5
6// Har birini matnga
7sonlar.map(x => `#${x}`) // ["#1", "#2", "#3", "#4"]
8
9// Obyektlar massivi
10const userlar = [
11 { ism: "Ali", yosh: 17 },
12 { ism: "Vali", yosh: 22 },
13 { ism: "Hasan", yosh: 35 },
14];
15
16// Faqat ismlar
17userlar.map(u => u.ism)
18// ["Ali", "Vali", "Hasan"]
19
20// Yangi maydon qo'shib
21userlar.map(u => ({
22 ...u,
23 voyaga: u.yosh >= 18
24}));
25// [{ism, yosh, voyaga}, ...]

4. filter — tanlab olish

1const sonlar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2
3// Juftlar
4sonlar.filter(x => x % 2 === 0) // [2, 4, 6, 8, 10]
5
6// 5 dan kattalar
7sonlar.filter(x => x > 5) // [6, 7, 8, 9, 10]
8
9// Obyektlardan
10const mahsulotlar = [
11 { nom: "Olma", narx: 5000, mavjud: true },
12 { nom: "Anor", narx: 12000, mavjud: false },
13 { nom: "Banan", narx: 8000, mavjud: true },
14];
15
16mahsulotlar.filter(m => m.mavjud)
17// faqat mavjud mahsulotlar
18
19mahsulotlar.filter(m => m.narx < 10000)
20// 10000 dan arzonlar
21
22// Matnlardan
23const ismlar = ["Ali", "Vali", "Aziz", "Bek"];
24ismlar.filter(i => i.startsWith("A"))
25// ["Ali", "Aziz"]

5. reduce — umumiy natijaga

reduce massivni bitta qiymatga aylantiradi — summa, ko'paytma, obyekt yoki yangi massiv bo'lishi mumkin. Eng kuchli metod.

1const sonlar = [10, 20, 30, 40];
2
3// Yig'indi
4// reduce((yiguvchi, element) => yangiYiguvchi, boshlangichQiymat)
5sonlar.reduce((yig, x) => yig + x, 0) // 100
6
7// Ko'paytma
8sonlar.reduce((k, x) => k * x, 1) // 240000
9
10// Eng katta
11sonlar.reduce((m, x) => x > m ? x : m, -Infinity) // 40
12
13// Obyektlar bilan
14const xaridlar = [
15 { nom: "Olma", narx: 5000, miqdor: 3 },
16 { nom: "Anor", narx: 12000, miqdor: 2 },
17];
18
19const jami = xaridlar.reduce(
20 (yig, x) => yig + x.narx * x.miqdor,
21 0
22);
23// 15000 + 24000 = 39000
24
25// Guruhlash
26const yoshlar = [17, 22, 15, 30, 19];
27const guruh = yoshlar.reduce((g, y) => {
28 const kalit = y >= 18 ? "katta" : "bola";
29 g[kalit] = (g[kalit] || 0) + 1;
30 return g;
31}, {});
32// { bola: 2, katta: 3 }

6. Zanjirlash (chaining)

Bu metodlar bir-biri bilan ulanadi. Avval filter, keyin map, keyin reduce — katta ish bir qatorda.

1const buyurtmalar = [
2 { mahsulot: "Olma", narx: 5000, miqdor: 3, holat: "tayyor" },
3 { mahsulot: "Anor", narx: 12000, miqdor: 2, holat: "kutilmoqda" },
4 { mahsulot: "Banan", narx: 8000, miqdor: 5, holat: "tayyor" },
5 { mahsulot: "Nok", narx: 6000, miqdor: 4, holat: "tayyor" },
6];
7
8// Faqat tayyor buyurtmalar umumiy summasi
9const tayyorSumma = buyurtmalar
10 .filter(b => b.holat === "tayyor")
11 .map(b => b.narx * b.miqdor)
12 .reduce((yig, x) => yig + x, 0);
13
14// 15000 + 40000 + 24000 = 79000
Mahsulot filtri
Natijajonli

Kichik test

0 / 5

1.Har bir elementni o'zgartirib yangi massiv qaytaradi?

2.filter callback'i nima qaytarishi kerak?

3.reduce'ning 2-argumenti nima?

4.x => x + 1 — qanday funksiya?

5.Zanjir tartibi qanday bajariladi?

Mustaqil ish

0 / 6