7-bo‘lim

Massiv metodlari

map, filter, reduce, find, some, every, sort va zanjirsimon ishlatish - funksional uslubda ma'lumot bilan ishlash.

🕑 18 daqiqa o‘qish 📄 655 so‘z 👁 5 marta ko‘rilgan
Ushbu bo‘lim mundarijasi
  1. Sinov ma'lumotlari
  2. forEach - har biri uchun
  3. map - o'zgartirib yangi massiv
  4. filter - shartga mos elementlar
  5. find va findIndex
  6. some va every
  7. reduce - eng kuchli metod
  8. sort - saralash
  9. O'zbek alifbosi bilan saralash
  10. Zanjirsimon ishlatish
  11. Xulosa

Bu metodlarni bilgan dasturchi sikl yozishni deyarli to'xtatadi. Kod qisqaradi va nima qilayotgani darhol ko'rinadi.

Sinov ma'lumotlari #

Bu bo'limdagi barcha misollar quyidagi ro'yxat bilan ishlaydi:

JavaScript
const talabalar = [
    { ism: "Husanboy", yosh: 25, ball: 92, shahar: "Namangan" },
    { ism: "Malika",   yosh: 22, ball: 78, shahar: "Farg'ona" },
    { ism: "Nodira",   yosh: 23, ball: 85, shahar: "Namangan" },
    { ism: "Aziza",    yosh: 24, ball: 64, shahar: "Andijon" },
    { ism: "Kamola",   yosh: 21, ball: 95, shahar: "Farg'ona" }
];

forEach - har biri uchun #

JavaScript
const mevalar = ["olma", "anor", "uzum"];

mevalar.forEach((meva, indeks) => {
    console.log(`${indeks + 1}. ${meva}`);
});

// forEach hech nima qaytarmaydi
const natija = mevalar.forEach((m) => m);
console.log("Qaytarilgan qiymat:", natija);
Natija
1. olma
2. anor
3. uzum
Qaytarilgan qiymat: undefined
forEach dan break qilib bo'lmaydi
JavaScript
royxat.forEach((element) => {
    if (element > 10) {
        break;              // SyntaxError
    }
});

return esa faqat shu chaqiruvni tugatadi - continue kabi ishlaydi, siklni to'xtatmaydi.

Erta chiqish kerak bo'lsa:

MaqsadMetod
Birinchi mosini topishfind
Bittasi mos keladimi?some
Hammasi mos keladimi?every
Haqiqiy break kerakfor...of

some va every topilgan zahoti to'xtaydi - shuning uchun ular katta massivda filter dan tezroq.

map - o'zgartirib yangi massiv #

JavaScript
const sonlar = [1, 2, 3, 4];

console.log("Kvadratlar:", sonlar.map((s) => s * s));

const ismlar = talabalar.map((t) => t.ism);
console.log("Ismlar:", ismlar);

// Obyektni qayta shakllantirish
const qisqa = talabalar.map((t) => ({
    ism: t.ism,
    otdimi: t.ball >= 70
}));

console.log(qisqa);
Natija
Kvadratlar: [ 1, 4, 9, 16 ]
Ismlar: [ 'Husanboy', 'Malika', 'Nodira', 'Aziza', 'Kamola' ]
[
  { ism: 'Husanboy', otdimi: true },
  { ism: 'Malika', otdimi: true },
  { ism: 'Nodira', otdimi: true },
  { ism: 'Aziza', otdimi: false },
  { ism: 'Kamola', otdimi: true }
]
Uch asosiy metod map o'zgartiradi 1 2 3 1 4 9 uzunlik saqlanadi filter tanlaydi 1 2 3 2 uzunlik kamayadi reduce yig'adi 1 2 3 6 bitta qiymatga aylanadi
map uzunlikni saqlaydi, filter kamaytiradi, reduce bittaga siqadi

filter - shartga mos elementlar #

