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 mavzu1. Arrow funksiya — chuqurroq
1// Klassik2function kvadrat(x) {3 return x * x;4}5
6// Arrow — bosqichma-bosqich qisqartirish7const k1 = (x) => { return x * x; };8const k2 = (x) => x * x;9const k3 = x => x * x; // 1 parametr — qavssiz10
11// Parametrsiz12const salom = () => "Salom!";13
14// Obyekt qaytarish uchun — qavs ichida15const user = (ism, yosh) => ({ ism, yosh });16user("Ali", 17) // { ism: "Ali", yosh: 17 }17
18// Bir nechta qator kerak — figurali qavs + return19const 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// Oddiy4ismlar.forEach(ism => console.log(ism));5
6// Indeks bilan7ismlar.forEach((ism, i) => {8 console.log(`${i + 1}. ${ism}`);9});10// 1. Ali11// 2. Vali12// 3. Hasan13
14// DOM bilan15const 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'paytirish4sonlar.map(x => x * 2) // [2, 4, 6, 8]5
6// Har birini matnga7sonlar.map(x => `#${x}`) // ["#1", "#2", "#3", "#4"]8
9// Obyektlar massivi10const userlar = [11 { ism: "Ali", yosh: 17 },12 { ism: "Vali", yosh: 22 },13 { ism: "Hasan", yosh: 35 },14];15
16// Faqat ismlar17userlar.map(u => u.ism)18// ["Ali", "Vali", "Hasan"]19
20// Yangi maydon qo'shib21userlar.map(u => ({22 ...u,23 voyaga: u.yosh >= 1824}));25// [{ism, yosh, voyaga}, ...]4. filter — tanlab olish
1const sonlar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];2
3// Juftlar4sonlar.filter(x => x % 2 === 0) // [2, 4, 6, 8, 10]5
6// 5 dan kattalar7sonlar.filter(x => x > 5) // [6, 7, 8, 9, 10]8
9// Obyektlardan10const 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 mahsulotlar18
19mahsulotlar.filter(m => m.narx < 10000)20// 10000 dan arzonlar21
22// Matnlardan23const 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'indi4// reduce((yiguvchi, element) => yangiYiguvchi, boshlangichQiymat)5sonlar.reduce((yig, x) => yig + x, 0) // 1006
7// Ko'paytma8sonlar.reduce((k, x) => k * x, 1) // 2400009
10// Eng katta11sonlar.reduce((m, x) => x > m ? x : m, -Infinity) // 4012
13// Obyektlar bilan14const 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 022);23// 15000 + 24000 = 3900024
25// Guruhlash26const 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 summasi9const tayyorSumma = buyurtmalar10 .filter(b => b.holat === "tayyor")11 .map(b => b.narx * b.miqdor)12 .reduce((yig, x) => yig + x, 0);13
14// 15000 + 40000 + 24000 = 79000Mahsulot filtri
Natijajonli
Kichik test
0 / 51.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?