Har bir dasturchi o'zlashtirishi kerak bo'lgan massiv metodlari

Massivlar JavaScript'dagi asosiy ma'lumotlar tuzilmasi bo'lib, massiv metodlarini o'zlashtirish samarali va tushunarli kod yozish uchun juda muhimdir. Ushbu metodlar massivlarda saqlangan ma'lumotlarni boshqarish, o'zgartirish va tahlil qilish imkonini beradi, bu esa vaqtingizni tejaydi va kodingizning o'qilishini yaxshilaydi. Ushbu qo'llanmada har bir dasturchi bilishi kerak bo'lgan eng muhim massiv metodlari amaliy misollar va qo'llash holatlari bilan birga ko'rib chiqiladi.

Nima uchun massiv metodlarini o'zlashtirish kerak?

• Samaradorlik: Massiv metodlari massivlarda keng tarqalgan operatsiyalarni bajarishning optimallashtirilgan va qisqa usullarini taqdim etadi.
• O'qilishi osonligi: O'rnatilgan metodlardan foydalanish kodingizni tushunish va qo'llab-quvvatlashni osonlashtiradi.
• Funksional dasturlash: Ko'pgina massiv metodlari funksional dasturlash uslubini qo'llab-quvvatlaydi, bu esa toza va testdan o'tkazilishi oson kodga olib keladi.
• Kross-brauzer mosligi: JavaScript massiv metodlari zamonaviy brauzerlarda keng qo'llab-quvvatlanadi.

Asosiy massiv metodlari

1. Massivlar bo'ylab iteratsiya: forEach()

forEach() metodi massivdagi har bir element uchun taqdim etilgan funksiyani bir marta bajaradi. Bu massiv elementlari bo'ylab iteratsiya qilish va ularga nisbatan amallarni bajarishning oddiy usulidir.

Sintaksis:

array.forEach(function(currentValue, index, array) {
  // Har bir element uchun bajariladigan kod
});

Misol:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
  console.log(number * 2);
});
// Natija: 2, 4, 6, 8, 10

Qo'llash holati: Ro'yxatdagi elementlarni ko'rsatish, massiv elementlarining xususiyatlarini yangilash.

2. Massivlarni o'zgartirish: map()

map() metodi chaqiruvchi massivdagi har bir elementga berilgan funksiyani qo'llash natijalaridan iborat yangi massiv yaratadi. Bu ma'lumotlarni bir formatdan ikkinchisiga o'zgartirish uchun a'lo darajada mos keladi.

Sintaksis:

const newArray = array.map(function(currentValue, index, array) {
  // O'zgartirilgan qiymatni qaytaring
});

Misol:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers);
// Natija: [1, 4, 9, 16, 25]

Qo'llash holati: Ma'lumotlarni ko'rsatish uchun formatlash, birliklarni o'zgartirish, o'zgartirilgan qiymatlar bilan yangi massiv yaratish.

Global misol: Tasavvur qiling, sizda USD'dagi valyuta qiymatlari massivi bor va ularni EUR'ga o'zgartirishingiz kerak. Siz valyuta kursi API'si bilan map() metodidan foydalanib, EUR qiymatlaridan iborat yangi massiv yaratishingiz mumkin.

3. Massivlarni filtrlash: filter()

filter() metodi taqdim etilgan funksiya tomonidan amalga oshirilgan testdan o'tgan barcha elementlar bilan yangi massiv yaratadi. Bu massivdan ma'lum bir shart asosida kerakli elementlarni tanlab olish uchun juda mos keladi.

Sintaksis:

const newArray = array.filter(function(currentValue, index, array) {
  // Elementni saqlab qolish uchun true, chiqarib tashlash uchun false qaytaring
});

Misol:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);
// Natija: [2, 4, 6]

Qo'llash holati: Keraksiz ma'lumotlarni o'chirish, qidiruv mezonlari bo'yicha elementlarni tanlash, foydalanuvchi afzalliklariga ko'ra ma'lumotlarni filtrlash.