JavaScript
console.log("Yosh > 22:", talabalar.filter((t) => t.yosh > 22).map((t) => t.ism));
console.log("Namangan :", talabalar.filter((t) => t.shahar === "Namangan").length, "ta");
console.log("A'lochi  :", talabalar.filter((t) => t.ball >= 85).map((t) => t.ism));
console.log("Bo'sh    :", talabalar.filter((t) => t.ball > 100));
Natija
Yosh > 22: [ 'Husanboy', 'Nodira', 'Aziza' ]
Namangan : 2 ta
A'lochi  : [ 'Husanboy', 'Nodira', 'Kamola' ]
Bo'sh    : []

find va findIndex #

JavaScript
const topildi = talabalar.find((t) => t.shahar === "Andijon");
console.log("Topildi:", topildi.ism);

const indeks = talabalar.findIndex((t) => t.ball > 90);
console.log("Indeks :", indeks);

const yoq = talabalar.find((t) => t.yosh > 100);
console.log("Yo'q   :", yoq);

console.log("findLast:", talabalar.findLast((t) => t.ball > 80).ism);
Natija
Topildi: Aziza
Indeks : 0
Yo'q   : undefined
findLast: Kamola
find va filter farqi
findfilter
QaytaradiBitta elementMassiv
Topilmasaundefined[] (bo'sh massiv)
To'xtaydimiBirinchisida haYo'q, oxirigacha

Bitta natija kutayotganda filter[0] emas, find ishlating:

JavaScript
const foydalanuvchi = royxat.filter((f) => f.id === 5)[0];   // sekin
const foydalanuvchi = royxat.find((f) => f.id === 5);        // to'g'ri

filter butun massivni aylanadi, find esa birinchi mosda to'xtaydi.

Diqqat: bo'sh massiv [] rost qiymat! Shuning uchun:

JavaScript
if (royxat.filter(shart)) { ... }          // DOIM rost - xato
if (royxat.filter(shart).length > 0) { }   // to'g'ri
if (royxat.some(shart)) { ... }            // eng toza

some va every #

JavaScript
console.log("Kimdir 90 dan yuqorimi?:", talabalar.some((t) => t.ball > 90));
console.log("Hammasi o'tdimi?       :", talabalar.every((t) => t.ball >= 70));
console.log("Hammasi voyaga yetganmi?:", talabalar.every((t) => t.yosh >= 18));

// Bo'sh massivda kutilmagan natija
console.log("Bo'sh massivda some :", [].some((x) => true));
console.log("Bo'sh massivda every:", [].every((x) => false));
Natija
Kimdir 90 dan yuqorimi?: true
Hammasi o'tdimi?       : false
Hammasi voyaga yetganmi?: true
Bo'sh massivda some : false
Bo'sh massivda every: true
Bo'sh massivda every har doim true

Bu matematik kelishuv - "bo'sh to'plamda barcha element shartni qanoatlantiradi" degan mantiqiy qoida (vacuous truth).

Amaliy natijasi:

JavaScript
const savat = [];
if (savat.every((m) => m.mavjud)) {
    console.log("Barcha mahsulot mavjud");   // bo'sh savatda ham chiqadi!
}

Shuning uchun avval bo'sh emasligini tekshiring:

JavaScript
if (savat.length > 0 && savat.every((m) => m.mavjud)) { ... }

some esa aksincha - bo'sh massivda har doim false, va bu odatda kutilgan xatti-harakat.

reduce - eng kuchli metod #

JavaScript
const sonlar = [10, 20, 30, 40];

// Yig'indi
const yigindi = sonlar.reduce((jami, son) => jami + son, 0);
console.log("Yig'indi :", yigindi);

// Eng katta
const eng = sonlar.reduce((katta, son) => (son > katta ? son : katta));
console.log("Eng katta:", eng);

// O'rtacha ball
const ortacha = talabalar.reduce((j, t) => j + t.ball, 0) / talabalar.length;
console.log("O'rtacha :", ortacha.toFixed(1));

// Shahar bo'yicha guruhlash
const guruhlar = talabalar.reduce((natija, t) => {
    if (!natija[t.shahar]) {
        natija[t.shahar] = [];
    }
    natija[t.shahar].push(t.ism);
    return natija;
}, {});

console.log(guruhlar);
Natija
Yig'indi : 100
Eng katta: 40
O'rtacha : 82.8
{
  Namangan: [ 'Husanboy', 'Nodira' ],
  "Farg'ona": [ 'Malika', 'Kamola' ],
  Andijon: [ 'Aziza' ]
}
reduce da boshlang'ich qiymatni tashlab ketmang
JavaScript
[].reduce((a, b) => a + b);        // TypeError!
Natija
TypeError: Reduce of empty array with no initial value

Boshlang'ich qiymat berilsa - muammo yo'q:

JavaScript
[].reduce((a, b) => a + b, 0);     // 0

Boshlang'ich qiymatsiz reduce:

  • Birinchi elementni boshlang'ich sifatida oladi;
  • Ikkinchisidan boshlab aylanadi;
  • Bo'sh massivda xato beradi.

Obyekt yig'ayotganda esa u butunlay noto'g'ri ishlaydi:

JavaScript
// NOTO'G'RI - birinchi element boshlang'ich bo'lib qoladi
talabalar.reduce((natija, t) => { ... });

// TO'G'RI
talabalar.reduce((natija, t) => { ... }, {});

Qoida: har doim boshlang'ich qiymat bering.

sort - saralash #

JavaScript
const sonlar = [10, 9, 100, 2, 25];

// Standart sort - LEKSIKOGRAFIK!
console.log("Standart:", [...sonlar].sort());

// To'g'ri: taqqoslash funksiyasi bilan
console.log("O'sish  :", [...sonlar].sort((a, b) => a - b));
console.log("Kamayish:", [...sonlar].sort((a, b) => b - a));

// Obyektlarni saralash
const ballBoyicha = [...talabalar].sort((a, b) => b.ball - a.ball);
console.log("Ball bo'yicha:", ballBoyicha.map((t) => `${t.ism}(${t.ball})`));

// Satrlarni saralash
const ismlar = ["Zebo", "Aziza", "Malika"];
console.log("Alifbo  :", [...ismlar].sort());
Natija
Standart: [ 10, 100, 2, 25, 9 ]
O'sish  : [ 2, 9, 10, 25, 100 ]
Kamayish: [ 100, 25, 10, 9, 2 ]
Ball bo'yicha: [
  'Kamola(95)',
  'Husanboy(92)',
  'Nodira(85)',
  'Malika(78)',
  'Aziza(64)'
]
Alifbo  : [ 'Aziza', 'Malika', 'Zebo' ]
sort ikki tuzoq bilan keladi

