JavaScript massiv metodlari: sort comparator mexanizmi, reverse, join, some/every mantiqiy tekshiruvlari, flat va flatMap hamda metodlar zanjiri (Method Chaining).
Chapter 14'da map, filter, reduce bilan tanishdik. Bu bobda qolgan muhim array metodlarini o'rganamiz va ularni birgalikda (method chaining) ishlatishni chuqurroq ko'ramiz.
sort() — array elementlarini tartiblaydi. Lekin uning "standart" xatti-harakati ko'pchilikni chalg'itadi.
script.jsJavaScriptlet numbers = [10, 1, 21, 2];console.log(numbers.sort());// Kutilgan: [1, 2, 10, 21]// Haqiqiy: [1, 10, 2, 21]
Nima uchun? Standart holatda sort() elementlarni string sifatida solishtiradi ("10" va "2" solishtirilsa, "1" < "2" bo'lgani uchun "10" — "2"dan oldin keladi).
script.jsJavaScriptlet numbers = [10, 1, 21, 2];numbers.sort(function (a, b) {return a - b; // o'sish tartibida});console.log(numbers); // [1, 2, 10, 21]
| Natija | Ma'nosi |
|---|---|
a - b < 0 | a — bdan oldin keladi |
a - b > 0 | b — adan oldin keladi |
a - b === 0 | Tartib o'zgarmaydi |
script.jsJavaScriptnumbers.sort((a, b) => b - a); // [21, 10, 2, 1]
⚠️ Common Mistake
sort() — asl array'ni o'zgartiradi (mutate qiladi), map/filterdan farqli. Agar asl array saqlanishi kerak bo'lsa, avval nusxa oling: [...numbers].sort().
script.jsJavaScriptlet arr = [1, 2, 3];arr.reverse();console.log(arr); // [3, 2, 1]
⚠️ Common Mistake
reverse() ham asl array'ni o'zgartiradi.
script.jsJavaScriptlet words = ["Salom", "Dunyo"];console.log(words.join(" ")); // "Salom Dunyo"console.log(words.join("-")); // "Salom-Dunyo"
🔗 Connection
join() — Chapter 9'da o'rgangan split()ning "teskarisi". split() string'ni array'ga, join() array'ni string'ga aylantiradi.
some() — array'da kamida bitta element shartga mos kelsa true qaytaradi.every() — array'da barcha elementlar shartga mos kelsagina true qaytaradi.script.jsJavaScriptlet ages = [18, 22, 15, 30];console.log(ages.some(age => age < 18)); // true (15 bor)console.log(ages.every(age => age >= 18)); // false (15 yo'q qiladi)
🗳️ some() — "kamida bitta odam rozimi?" degan savol.
🗳️ every() — "hammasi rozimi?" degan savol.
flat() — ichma-ich (nested) array'larni "tekislaydi" (bir qavatga tushiradi).
script.jsJavaScriptlet nested = [1, [2, 3], [4, [5, 6]]];console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]] — 1 qavatconsole.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6] — 2 qavatconsole.log(nested.flat(Infinity)); // to'liq tekislash
script.jsJavaScriptlet sentences = ["Salom dunyo", "JavaScript ajoyib"];let words = sentences.flatMap(sentence => sentence.split(" "));console.log(words); // ["Salom", "dunyo", "JavaScript", "ajoyib"]
Agar oddiy map() ishlatilganda, natija [["Salom", "dunyo"], ["JavaScript", "ajoyib"]] (nested array) bo'lardi. flatMap() esa buni avtomatik "tekislaydi".
Array metodlarini ketma-ket "zanjirlab" ishlatish — zamonaviy JavaScript'ning eng kuchli xususiyatlaridan biri.
script.jsJavaScriptlet products = [{ name: "Laptop", price: 1200, inStock: true },{ name: "Phone", price: 800, inStock: false },{ name: "Tablet", price: 500, inStock: true },{ name: "Watch", price: 300, inStock: true }];let result = products.filter(p => p.inStock).map(p => p.price).reduce((sum, price) => sum + price, 0);console.log(result); // 2000 (Laptop + Tablet + Watch)
.filter(p => p.inStock) → faqat mavjud mahsulotlar: [Laptop, Tablet, Watch].map(p => p.price) → faqat narxlar: [1200, 500, 300].reduce((sum, price) => sum + price, 0) → yig'indi: 2000code.textTEXTproducts│▼ filter (inStock)[Laptop, Tablet, Watch]│▼ map (price)[1200, 500, 300]│▼ reduce (sum)2000
💡 Key Idea
Method chaining o'qishni osonlashtiradi: har bir qadam "nima qilinayotganini" alohida ko'rsatadi, bitta katta murakkab loop yozish o'rniga.
⚠️ Common Mistake
Juda uzun zanjir (5-6 tadan ortiq metod) — kodni o'qishni qiyinlashtirishi mumkin. Har bir qadamni yangi qatorga yozish (yuqoridagi misoldagi kabi) o'qishni osonlashtiradi.
Task:
[5, 3, 8, 1, 9] array'ini o'sish tartibida saralang (sort() va comparator bilan).
Required Concepts:
sort()(a, b) => a - b comparator'idan foydalaning.Task:
Berilgan array'da barcha foydalanuvchilar 18 yoshdan katta ekanligini tekshiring (every() yordamida):
script.jsJavaScriptlet users = [{ name: "Ali", age: 20 },{ name: "Vali", age: 25 }];
Required Concepts:
every()users.every(user => user.age >= 18) dan foydalaning.Task:
Method chaining yordamida: berilgan mahsulotlar ro'yxatidan narxi 500dan qimmat bo'lganlarini toping, ularning nomlarini olib, katta harflarga o'tkazing va vergul bilan birlashtirilgan string sifatida chiqaring.
script.jsJavaScriptlet products = [{ name: "laptop", price: 1200 },{ name: "mouse", price: 20 },{ name: "monitor", price: 600 }];// Kutilgan natija: "LAPTOP, MONITOR"
Required Concepts:
filter, map, jointoUpperCase.filter().map().join(", ") zanjiridan foydalaning.script.jsJavaScriptlet numbers = [1, [2, 3], [4, [5]]];console.log(numbers.flat(1).length);
🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.
<details> <summary>Answer</summary> 5Why?
flat(1) faqat 1 qavat ichki array'larni tekislaydi. Boshlang'ich array [1, [2, 3], [4, [5]]] — 3 ta elementdan iborat (1, [2,3], [4,[5]]).
1 qavat tekislangach: [2, 3] — ochiladi (2 va 3 alohida elementga aylanadi), [4, [5]] ham ochiladi (4 va [5] alohida elementga aylanadi, lekin [5] ichidagi 5 yana bitta qavat ichkarida qolgani uchun ochilmaydi).
Natija: [1, 2, 3, 4, [5]] — jami 5 ta element.
🔗 Agar to'liq tekislash kerak bo'lsa, flat(2) yoki flat(Infinity) ishlatish kerak edi.
</details>Quyidagi kodda muammo bor:
script.jsJavaScriptlet scores = [45, 8, 100, 23];scores.sort();console.log(scores);// Dasturchi kutgan: [8, 23, 45, 100]
Your Task:
Yechim:
</details>script.jsJavaScriptlet scores = [45, 8, 100, 23];scores.sort((a, b) => a - b);console.log(scores); // [8, 23, 45, 100]
sort() — standart holatda string sifatida solishtiradi, sonlar uchun comparator kerak.reverse() — array tartibini teskari qiladi (asl array o'zgaradi).join() — array'ni string'ga aylantiradi.some()/every() — mos kelish shartlarini tekshiradi.flat()/flatMap() — nested array'larni tekislaydi.sort() va reverse() — asl array'ni o'zgartiradi, ehtiyot bo'ling.(a, b) => a - b.some() — "kamida bittasi", every() — "hammasi".flat(Infinity) — har qanday chuqurlikdagi nested array'ni to'liq tekislaydi.script.jsJavaScriptarray.sort((a, b) => a - b); // o'sish tartibida saralasharray.reverse(); // teskari aylantirisharray.join(", "); // string'ga aylantirisharray.some(x => x > 5); // kamida bittasi mosmiarray.every(x => x > 5); // barchasi mosmiarray.flat(Infinity); // to'liq tekislasharray.flatMap(x => [x, x * 2]); // map + flatarray.filter(x => x > 5).map(x => x * 2).reduce((sum, x) => sum + x, 0);
Mavzu bo‘yicha tushunchalaringizni interaktiv test orqali sinovdan o‘tkazing va natijalarni bilib oling.
Darslikda o‘rganilgan qoidalarga asosan real kod yozing, testlardan o‘tkazing va yechimlarni mustahkamlang.
Test Sinovi
Hali topshirilmagan (kamida 75% kerak)
Amaliy Masalalar
0 / 3 ta yechildi (kamida 75% kerak)
Dars sifati va mazmunini yaxshilash uchun o‘z haqqoniy bahoingizni qoldiring.
Mavzuni to‘liq o‘zlashtirish uchun test sinovi, amaliy kodlash va bog‘liq darslar
O‘z bilimingizni interaktiv test savollari orqali tekshiring va darhol xatolarni tahlil qiling.
Nazariyani real kod yozish bilan mustahkamlang, avtomatik testlardan o‘ting va XP to‘plang.
Kurs bo‘yicha keyingi va bog‘liq mavzular: