Massivlar - JavaScript asoslari

Massiv - tartiblangan ro'yxat. Bitta o'zgaruvchida yuzlab qiymat saqlash imkonini beradi.

Massiv yaratish #

JavaScript

const mevalar = ["olma", "anor", "uzum"];
const sonlar = [1, 2, 3, 4, 5];
const aralash = [1, "matn", true, null, { ism: "Aziza" }];
const bosh = [];

console.log("Mevalar:", mevalar);
console.log("Uzunligi:", mevalar.length);
console.log("Birinchi:", mevalar[0]);
console.log("Oxirgi  :", mevalar[mevalar.length - 1]);
console.log("Oxirgi (at):", mevalar.at(-1));
console.log("Yo'q indeks:", mevalar[99]);
console.log("Aralash turlar:", aralash.length, "ta element");
console.log("Bo'shmi?:", bosh.length === 0);

Natija

Mevalar: [ 'olma', 'anor', 'uzum' ]
Uzunligi: 3
Birinchi: olma
Oxirgi  : uzum
Oxirgi (at): uzum
Yo'q indeks: undefined
Aralash turlar: 5 ta element
Bo'shmi?: true

at(-1) - oxirgi elementni olishning zamonaviy usuli

Ilgari oxirgi elementni olish uzun yozilardi:

JavaScript

royxat[royxat.length - 1]

ES2022 dan boshlab at() metodi bor va u manfiy indeksni tushunadi:

JavaScript

royxat.at(-1)      // oxirgi
royxat.at(-2)      // oxirgidan oldingi

Satr uchun ham ishlaydi: "salom".at(-1) → "m".

Diqqat: royxat[-1] ishlamaydi - u undefined qaytaradi, chunki JavaScript da manfiy indeks oddiy xossa nomi hisoblanadi.

Element qo'shish va o'chirish #

JavaScript

const royxat = ["b", "c"];

royxat.push("d");            // oxiriga qo'shish
console.log("push    :", royxat);

royxat.unshift("a");         // boshiga qo'shish
console.log("unshift :", royxat);

const oxirgi = royxat.pop(); // oxiridan olish
console.log("pop     :", royxat, "olindi:", oxirgi);

const birinchi = royxat.shift(); // boshidan olish
console.log("shift   :", royxat, "olindi:", birinchi);

Natija

push    : [ 'b', 'c', 'd' ]
unshift : [ 'a', 'b', 'c', 'd' ]
pop     : [ 'a', 'b', 'c' ] olindi: d
shift   : [ 'b', 'c' ] olindi: a

Katta massivda oxiridan ishlash boshidan ishlashdan tezroq

`slice` - kesib olish #

JavaScript

const harflar = ["a", "b", "c", "d", "e"];

console.log("slice(1, 3) :", harflar.slice(1, 3));
console.log("slice(2)    :", harflar.slice(2));
console.log("slice(-2)   :", harflar.slice(-2));
console.log("slice()     :", harflar.slice());
console.log("Asl massiv  :", harflar);

Natija

slice(1, 3) : [ 'b', 'c' ]
slice(2)    : [ 'c', 'd', 'e' ]
slice(-2)   : [ 'd', 'e' ]
slice()     : [ 'a', 'b', 'c', 'd', 'e' ]
Asl massiv  : [ 'a', 'b', 'c', 'd', 'e' ]

slice asl massivni o'zgartirmaydi - yangi massiv qaytaradi.

`splice` - o'rnidan o'zgartirish #

JavaScript

const royxat = ["a", "b", "c", "d", "e"];

// (indeks, nechta o'chirish, qo'shiladigan...)
const ochirilgan = royxat.splice(1, 2);
console.log("O'chirildi :", ochirilgan);
console.log("Qolgani    :", royxat);

royxat.splice(1, 0, "x", "y");     // o'chirmasdan qo'shish
console.log("Qo'shildi  :", royxat);

royxat.splice(0, 1, "z");          // almashtirish
console.log("Almashtirildi:", royxat);

Natija

O'chirildi : [ 'b', 'c' ]
Qolgani    : [ 'a', 'd', 'e' ]
Qo'shildi  : [ 'a', 'x', 'y', 'd', 'e' ]
Almashtirildi: [ 'z', 'x', 'y', 'd', 'e' ]

slice va splice - bir harf, katta farq

	`slice`	`splice`