1. Standart saralash sonlarni satr deb biladi

JavaScript
[10, 9, 100].sort()        // [10, 100, 9]  - noto'g'ri!

sort argumentsiz chaqirilganda har elementni satrga aylantirib, alifbo tartibida saralaydi. "10" < "9" chunki "1" < "9".

Har doim taqqoslash funksiyasini bering:

JavaScript
sonlar.sort((a, b) => a - b);      // o'sish tartibida

2. sort asl massivni o'zgartiradi

JavaScript
const asl = [3, 1, 2];
asl.sort();
console.log(asl);          // [1, 2, 3] - asl o'zgardi!

Shuning uchun yuqoridagi misollarda [...sonlar] yozildi.

ES2023 dan boshlab toSorted() bor - u nusxa qaytaradi:

JavaScript
const saralangan = sonlar.toSorted((a, b) => a - b);   // asl saqlanadi

Xuddi shunday toReversed(), toSpliced(), with() ham qo'shilgan. Node 20 va zamonaviy brauzerlar qo'llab-quvvatlaydi.

O'zbek alifbosi bilan saralash #

JavaScript
const shaharlar = ["Toshkent", "Andijon", "Farg'ona", "Zomin", "Osh"];

console.log("Oddiy sort  :", [...shaharlar].sort());
console.log("localeCompare:", [...shaharlar].sort((a, b) => a.localeCompare(b, "uz")));

// Katta-kichik harfni e'tiborsiz qoldirish
const aralash = ["banan", "Anor", "olma", "Uzum"];
console.log("Registr bilan:", [...aralash].sort());
console.log("Registrsiz   :", [...aralash].sort((a, b) =>
    a.localeCompare(b, "uz", { sensitivity: "base" })));
