JavaScript-dagi ikkita eng kop ishlatiladigan malumotlar tuzilmasi Object va Array.

Obyektlar koplab malumotlarni bitta obyektga toplashimizga imkon beradi va massivlar royxatlangan toplamlarni saqlashga imkon beradi. Shunday qilib, biz obyekt yoki massiv yaratib, uni bitta shaxs sifatida boshqarishimiz yoki uni funktsiya chaqiruviga otkazishimiz mumkin.

Destrukturalashtirish bu maxsus sintaksis, bu massivlarni yoki moslamalarni bir dasta ozgaruvchanga ochish imkonini beradi, chunki bazida ular qulayroq boladi. Destruktirizatsiya, shuningdek, juda kop parametrlarga, standart qiymatlarga ega bolgan murakkab funktsiyalar bilan juda yaxshi ishlaydi va tez orada biz ularni qanday ishlashini korib chiqamiz.

Massivni destrukturalashtirish

Qanday qilib massivning ozgaruvchanga 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 azolari orniga ozgaruvchanlar bilan ishlashimiz mumkin.

Bu split yoki massivni qaytaradigan boshqa usullari bilan birlashganda juda yaxshi korinadi:

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 yigishni istasak uchta "..." nuqta yordamida qolganini oladigan yana bitta parametrni qoshishimiz mumkin:

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

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

If wed 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 orniga boshqa har qanday ozgaruvchan nomdan foydalanishimiz mumkin, shunchaki uning oldida uchta nuqta borligiga va destrukturalashtirishning oxirgi orinda turganiga ishonch hosil qiling.

Sukut boyicha tayinlangan qiymatlar

Agar massiv qiymatlar kamroq bolsa, tayinlashga nisbatan, xato bolmaydi. Yoq qiymatlar undefined hisoblanadi:

let [firstName, surname] = [];

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

Agar yetishmayotgan qiymatni sukut boyicha tayinlangan qiymat bilan almashtirishni xohlasak, uni = yordamida taminlashimiz mumkin:

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

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

Sukut boyicha tayinlangan qiymatlar murakkab ifodalar yoki hatto funktsiya chaqiruvlari bolishi mumkin. Ular faqat qiymat berilmagan taqdirda baholanadi.

Masalan, biz bu yerda ikkita sukut boyicha 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:}

Ong tomonda mavjud bolgan obyektimiz bor, biz uni ozgaruvchanlarga bolishni xohlaymiz. Chap tomonda tegishli xususiyatlar uchun shablon mavjud. Oddiy holatda, bu ozgaruvchanlar nomlari royxati {...}.

Masalan:

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

let {title, width, height} = options;

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

Tegishli ozgaruvchilarga 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 bolishi mumkin va xususiyatlar va ozgaruvchanlar ortasidagi yozishmalarni aniqlaydi.

Agar ozgaruvchanga xususiyatni boshqa nom bilan belgilashni xohlasak, masalan, options.width w deb nomlangan ozgaruvchanga otish uchun, biz uni ikki nuqta yordamida ornatishimiz 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 korsatadi. Yuqoridagi misolda, width w ozgaruvchanlarda saqlanadi , height h saqlanadi, va title bir xil nom ozgaruvchanga tayinlangan.

Potentsial yetishmayotgan xususiyatlar uchun biz sukut boyicha tayinlangan qiymatlarni "=" yordamida ornatamiz, 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 boyicha tayinlangan qiymatlar har qanday ifodalar va hatto funktsiya chaqiruvlari bolishi mumkin. Agar qiymat berilmagan bolsa, ular baholanadi.

Quyidagi kod kenglikni soraydi, 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 ozgaruvchilarga qaraganda koproq xususiyatlarga ega bolsa-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 kopchilik brauzerlar uni hozircha qollab-quvvatlamaydilar.

Bunga oxshaydi:

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 bolsa, 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 ozgaruvchanlarga tayinlangan.

size va items ning ozi buzilmaganligini unutmang.

[]

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

Bu kopincha destrukturalashtirish bilan sodir boladi. Bizda juda kop xususiyatlarga ega bolgan murakkab obekt mavjud va faqat kerakli narsalarni ajratib olishni xohlaymiz.

Hatto bu erda ham shunday boladi:

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

Smart funktsiya parametrlari

Funktsiya kop parametrlarga ega bolishi mumkin bolgan vaqtlar mavjud, ularning aksariyati ixtiyoriydir. Bu, ayniqsa, foydalanuvchi interfeyslariga taalluqlidir. Menyu yaratadigan funktsiyani tasavvur qiling. Uning kengligi, balandligi, sarlavhasi, buyumlar royxati va boshqalar bolishi 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 koproq parametrlar bilan shugullanganimizda oqilmaydi.

Destrukturalashtirish yordamga keladi!

Biz parametrlarni obyekt sifatida otkaza olamiz va funktsiya ularni darhol ozgaruvchanga 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 boyicha tayinlangan bolishini xohlasak, unda bosh obyektni korsatishimiz 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 boyicha {} dir, shuning uchun har doim destrukturalashtirish kerak bolgan narsa bor.

Xulosa

• Destrukturalashtirish obyektni yoki massivni koplab ozgaruvchanlarga zudlik bilan xaritalashga imkon beradi.

• Obyekt sintaksis:

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

  Bu shuni anglatadiki, prop xususiyati varName ozgaruvchaniga otishi kerak va agar bunday xususiyat bolmasa, u holda default qiymati ishlatilishi kerak.

• Massiv sintaksis:

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

  Birinchi element item1 ga otadi; ikkinchisi item2 ga otadi, qolganlari esa rest massivini yaratadi.

• Keyinchalik murakkab holatlar uchun chap tomon ong tomoni bilan bir xil tuzilishga ega bolishi kerak.