Massivlar — yaratish va asosiy metodlar — push, pop, shift, unshift, splice, slice

~20 daq · JavaScript · Ob'ektlar va Massivlar

Muammodan boshlaylik

Siz maktab jurnali yozyapsiz. 30 ta o'quvchi bor. Har birini alohida o'zgaruvchida saqlash qanday ko'rinadi?

const oqivchi1 = "Jasur";
const oqivchi2 = "Malika";
const oqivchi3 = "Sardor";
// ... va yana 27 ta

Bu bilan hech narsa qilib bo'lmaydi. Hammani bir vaqtda ko'rib chiqish, sanash, saralash — bari imkonsiz. Yangi o'quvchi qo'shilsa — yangi o'zgaruvchi yaratish kerak.

Massiv — bir xil maqsaddagi qiymatlarni tartibli holda saqlash uchun.

Massiv nima?

Massiv — indekslangan qiymatlar ro'yxati. Har bir qiymatning o'rni (indeksi) bor — 0 dan boshlanadi.

["Jasur", "Malika", "Sardor"]
    0         1         2

Bitta massiv ichida istalgan tur bo'lishi mumkin: sonlar, matnlar, ob'ektlar, hatto boshqa massivlar.

Hayotiy o'xshatma

Poyezd vagonlarini tasavvur qiling. Har bir vagon — massivning bir elementi. Vagonlar tartibli — 1-vagon, 2-vagon, 3-vagon. Oxiriga vagon qo'shish oson — lokomotivdan uzoqda. Boshiga qo'shish — barcha vagonlarni siljitish kerak. O'rtasiga qo'shish — yanada qiyin.

Massiv metodlari ham xuddi shunday: qayerga qo'shish yoki olinayotganiga qarab — qulay yoki qimmat.

Massiv yaratish

// Eng ko'p ishlatiladigan usul — literal
const mevalar = ["olma", "nok", "o'rik"];

// Bo'sh massiv
const royxat = [];

// Aralash turlar (mumkin, lekin kam ishlatiladi)
const aralash = [1, "matn", true, null];

// Array.from — boshqa narsadan massiv yasash
const harflar = Array.from("salom"); // ["s", "a", "l", "o", "m"]
const sonlar  = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

Elementga murojaat

const mevalar = ["olma", "nok", "o'rik"];

console.log(mevalar[0]); // "olma"  ← birinchi element (0 dan boshlanadi)
console.log(mevalar[2]); // "o'rik" ← uchinchi element
console.log(mevalar[5]); // undefined — bunday indeks yo'q

console.log(mevalar.length);    // 3 — elementlar soni
console.log(mevalar[mevalar.length - 1]); // "o'rik" — oxirgi element

Nima uchun 0 dan boshlanadi? Bu xotira manzili hisoblash bilan bog'liq — massivning boshi + 0 offset = birinchi element. Barcha zamonaviy tillar shu an'anani saqlaydi.

push va pop — oxiri bilan ishlash

push — oxiriga element qo'shadi. Yangi uzunlikni qaytaradi.

pop — oxiridan elementni olib chiqaradi. O'sha elementni qaytaradi.

const navbat = ["Ali", "Vali"];

navbat.push("Soli");         // ← oxiriga qo'shdi
console.log(navbat);         // ["Ali", "Vali", "Soli"]

const oxirgi = navbat.pop(); // ← oxiridan oldi
console.log(oxirgi);         // "Soli"
console.log(navbat);         // ["Ali", "Vali"]

push bir vaqtda bir nechta element qabul qiladi:

const sonlar = [1, 2];
sonlar.push(3, 4, 5);
console.log(sonlar); // [1, 2, 3, 4, 5]

shift va unshift — boshi bilan ishlash

unshift — boshiga element qo'shadi. Yangi uzunlikni qaytaradi.

shift — boshidan elementni olib chiqaradi. O'sha elementni qaytaradi.

const galma = ["Vali", "Soli"];

galma.unshift("Ali");       // ← boshiga qo'shdi
console.log(galma);         // ["Ali", "Vali", "Soli"]

const birinchi = galma.shift(); // ← boshidan oldi
console.log(birinchi);          // "Ali"
console.log(galma);             // ["Vali", "Soli"]

Nima uchun shift sekin?

push/pop — O(1). Oxiri bilan ishlash — faqat bir joy o'zgaradi.

shift/unshift — O(n). Boshi bilan ishlash — barcha elementlarning indeksi o'zgaradi. 1000 ta elementli massivda shift barcha 1000 elementni siljitadi.

