JavaScript-dagi ikkita eng ko’p ishlatiladigan ma’lumotlar tuzilmasi Object va Array.

Obyektlar ko’plab ma’lumotlarni bitta obyektga to’plashimizga imkon beradi va massivlar ro’yxatlangan to’plamlarni saqlashga imkon beradi. Shunday qilib, biz obyekt yoki massiv yaratib, uni bitta shaxs sifatida boshqarishimiz yoki uni funktsiya chaqiruviga o’tkazishimiz mumkin.

Destrukturalashtirish – bu maxsus sintaksis, bu massivlarni yoki moslamalarni bir dasta o’zgaruvchanga “ochish” imkonini beradi, chunki ba’zida ular qulayroq bo’ladi. Destruktirizatsiya, shuningdek, juda ko’p parametrlarga, standart qiymatlarga ega bo’lgan murakkab funktsiyalar bilan juda yaxshi ishlaydi va tez orada biz ularni qanday ishlashini ko’rib chiqamiz.

Massivni destrukturalashtirish

Qanday qilib massivning o’zgaruvchanga destrukturalashtirishga misol:

// bizda ism va familiya ko'rsatilgan massiv mavjud
let arr = ["Ilya", "Kantor"]

// destrukturalashtirish
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname);  // Smith

Endi biz massiv a’zolari o’rniga o’zgaruvchanlar bilan ishlashimiz mumkin.

Bu split yoki massivni qaytaradigan boshqa usullari bilan birlashganda juda yaxshi ko’rinadi:

let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname);  // Smith

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

// ikkinchi element kerak emas
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

let user = {};
[user.name, user.surname] = "John Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith

let user = {
  name: "John",
  age: 30
};

// kalitlari va qiymatlari ustida tsiklash
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

// Map iterates as [key, value] pairs, very convenient for destructuring
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

Qolganlar ‘…’

Agar biz nafaqat birinchi qiymatlarni olishni, balki quyidagilarni ham yig’ishni istasak – uchta "..." nuqta yordamida “qolganini” oladigan yana bitta parametrni qo’shishimiz mumkin:

let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar
// Further items aren't assigned anywhere

If we’d like also to gather all that follows – we can add one more parameter that gets “the rest” using three dots "...":

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// "qolganlar" turi massiv ekanligini unutmang.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

Rest qiymati – bu qolgan qator elementlari massivi. Biz “rest” o’rniga boshqa har qanday o’zgaruvchan nomdan foydalanishimiz mumkin, shunchaki uning oldida uchta nuqta borligiga va destrukturalashtirishning oxirgi o’rinda turganiga ishonch hosil qiling.

Sukut bo’yicha tayinlangan qiymatlar

Agar massiv qiymatlar kamroq bo’lsa, tayinlashga nisbatan, xato bo’lmaydi. Yo’q qiymatlar undefined hisoblanadi:

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

Agar yetishmayotgan qiymatni “sukut bo’yicha tayinlangan” qiymat bilan almashtirishni xohlasak, uni = yordamida ta’minlashimiz mumkin:

// sukut bo'yicha tayinlangan qiymatlar
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (massivdan)
alert(surname); // Anonymous (sukut bo'yicha tayinlangan)

Sukut bo’yicha tayinlangan qiymatlar murakkab ifodalar yoki hatto funktsiya chaqiruvlari bo’lishi mumkin. Ular faqat qiymat berilmagan taqdirda baholanadi.

Masalan, biz bu yerda ikkita sukut bo’yicha tayinlangan qiymat uchun prompt funktsiyasidan foydalanamiz. Ammo u faqat tayinlanmagan uchun ishlaydi:

// faqat familiyani uchun bajariladi
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius (massivdan)
alert(surname); // prompt natijasi

Please note: the prompt will run only for the missing value (surname).

Obyektni destrukturalashtirish

Destrukturalashtirish obyektlar bilan ham ishlaydi.

Asosiy sintaksis:

let {var1, var2} = {var1:…, var2:…}

O’ng tomonda mavjud bo’lgan obyektimiz bor, biz uni o’zgaruvchanlarga bo’lishni xohlaymiz. Chap tomonda tegishli xususiyatlar uchun “shablon” mavjud. Oddiy holatda, bu o’zgaruvchanlar nomlari ro’yxati {...}.

Masalan:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Tegishli o’zgaruvchilarga options.title,options.width va options.height xususiyatlari tayinlaniladi. Tartib muhim emas. Bu ham ishlaydi:

// let{...} da xususiyatlar tartibini o'zgartirdi
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

Chap tarafdagi shablon yanada murakkab bo’lishi mumkin va xususiyatlar va o’zgaruvchanlar o’rtasidagi yozishmalarni aniqlaydi.

Agar o’zgaruvchanga xususiyatni boshqa nom bilan belgilashni xohlasak, masalan, options.width w deb nomlangan o’zgaruvchanga o’tish uchun, biz uni ikki nuqta yordamida o’rnatishimiz kerak:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

Ikki nuqta “nima : qaerga borishini” ko’rsatadi. Yuqoridagi misolda, width w o’zgaruvchanlarda saqlanadi , height h saqlanadi, va title bir xil nom o’zgaruvchanga tayinlangan.

Potentsial yetishmayotgan xususiyatlar uchun biz sukut bo’yicha tayinlangan qiymatlarni "=" yordamida o’rnatamiz, masalan:

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Massivlar yoki funktsiya parametrlari singari, sukut bo’yicha tayinlangan qiymatlar har qanday ifodalar va hatto funktsiya chaqiruvlari bo’lishi mumkin. Agar qiymat berilmagan bo’lsa, ular baholanadi.