Natija
Oddiy sort  : [ 'Andijon', "Farg'ona", 'Osh', 'Toshkent', 'Zomin' ]
localeCompare: [ 'Andijon', "Farg'ona", 'Osh', 'Toshkent', 'Zomin' ]
Registr bilan: [ 'Anor', 'Uzum', 'banan', 'olma' ]
Registrsiz   : [ 'Anor', 'banan', 'olma', 'Uzum' ]
Oddiy sort katta harfni oldinga qo'yadi

Unicode da katta harflar kichiklaridan oldin keladi ("A" = 65, "a" = 97). Shuning uchun oddiy sort:

Natija
["Anor", "Uzum", "banan", "olma"]

Bu foydalanuvchi kutgan tartib emas. localeCompare ishlating - u tilga xos qoidalarni biladi va registr masalasini hal qiladi.

Zanjirsimon ishlatish #

JavaScript
const natija = talabalar
    .filter((t) => t.ball >= 70)             // o'tganlar
    .sort((a, b) => b.ball - a.ball)         // ball bo'yicha
    .map((t) => `${t.ism}: ${t.ball}`)       // matnga
    .slice(0, 3);                            // birinchi uchtasi

console.log(natija);

// Bir qatorda statistika
const jamiBall = talabalar.reduce((j, t) => j + t.ball, 0);

console.log(`Talabalar: ${talabalar.length}, jami ball: ${jamiBall}`);
console.log(`Eng yuqori: ${Math.max(...talabalar.map((t) => t.ball))}`);
console.log(`Eng past  : ${Math.min(...talabalar.map((t) => t.ball))}`);
Natija
[ 'Kamola: 95', 'Husanboy: 92', 'Nodira: 85' ]
Talabalar: 5, jami ball: 414
Eng yuqori: 95
Eng past  : 64
Zanjirda tartib muhim
JavaScript
// SEKIN - avval hammasini o'zgartiradi, keyin tanlaydi
royxat.map(ogirAmal).filter(shart);

// TEZ - avval tanlaydi, keyin ozini o'zgartiradi
royxat.filter(shart).map(ogirAmal);

filter ni oldinroq qo'ying - keyingi metodlar kamroq element bilan ishlaydi.

Diqqat: har bir metod yangi massiv yaratadi. Uzun zanjir katta massivda xotira sarflaydi. Millionlab element bo'lsa bitta for...of sikli tejamliroq bo'lishi mumkin - lekin avval o'lchang.

Amaliy topshiriq
  1. forEach bilan indeks va qiymatni chiqaring.
  2. map bilan sonlarni kvadratga aylantiring.
  3. filter bilan shartga mos talabalarni tanlang.
  4. find va filter[0] farqini tushuntiring.
  5. Bo'sh massivda every nima uchun true ekanini ayting.
  6. reduce bilan yig'indi va o'rtachani hisoblang.
  7. reduce bilan shahar bo'yicha guruhlang.
  8. [10, 9, 100].sort() nima uchun noto'g'ri ekanini ko'rsating.
  9. localeCompare bilan registrsiz saralang.
  10. Zanjir yozing: filter → sort → map → slice.

Xulosa #

  • forEach hech nima qaytarmaydi va break ni qo'llamaydi.
  • map uzunlikni saqlaydi, filter kamaytiradi.
  • find birinchi mosda to'xtaydi - filter[0] dan tezroq.
  • Bo'sh massiv [] rost qiymat - .length ni tekshiring.
  • some va every erta to'xtaydi.
  • Bo'sh massivda every true, some false.
  • reduce ga har doim boshlang'ich qiymat bering.
  • sort() argumentsiz sonlarni satr sifatida saralaydi.
  • sort asl massivni o'zgartiradi; toSorted() esa yo'q.
  • Matn uchun localeCompare ishlating.
  • Zanjirda filter ni oldinroq qo'ying.

Keyingi bo'limda obyektlar bilan ishlashni o'rganamiz.

Xatolik topdingizmi?

Imlo xatosi, ishlamaydigan kod yoki noto‘g‘ri ma‘lumotni ko‘rsangiz - bizga xabar bering. Har bir xabar administrator tomonidan ko‘rib chiqiladi.