Asl massiv	O'zgarmaydi	O'zgaradi
Qaytaradi	Yangi massiv	O'chirilgan elementlar
Argumentlar	(boshi, oxiri)	(indeks, nechta, qo'shish...)

Eslab qolish usuli: splice ichida p bor - u "portlatadi" (asl massivni o'zgartiradi).

Eng ko'p uchraydigan xato:

JavaScript

const nusxa = royxat.splice();     // NOTO'G'RI - nusxa emas
const nusxa = royxat.slice();      // TO'G'RI

Ikkinchi argument ham chalkash:

JavaScript

royxat.slice(1, 3)     // 1 dan 3 gacha (3 kirmaydi) - 2 ta element
royxat.splice(1, 3)    // 1 dan boshlab 3 TA element

Nusxalash #

JavaScript

const asl = [1, 2, 3];

// NOTO'G'RI - bir xil massivga ikki nom
const havola = asl;
havola.push(4);
console.log("Havola o'zgartirdi:", asl);

// TO'G'RI - uch usul
const nusxa1 = asl.slice();
const nusxa2 = [...asl];
const nusxa3 = Array.from(asl);

nusxa1.push(99);
console.log("Asl saqlandi     :", asl);
console.log("Nusxa o'zgardi   :", nusxa1);
console.log("Barchasi teng?   :", nusxa2.length === nusxa3.length);

Natija

Havola o'zgartirdi: [ 1, 2, 3, 4 ]
Asl saqlandi     : [ 1, 2, 3, 4 ]
Nusxa o'zgardi   : [ 1, 2, 3, 4, 99 ]
Barchasi teng?   : true

Sayoz nusxa ichki obyektlarni ulashadi

slice, [...] va Array.from - sayoz (shallow) nusxa oladi. Ichidagi obyektlar umumiy qoladi:

JavaScript

const asl = [{ son: 1 }, { son: 2 }];
const nusxa = [...asl];

nusxa[0].son = 99;
console.log(asl[0].son);       // 99  - asl ham o'zgardi!

Chuqur nusxa uchun structuredClone ishlating (zamonaviy brauzer va Node 17+):

JavaScript

const chuqur = structuredClone(asl);
chuqur[0].son = 99;            // asl ta'sirlanmaydi

Eski usul JSON.parse(JSON.stringify(x)) ham ishlaydi, lekin u Date, Map, undefined va funksiyalarni yo'qotadi.

Chuqur nusxa amalda #

JavaScript

const asl = [{ ism: "Malika", ballar: [90, 85] }];

const sayoz = [...asl];
const chuqur = structuredClone(asl);

sayoz[0].ballar.push(100);

console.log("Asl ballar   :", asl[0].ballar);
console.log("Chuqur nusxa :", chuqur[0].ballar);
console.log("Ta'sirlandimi?:", asl[0].ballar.length !== chuqur[0].ballar.length);

Natija

Asl ballar   : [ 90, 85, 100 ]
Chuqur nusxa : [ 90, 85 ]
Ta'sirlandimi?: true

Qidirish #

JavaScript

const shaharlar = ["Toshkent", "Namangan", "Andijon", "Namangan"];

console.log("indexOf     :", shaharlar.indexOf("Namangan"));
console.log("lastIndexOf :", shaharlar.lastIndexOf("Namangan"));
console.log("indexOf yo'q:", shaharlar.indexOf("Xiva"));
console.log("includes    :", shaharlar.includes("Andijon"));
console.log("includes yo'q:", shaharlar.includes("Xiva"));

Natija

indexOf     : 1
lastIndexOf : 3
indexOf yo'q: -1
includes    : true
includes yo'q: false

includes yoki indexOf?

Faqat mavjudligini bilish kerak bo'lsa - includes:

JavaScript

if (royxat.includes(qiymat)) { ... }        // aniq
if (royxat.indexOf(qiymat) !== -1) { ... }  // eski uslub

indexOf faqat o'rnini bilish kerak bo'lganda ishlatiladi.

Muhim farq: indexOf NaN ni topa olmaydi (chunki NaN !== NaN), includes esa topadi:

JavaScript

[NaN].indexOf(NaN)      // -1  (topmadi)
[NaN].includes(NaN)     // true

Birlashtirish va bo'lish #

JavaScript

const a = [1, 2];
const b = [3, 4];

console.log("concat  :", a.concat(b));
console.log("spread  :", [...a, ...b]);
console.log("join    :", ["olma", "anor"].join(", "));
console.log("split   :", "a-b-c".split("-"));
console.log("flat    :", [1, [2, [3, [4]]]].flat(2));
console.log("flat(Inf):", [1, [2, [3, [4]]]].flat(Infinity));

Natija

concat  : [ 1, 2, 3, 4 ]
spread  : [ 1, 2, 3, 4 ]
join    : olma, anor
split   : [ 'a', 'b', 'c' ]
flat    : [ 1, 2, 3, [ 4 ] ]
flat(Inf): [ 1, 2, 3, 4 ]

Ko'p o'lchovli massiv #

JavaScript

const jadval = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log("Markaziy element:", jadval[1][1]);

// Qatorlarni chiqarish
for (const qator of jadval) {
    console.log(qator.join(" "));
}

// Diagonal yig'indisi
let diagonal = 0;
for (let i = 0; i < jadval.length; i++) {
    diagonal += jadval[i][i];
}
console.log("Diagonal yig'indisi:", diagonal);

Natija

Markaziy element: 5
1 2 3
4 5 6
7 8 9
Diagonal yig'indisi: 15

Ko'p o'lchovli massivni fill bilan yaratmang

JavaScript

const notogri = Array(3).fill(Array(3).fill(0));
notogri[0][0] = 5;
console.log(notogri[1][0]);        // 5 - hamma qator o'zgardi!

fill bir xil havolani hamma yacheykaga qo'yadi - uchala qator aslida bitta massiv.

To'g'ri usul - har qator uchun yangi massiv yaratish:

JavaScript

const togri = Array.from({ length: 3 }, () => Array(3).fill(0));
togri[0][0] = 5;
console.log(togri[1][0]);          // 0 - to'g'ri

Array.from ning ikkinchi argumenti - har element uchun alohida chaqiriladigan funksiya.

Massiv uzunligi bilan ishlash #

JavaScript

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

royxat.length = 3;             // qisqartirish
console.log("Qisqartirildi:", royxat);

royxat.length = 5;             // uzaytirish
console.log("Uzaytirildi  :", royxat);
console.log("Bo'sh joylar :", royxat[4]);

royxat.length = 0;             // butunlay tozalash
console.log("Tozalandi    :", royxat);

console.log("Massivmi?    :", Array.isArray([1, 2]));
console.log("typeof massiv:", typeof [1, 2]);

Natija

Qisqartirildi: [ 1, 2, 3 ]
Uzaytirildi  : [ 1, 2, 3, <2 empty items> ]
Bo'sh joylar : undefined
Tozalandi    : []
Massivmi?    : true
typeof massiv: object

typeof massivni aniqlay olmaydi

typeof [1, 2] "object" qaytaradi - massiv ham obyekt turining bir ko'rinishi.

Massivni aniqlash uchun Array.isArray ishlating:

JavaScript

Array.isArray([1, 2])       // true
Array.isArray({ a: 1 })     // false
Array.isArray("salom")      // false

Eski kodda instanceof Array uchraydi, lekin u boshqa oynadan (iframe) kelgan massivni tanimaydi. Array.isArray bu muammodan xoli.

Amaliy topshiriq

Massiv yaratib, at(-1) bilan oxirgi elementni oling.
push, pop, shift, unshift ni sinab ko'ring.
slice asl massivni o'zgartirmasligini isbotlang.
splice bilan o'rtadan ikki element o'chiring.
splice bilan o'chirmasdan element qo'shing.
Massivni uch usulda nusxalang.
Sayoz nusxada ichki obyekt ulashilishini ko'rsating.
structuredClone bilan chuqur nusxa oling.
Array(3).fill(Array(3)) muammosini takrorlang va tuzating.
typeof va Array.isArray farqini tekshiring.

Xulosa #

Massiv indekslari noldan boshlanadi.
at(-1) oxirgi elementni oladi; [-1] ishlamaydi.
push/pop tez, shift/unshift barcha elementni suradi.
slice nusxa qaytaradi, splice aslini o'zgartiradi.
slice(1, 3) - oxirgi indeks kirmaydi.
Massivni tayinlash nusxa emas - bir xil havola.
[...], slice(), Array.from - sayoz nusxa.
Chuqur nusxa uchun structuredClone.
includes NaN ni topadi, indexOf topmaydi.
Array(3).fill(Array(3)) bitta massivni takrorlaydi.
Massivni Array.isArray bilan aniqlang, typeof bilan emas.

Keyingi bo'limda massivning kuchli metodlarini o'rganamiz.

Massiv yaratish #

Element qo'shish va o'chirish #

slice - kesib olish #

splice - o'rnidan o'zgartirish #

Nusxalash #

Chuqur nusxa amalda #

Qidirish #

Birlashtirish va bo'lish #

Ko'p o'lchovli massiv #

Massiv uzunligi bilan ishlash #

Xulosa #

Xatolik topdingizmi?

`slice` - kesib olish #

`splice` - o'rnidan o'zgartirish #