Quyidagi kod kenglikni so’raydi, lekin nomni emas.

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt natijasi)

Shuningdek, biz ikki nuqtani va tenglikni birlashtira olamiz:

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

Obyektning qolgan qismi «…» operatori

Obyekt biz o’zgaruvchilarga qaraganda ko’proq xususiyatlarga ega bo’lsa-chi? Bir oz olib, keyin “qolganini” biron joyga tayinlashimiz mumkinmi?

Bu yerda obyektning qolgan qismi operatoridan (uchta nuqta) foydalanish spetsifikatsiyasi deyarli standartga mos keladi, ammo ko’pchilik brauzerlar uni hozircha qo’llab-quvvatlamaydilar.

Bunga o’xshaydi:

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = property named title
// rest = object with the rest of properties
let {title, ...rest} = options;

// now title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

let title, width, height;

// bu satrda xato mavjud
{title, width, height} = {title: "Menu", width: 200, height: 100};

{
  // kod bloki
  let message = "Salom";
  // ...
  alert( message );
}

let title, width, height;

// endi yaxshi
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

Ichki destrukturalashtirish

Agar obyektda yoki massivda boshqa obyektlar va massivlar bo’lsa, biz chuqurroq qismlarni ajratib olish uchun murakkabroq chap tomon shablonlardan foydalanishimiz mumkin.

Quyidagi kodda options size xususiyatida yana bir obyekt va items xususiyatidagi massiv mavjud. Biriktirishning chap tomonidagi shablon bir xil tuzilishga ega:

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true    // biz yo'q qilmaydigan qo'shimcha narsa
};

// aniqlik uchun bir nechta chiziqlar bo'yicha destrukturalashtirish
let {
  size: { // hajmini bu yerga qo'ying
    width,
    height
  },
  items: [item1, item2], // itemslarni bu yerda tayinlang
  title = "Menu" // not present in the object (default value is used)
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

extra dan tashqari barcha options obyekti tegishli o’zgaruvchanlarga tayinlangan.

size va items ning o’zi buzilmaganligini unutmang.

Va nihoyat, biz standart qiymatdan width, height, item1, item2 va title ga egamiz.

Bu ko’pincha destrukturalashtirish bilan sodir bo’ladi. Bizda juda ko’p xususiyatlarga ega bo’lgan murakkab ob’ekt mavjud va faqat kerakli narsalarni ajratib olishni xohlaymiz.

Hatto bu erda ham shunday bo’ladi:

// butun hajmini o'zgaruvchanga aylantiring, qolgan qismiga e'tibor bermang
let { size } = options;

Smart funktsiya parametrlari

Funktsiya ko’p parametrlarga ega bo’lishi mumkin bo’lgan vaqtlar mavjud, ularning aksariyati ixtiyoriydir. Bu, ayniqsa, foydalanuvchi interfeyslariga taalluqlidir. Menyu yaratadigan funktsiyani tasavvur qiling. Uning kengligi, balandligi, sarlavhasi, buyumlar ro’yxati va boshqalar bo’lishi mumkin.

Bunday funktsiyani yozishning yomon usuli:

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

In real-life, the problem is how to remember the order of arguments. Usually IDEs try to help us, especially if the code is well-documented, but still… Another problem is how to call a function when most parameters are ok by default.

Like this?

// undefined where default values are fine
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

Bu xunuk. Va ko’proq parametrlar bilan shug’ullanganimizda o’qilmaydi.

Destrukturalashtirish yordamga keladi!

Biz parametrlarni obyekt sifatida o’tkaza olamiz va funktsiya ularni darhol o’zgaruvchanga aylantiradi:

// biz obyektni funktsiyaga o'tkazamiz
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ...va darhol uni o'zgaruvchanlarga kengaytiradi
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – argumentdan olingan
  // width, height – sukut bo'yicha tayinlangan
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

Ichki obyektlar va ikki nuqta xaritalari yordamida biz yanada murakkab destrukturalashtirishdan foydalanishimiz mumkin:

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // buyumlar birinchi element 1-item, ikkinchidan 2-itemga o'tadi
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

Sintaksis destrukturalashtirish bilan bir xil:

function({
  incomingProperty: varName = defaultValue
  ...
})

Iltimos, shuni unutmangki, bunday destrukturalashtirish showMenu() ning argumentiga ega. Agar biz barcha qiymatlarni sukut bo’yicha tayinlangan bo’lishini xohlasak, unda bo’sh obyektni ko’rsatishimiz kerak:

showMenu({}); // ok, all values are default

showMenu(); // bu xato

Buni butun tuzatish uchun standart qiymatni {} qilib belgilashimiz mumkin:

// ravshanlik uchun biroz soddalashtirilgan parametrlar
function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

Yuqoridagi kodda barcha argumentlar obyekti sukut bo’yicha {} dir, shuning uchun har doim destrukturalashtirish kerak bo’lgan narsa bor.

Xulosa

• Destrukturalashtirish obyektni yoki massivni ko’plab o’zgaruvchanlarga zudlik bilan xaritalashga imkon beradi.

• Obyekt sintaksis:

  let {prop : varName = default, ...rest} = object

  Bu shuni anglatadiki, prop xususiyati varName o’zgaruvchaniga o’tishi kerak va agar bunday xususiyat bo’lmasa, u holda default qiymati ishlatilishi kerak.

• Massiv sintaksis:

  let [item1 = default, item2, ...rest] = array

  Birinchi element item1 ga o’tadi; ikkinchisi item2 ga o’tadi, qolganlari esa rest massivini yaratadi.

• Keyinchalik murakkab holatlar uchun chap tomon o’ng tomoni bilan bir xil tuzilishga ega bo’lishi kerak.