Massiv iteratsiyasi
Massiv iteratsiya metodlari
Massiv iteratsiya metodlari massivning har bir elementi ustida ishlaydi.
Massiv qiymatlari bo‘ylab sikl
JavaScript massivning har bir elementi bo‘ylab sikl bilan o‘tish uchun 3 ta oddiy operatorni taqdim etadi:
- for ... of (elementlar bo‘ylab sikl)
- for ... in (indekslar bo‘ylab sikl)
- forEach (myFunction)
for...of sikli (tavsiya etiladi)
for...of operatori sizga massiv qiymatlarini beradi.
Misol
// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];
// Iterate over the Array values
let text = "";
for (let x of cars) {
text += x + ",";
}
O‘zingiz sinab ko‘ring »
for...in sikli (tavsiya etilmaydi)
for...in operatori sizga massiv indekslarini beradi.
Misol
// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];
// Iterate over the Array values
let text = "";
for (let x in cars) {
text += x + ",";
}
O‘zingiz sinab ko‘ring »
Elementlarni qaytarish uchun siz [x] dan foydalanishingiz kerak.
Misol
// Create an Array
const cars = ['BMW', 'Volvo', 'Mini'];
// Iterate over the Array values
let text = "";
for (let x in cars) {
text += cars[x] + "
";
}
O‘zingiz sinab ko‘ring »
Garchi bu ishlasa ham, massivlar uchun for...in dan foydalanish odatda yaxshi fikr emas.
for...in massivlarni emas, balki obyekt xususiyatlarini (masalan: name, age, height) tekshirish uchun yaratilgan.
JavaScript massivlarining forEach() metodi
forEach() metodi har bir massiv elementi uchun funksiyani (callback funksiyasi) chaqiradi.
Misol
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 3 ta argument qabul qiladi:
- Element qiymati
- Element indeksi
- Massivning o‘zi
Yuqoridagi misol faqat qiymat parametridan foydalanadi. Misolni quyidagicha qayta yozish mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
O‘zingiz sinab ko‘ring »
JavaScript Array map() metodi
map() metodi har bir massiv elementi uchun funksiyani bajarib, yangi massiv yaratadi.
map() metodi qiymati yo‘q massiv elementlari uchun funksiyani bajarmaydi.
map() metodi asl massivni o‘zgartirmaydi.
Ushbu misol har bir massiv qiymatini 2 ga ko‘paytiradi:
Misol
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 3 ta argument qabul qiladi:
- Element qiymati
- Element indeksi
- Massivning o‘zi
Callback funksiyasi faqat qiymat parametridan foydalansa, indeks va massiv parametrlarini tushirib qoldirish mumkin:
Misol
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
O‘zingiz sinab ko‘ring »
JavaScript massivlarining flatMap() metodi
ES2019 JavaScript’ga Array flatMap() metodini qo‘shdi.
flatMap() metodi avval massivning barcha elementlarini map qiladi, so‘ngra massivni tekislab (flatten), yangi massiv yaratadi.
Misol
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);
O‘zingiz sinab ko‘ring »
JavaScript Array filter()
filter() metodi testdan o‘tgan massiv elementlaridan yangi massiv yaratadi.
Ushbu misol qiymati 18 dan katta bo‘lgan elementlardan yangi massiv yaratadi:
Misol
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 3 ta argument qabul qiladi:
- Element qiymati
- Element indeksi
- Massivning o‘zi
Yuqoridagi misolda callback funksiyasi indeks va massiv parametrlaridan foydalanmaydi, shuning uchun ularni tushirib qoldirish mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
O‘zingiz sinab ko‘ring »
JavaScript Array reduce()
reduce() metodi bitta qiymat hosil qilish uchun har bir massiv elementi ustida funksiyani ishga tushiradi.
reduce() metodi massivda chapdan o‘ngga ishlaydi. Shuningdek, reduceRight() ga qarang.
reduce() metodi asl massivni kamaytirmaydi.
Ushbu misol massivdagi barcha sonlarning yig‘indisini topadi:
Misol
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 4 ta argument oladi:
- Jami (boshlang‘ich qiymat / ilgari qaytarilgan qiymat)
- Element qiymati
- Element indeksi
- Massivning o‘zi
Yuqoridagi misolda indeks va massiv parametrlaridan foydalanilmagani uchun uni quyidagicha qayta yozish mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
O‘zingiz sinab ko‘ring »
reduce() metodi boshlang‘ich qiymatni qabul qilishi mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
O‘zingiz sinab ko‘ring »
JavaScript massivlarining reduceRight() metodi
reduceRight() metodi bitta qiymat hosil qilish uchun har bir massiv elementi ustida funksiyani ishga tushiradi.
reduceRight() massivda o‘ngdan chapga ishlaydi. Shuningdek qarang: reduce() .
reduceRight() metodi asl massivni kamaytirmaydi.
Ushbu misol massivdagi barcha sonlarning yig‘indisini topadi:
Misol
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 4 ta argument oladi:
- Jami (boshlang‘ich qiymat / ilgari qaytarilgan qiymat)
- Element qiymati
- Element indeksi
- Massivning o‘zi
Yuqoridagi misolda indeks va massiv parametrlaridan foydalanilmaydi. Uni quyidagicha qayta yozish mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
O‘zingiz sinab ko‘ring »
JavaScript Array every()
every() metodi massivning barcha qiymatlari sinovdan o‘tishini tekshiradi.
Ushbu misol barcha massiv qiymatlari 18 dan katta ekanligini tekshiradi:
Misol
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 3 ta argument qabul qiladi:
- Element qiymati
- Element indeksi
- Massivning o‘zi
Callback funksiyasi faqat birinchi parametrdan (qiymat) foydalanganda, boshqa parametrlarni tushirib qoldirish mumkin:
Misol
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
O‘zingiz sinab ko‘ring »
JavaScript Array some()
some() metodi ba’zi massiv qiymatlari testdan o‘tishini tekshiradi.
Ushbu misol ba’zi massiv qiymatlari 18 dan katta ekanligini tekshiradi:
Misol
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
O‘zingiz sinab ko‘ring »
E’tibor bering, funksiya 3 ta argument qabul qiladi:
- Element qiymati
- Element indeksi
- Massivning o‘zi
JavaScript Array.from() metodi
Array.from() metodi quyidagilardan Array obyektini qaytaradi:
- Har qanday iterable obyekt
- length xususiyatiga ega har qanday obyekt
Array.from() yangi massivning har bir elementida funksiyani bajarishga imkon beruvchi ixtiyoriy parametrga ega:
Misol
Massivdan Array yaratish:
const myNumbers = [1,2,3,4];
const myArr = Array.from(myNumbers, (x) => x * 2);
O‘zingiz sinab ko‘ring »
JavaScript Array keys()
Array.keys() metodi massiv kalitlari bilan Array Iterator obyektini qaytaradi.
Misol
Massiv kalitlarini o‘z ichiga olgan Array Iterator obyektini yarating:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
O‘zingiz sinab ko‘ring »
JavaScript Array entries()
Misol
Array Iterator yarating va keyin kalit/qiymat juftliklari bo‘ylab iteratsiya qiling:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
document.getElementById("demo").innerHTML += x;
}
O‘zingiz sinab ko‘ring »
entries() metodi kalit/qiymat juftliklari bilan Array Iterator obyektini qaytaradi:
[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
entries() metodi asl massivni o‘zgartirmaydi.
JavaScript Array with() metodi
ES2023 massivdagi elementlarni asl massivni o‘zgartirmasdan yangilashning xavfsiz usuli sifatida Array with() metodini qo‘shdi.
Misol
const months = ["Januar", "Februar", "Mar", "April"];
const myMonths = months.with(2, "March");
O‘zingiz sinab ko‘ring »
JavaScript massivlar uchun spread operatori (...)
... operatori massivni alohida elementlarga kengaytiradi.
Bundan massivlarni birlashtirish uchun foydalanish mumkin:
1-misol
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
O‘zingiz sinab ko‘ring »
Yuqoridagi misolda ...arr1 arr1 ni alohida elementlarga yoyadi, ...arr2 arr2 ni alohida elementlarga yoyadi, arr3 esa ...arr1 va ...arr2 yordamida tuziladi.
2-misol
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "Des"];
const year = [...q1, ...q2, ...q3, ...q4];
O‘zingiz sinab ko‘ring »
Massivni nusxalash uchun spread operatoridan (...) foydalanish mumkin:
Spread operatori (...) funksiyaga argumentlarni uzatish uchun ishlatilishi mumkin:
4-misol
const numbers = [23,55,21,87,56];
let minValue = Math.min(...numbers);
let maxValue = Math.max(...numbers);
O‘zingiz sinab ko‘ring »
JavaScript massivlar uchun rest operatori (...)
Rest operatori (...) massivni destrukturizatsiya qilish va qolgan elementlarni yig‘ish imkonini beradi:
Misollar
let a, rest;
const arr1 = [1,2,3,4,5,6,7,8];
[a, ...rest] = arr1;
O‘zingiz sinab ko‘ring »
let a, b, rest;
const arr1 = [1,2,3,4,5,6,7,8];
[a, b, ...rest] = arr1;
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
To‘liq JavaScript ma’lumotnomasi
Barcha JavaScript xususiyatlari va metodlari bo‘yicha to‘liq tavsiflar va ko‘plab misollarga ega to‘liq ma’lumotnoma uchun quyidagi manzilga o‘ting:
W3Schools’ning to‘liq JavaScript ma’lumotnomasi.
Ushbu ma’lumotnoma 1999-yildan 2026-yilgacha bo‘lgan barcha JavaScript yangilanishlarini o‘z ichiga oladi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!