Global misol: Turli mamlakatlardagi foydalanuvchi obyektlari massivini ko'rib chiqing. Siz filter() yordamida faqat "Yaponiya" yoki "Braziliya" kabi ma'lum bir mamlakatdagi foydalanuvchilarni o'z ichiga olgan yangi massiv yaratishingiz mumkin.

4. Massivlarni qisqartirish: reduce()

reduce() metodi massivning har bir elementi uchun siz taqdim etgan "reducer" funksiyasini bajaradi va natijada bitta yakuniy qiymat hosil qiladi. Bu massiv ma'lumotlari bo'yicha hisob-kitoblar va agregatsiyalarni bajarish uchun juda kuchli vositadir.

Sintaksis:

const result = array.reduce(function(accumulator, currentValue, currentIndex, array) {
  // Yangilangan akkumulyatorni qaytaring
}, initialValue);

Misol:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);
// Natija: 15

Qo'llash holati: Yig'indilarni, o'rtacha qiymatlarni hisoblash, maksimal yoki minimal qiymatlarni topish, satrlarni birlashtirish.

Global misol: Aytaylik, sizda turli mintaqalardan (masalan, Shimoliy Amerika, Yevropa, Osiyo) olingan savdo ko'rsatkichlari massivi bor. Siz reduce() yordamida umumiy global savdo hajmini hisoblashingiz mumkin.

5. Massivlarda qidirish: find(), findIndex(), includes(), indexOf(), lastIndexOf()

JavaScript massivlarda qidirish uchun bir nechta metodlarni taqdim etadi:

• find(): Massivdagi taqdim etilgan test funksiyasini qanoatlantiradigan birinchi elementning qiymatini qaytaradi. Hech qaysi element funksiyani qanoatlantirmasa, undefined qaytaradi.
• findIndex(): Massivdagi taqdim etilgan test funksiyasini qanoatlantiradigan birinchi elementning indeksini qaytaradi. Hech qaysi element funksiyani qanoatlantirmasa, -1 qaytaradi.
• includes(): Massiv o'z yozuvlari orasida ma'lum bir qiymatni o'z ichiga olganligini aniqlaydi va true yoki false qaytaradi.
• indexOf(): Berilgan element massivda topilishi mumkin bo'lgan birinchi indeksni qaytaradi, agar u mavjud bo'lmasa, -1 qaytaradi.
• lastIndexOf(): Berilgan element massivda topilishi mumkin bo'lgan oxirgi indeksni qaytaradi, agar u mavjud bo'lmasa, -1 qaytaradi.

Misollar:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find(number => number > 3);
console.log(foundNumber); // Natija: 4

const foundIndex = numbers.findIndex(number => number > 3);
console.log(foundIndex); // Natija: 3

const includesThree = numbers.includes(3);
console.log(includesThree); // Natija: true

const indexOfTwo = numbers.indexOf(2);
console.log(indexOfTwo); // Natija: 1

const lastIndexOfFour = [1, 2, 3, 4, 4, 5].lastIndexOf(4);
console.log(lastIndexOfFour); // Natija: 4

Qo'llash holatlari: Ro'yxatdan ma'lum bir foydalanuvchini topish, xarid savatchasida mahsulot mavjudligini tekshirish, massivdagi elementning o'rnini aniqlash.

6. Elementlarni qo'shish va o'chirish: push(), pop(), shift(), unshift(), splice()

Ushbu metodlar elementlarni qo'shish yoki olib tashlash orqali asl massivni o'zgartiradi:

• push(): Massivning oxiriga bir yoki bir nechta element qo'shadi va massivning yangi uzunligini qaytaradi.
• pop(): Massivdan oxirgi elementni olib tashlaydi va o'sha elementni qaytaradi.
• shift(): Massivdan birinchi elementni olib tashlaydi va o'sha elementni qaytaradi.
• unshift(): Massivning boshiga bir yoki bir nechta element qo'shadi va massivning yangi uzunligini qaytaradi.
• splice(): Mavjud elementlarni olib tashlash yoki almashtirish va/yoki o'rniga yangi elementlar qo'shish orqali massiv tarkibini o'zgartiradi.