unshift("X") qilganda:
  ["A", "B", "C"]
   0     1     2

  Natija:
  ["X", "A", "B", "C"]
   0     1     2     3
        ↑     ↑     ↑
        barcha elementlar siljidi

Ko'p o'chirish/qo'shish kerak bo'lsa — boshidan emas, oxiridan ishlang. Yoki Map/boshqa tuzilmalar ko'rib chiqing.

splice — o'rtadan qo'shish va olib chiqarish

splice(boshlash, nechta_ochirish, ...qoshiluvchilar)

O'chirish:

const ranglar = ["qizil", "yashil", "ko'k", "sariq"];

const olingan = ranglar.splice(1, 2); // 1-indeksdan 2 ta olib chiqar
console.log(olingan); // ["yashil", "ko'k"] ← olib chiqilganlar
console.log(ranglar); // ["qizil", "sariq"] ← o'zgargan massiv

Qo'shish:

const ranglar = ["qizil", "sariq"];

ranglar.splice(1, 0, "yashil", "ko'k"); // 1-indeksga, 0 ta o'chirmasdan, ikki rang qo'sh
console.log(ranglar); // ["qizil", "yashil", "ko'k", "sariq"]

Almashtirish (o'chirish + qo'shish birga):

const ranglar = ["qizil", "yashil", "ko'k"];

ranglar.splice(1, 1, "binafsha"); // 1-indeksdagini olib, "binafsha" qo'y
console.log(ranglar); // ["qizil", "binafsha", "ko'k"]

⚠️ splice massivning o'zini o'zgartiradi (mutating).

slice — kesim olish

slice(boshlash, oxir) — massivni o'zgartirmasdan, bir qismini yangi massiv sifatida qaytaradi.

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

console.log(harflar.slice(1, 3));  // ["b", "c"] ← 1-indeksdan 3-gacha (3 kirmaydi)
console.log(harflar.slice(2));     // ["c", "d", "e"] ← 2-dan oxirigacha
console.log(harflar.slice(-2));    // ["d", "e"] ← oxiridan 2 ta
console.log(harflar);              // ["a", "b", "c", "d", "e"] ← o'zgarmadi ✅

Massivni nusxalash uchun:

const asl    = [1, 2, 3];
const nusxa  = asl.slice(); // to'liq nusxa
nusxa.push(4);

console.log(asl);   // [1, 2, 3] — o'zgarmadi
console.log(nusxa); // [1, 2, 3, 4]

splice va slice farqi — eng ko'p chalkashtiriladi

Tez-tez uchraydigan xatolar

push ning qaytarish qiymatini elementga qo'shish:

const arr = [1, 2];

// ❌ push yangi uzunlikni qaytaradi, elementni emas
const natija = arr.push(3);
console.log(natija); // 3 — bu uzunlik, element emas!

// ✅ Avval qo'shing, keyin elementga murojaat qiling
arr.push(3);
console.log(arr[arr.length - 1]); // 3

Manfiy indeks ishlamaydi:

const arr = [10, 20, 30];

console.log(arr[-1]);  // undefined ❌ — Python emas bu!
console.log(arr[arr.length - 1]); // 30 ✅
console.log(arr.at(-1));          // 30 ✅ — zamonaviy usul

splice va slice ni chalkashtirib yuborish:

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

// splice — aslni o'zgartiradi
arr.splice(1, 2);
console.log(arr); // [1, 4, 5] ← 2 ta element o'chirildi

// slice — aslni o'zgartirmaydi
const arr2 = [1, 2, 3, 4, 5];
const kesim = arr2.slice(1, 3);
console.log(arr2);  // [1, 2, 3, 4, 5] ← o'zgarmadi
console.log(kesim); // [2, 3]

Sababi: splice — "kelib kesib ol" (destructive), slice — "nusxa ko'chirib ol" (non-destructive). Ikkala nomida ham "lice" bo'lsa-da, ishlashi tubdan farqli.

length ni noto'g'ri tushunish:

const arr = ["a", "b", "c"];

// length — elementlar soni, oxirgi indeks emas
console.log(arr.length);         // 3
console.log(arr[arr.length]);    // undefined ❌ — indeks 3, holbuki oxirgi 2
console.log(arr[arr.length - 1]); // "c" ✅

Xulosa

Massiv — tartibli qiymatlar ro'yxati, indeks 0 dan boshlanadi.

Performance: push/pop — tez (O(1)). shift/unshift/splice — sekin (O(n)).

Keyingi dars

23-dars: Massiv metodlari — map, filter, reduce