Misollar:

const numbers = [1, 2, 3];

numbers.push(4, 5); // Oxiriga 4 va 5 ni qo'shadi
console.log(numbers); // Natija: [1, 2, 3, 4, 5]

const lastElement = numbers.pop(); // Oxirgi elementni (5) o'chiradi
console.log(numbers); // Natija: [1, 2, 3, 4]
console.log(lastElement); // Natija: 5

const firstElement = numbers.shift(); // Birinchi elementni (1) o'chiradi
console.log(numbers); // Natija: [2, 3, 4]
console.log(firstElement); // Natija: 1

numbers.unshift(0); // Boshiga 0 ni qo'shadi
console.log(numbers); // Natija: [0, 2, 3, 4]

numbers.splice(1, 2, 10, 20); // 1-indeksdan boshlab 2 ta elementni o'chiradi va 10 va 20 ni qo'shadi
console.log(numbers); // Natija: [0, 10, 20, 4]

Qo'llash holatlari: Navbatni boshqarish, xarid savatchasiga mahsulot qo'shish, vazifalar ro'yxatini yangilash.

7. Qism-massivlar yaratish: slice()

slice() metodi massivning bir qismining sayoz nusxasini start dan end gacha (end kirmaydi) tanlab olingan yangi massiv obyektiga qaytaradi, bu yerda start va end o'sha massivdagi elementlarning indeksini bildiradi. Asl massiv o'zgartirilmaydi.

Sintaksis:

const newArray = array.slice(start, end);

Misol:

const numbers = [1, 2, 3, 4, 5];
const subarray = numbers.slice(1, 4);
console.log(subarray); // Natija: [2, 3, 4]
console.log(numbers); // Natija: [1, 2, 3, 4, 5] (asl massiv o'zgarishsiz qoladi)

Qo'llash holati: Massivning bir qismini qayta ishlash uchun ajratib olish, massivning nusxasini yaratish.

8. Massivlarni saralash: sort()

sort() metodi massiv elementlarini joyida saralaydi va saralangan massivni qaytaradi. Standart saralash tartibi o'sish bo'yicha bo'lib, elementlarni satrlarga o'tkazish, so'ngra ularning UTF-16 kod birliklari ketma-ketligi qiymatlarini solishtirishga asoslangan.

Sintaksis:

array.sort(compareFunction);

compareFunction ixtiyoriy. Agar u ko'rsatilmasa, massiv elementlari satrlarga aylantiriladi va UTF-16 kod birligi qiymatiga ko'ra saralanadi. Agar raqamlarni sonli tartibda saralamoqchi bo'lsangiz, solishtirish funksiyasini taqdim etishingiz kerak.

Misollar:

const numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort(); // Alfavit bo'yicha saralaydi (raqamlarni satr sifatida qabul qiladi)
console.log(numbers); // Natija: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => a - b); // Sonli tartibda saralaydi (o'sish)
console.log(numbers); // Natija: [1, 1, 2, 3, 4, 5, 6, 9]

numbers.sort((a, b) => b - a); // Sonli tartibda saralaydi (kamayish)
console.log(numbers); // Natija: [9, 6, 5, 4, 3, 2, 1, 1]

Qo'llash holati: Mahsulotlar ro'yxatini narxi bo'yicha saralash, foydalanuvchilarni ismlari bo'yicha saralash, vazifalarni ustuvorligi bo'yicha tartiblash.

9. Massiv elementlarini tekshirish: every(), some()

Ushbu metodlar massivdagi barcha yoki ba'zi elementlar shartni qanoatlantirishini tekshiradi:

• every(): Massivdagi barcha elementlar taqdim etilgan funksiya tomonidan amalga oshirilgan testdan o'tishini tekshiradi. U mantiqiy (Boolean) qiymat qaytaradi.
• some(): Massivdagi kamida bitta element taqdim etilgan funksiya tomonidan amalga oshirilgan testdan o'tishini tekshiradi. Agar massivda berilgan funksiya uchun true qaytaradigan element topsa, u true qaytaradi; aks holda false qaytaradi. U massivni o'zgartirmaydi.

Misollar:

const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(number => number % 2 === 0);
console.log(allEven); // Natija: true

const someOdd = numbers.some(number => number % 2 !== 0);
console.log(someOdd); // Natija: false

Qo'llash holati: Forma ma'lumotlarini tekshirish, barcha foydalanuvchilar shartlar va qoidalarni qabul qilganligini tekshirish, xarid savatchasidagi biron bir mahsulotning zaxirada yo'qligini aniqlash.

10. Massiv elementlarini birlashtirish: join()

join() metodi massivdagi (yoki massivga o'xshash obyekt) barcha elementlarni vergul yoki belgilangan ajratuvchi satr bilan ajratilgan holda birlashtirib, yangi satr yaratadi va qaytaradi. Agar massivda faqat bitta element bo'lsa, o'sha element ajratuvchisiz qaytariladi.

Sintaksis:

const newString = array.join(separator);

Misol:

const words = ["Hello", "World", "!"];
const sentence = words.join(" ");
console.log(sentence); // Natija: Hello World !

Qo'llash holati: Vergul bilan ajratilgan qiymatlar ro'yxatini yaratish, segmentlar massividan URL yo'lini yaratish.

Eng yaxshi amaliyotlar

• Qaytariladigan qiymatni tushunish: Har bir metod nima qaytarishini (yangi massiv, bitta qiymat, mantiqiy qiymat va hokazo) bilib oling.
• O'zgarmaslik (Immutability): map(), filter() va slice() kabi metodlar yangi massivlar yaratib, asl ma'lumotlarni saqlab qoladi. Kutilmagan nojo'ya ta'sirlardan qochish uchun iloji boricha asl massivni o'zgartiradigan metodlar (push(), pop(), shift(), unshift(), splice(), sort()) o'rniga ularni afzal ko'ring.
• Zanjir hosil qilish (Chaining): Murakkab operatsiyalarni ixcham va o'qilishi oson tarzda bajarish uchun bir nechta massiv metodlarini birlashtiring. Masalan:

  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const result = numbers
    .filter(number => number % 2 === 0) // Juft sonlarni filtrlash
    .map(number => number * 2); // 2 ga ko'paytirish
  console.log(result); // Natija: [4, 8, 12, 16, 20]

• Ishlash samaradorligi: Massiv metodlari odatda samarali bo'lsa-da, juda katta massivlar bilan ishlaganda ishlash samaradorligiga ta'sirini hisobga oling. Ba'zi hollarda an'anaviy for sikli tezroq bo'lishi mumkin.
• O'qilishi osonligi: Maqsadingizni eng yaxshi ifodalaydigan metodni tanlang. Masalan, oddiy iteratsiya uchun forEach(), o'zgartirish uchun map() va tanlash uchun filter() dan foydalaning.

Xulosa

JavaScript massiv metodlarini o'zlashtirish har qanday veb-dasturchi uchun juda muhimdir. Ular ma'lumotlarni boshqarish va o'zgartirish uchun kuchli va samarali vositalarni taqdim etadi, bu esa toza, o'qilishi oson va qo'llab-quvvatlanishi mumkin bo'lgan kodga olib keladi. Ushbu metodlarni samarali tushunib va qo'llab, siz dasturlash ko'nikmalaringizni sezilarli darajada oshirishingiz va ishonchli ilovalar yaratishingiz mumkin.

Tushunchangizni mustahkamlash va ularning to'liq imkoniyatlarini ochish uchun ushbu metodlarni turli stsenariylarda qo'llashni mashq qiling. Dasturlashdan zavqlaning!