Destructuring assignment

JavaScriptda eng ko'p ishlatiladigan ikkita ma'lumot tuzilmasi bu Object va Array hisoblanadi.

Objects (Obyektlar) bizga kalitlar orqali ma'lumotlarni saqlaydigan bir butun birlik yaratishga imkon beradi.
Arrays (Massivlar) bizga tartiblangan ro'yxatga ma'lumotlarni yig'ishga imkon beradi.

Lekin, ularni funksiyaga uzatayotganda, barcha elementlarni funksiyada ishlatmasligimiz mumkin. Funksiya faqat ma'lum elementlarni yoki xususiyatlarni talab qilishi mumkin.

Destructuring assignment (Qayta strukturalash) maxsus sintaksis bo'lib, u massiv yoki obyektlarni alohida o'zgaruvchilarga ajratib olishga imkon beradi, bu ko'p hollarda qulayroq hisoblanadi.

Bu sintaksis murakkab funksiyalar bilan yaxshi ishlaydi, masalan, ko'p parametrlarga ega bo'lgan funksiyalar bilan.

Massivlarda destructuring

Keling, massivni o'zgaruvchilarga qanday qilib ajratishni ko'rib chiqamiz:

// ism va familiya saqlangan massivimiz bor
let arr = ["John", "Smith"];
 
// destructuring assignment
// birinchi element arr[0]ni firstName'ga, ikkinchi element arr[1]ni surname'ga o'rnatadi
let [firstName, surname] = arr;
 
alert(firstName); // John
alert(surname);   // Smith

Endi biz massivning elementlari o'rniga o'zgaruvchilar bilan ishlashimiz mumkin. Bu split kabi metodlar bilan juda yaxshi ishlaydi:

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

Destructuring bu qisqa yozish shaklidir, massivni "buzmaydi", ya'ni u asl massivni o'zgartirmaydi.

Agar massivdagi ba'zi elementlarni ishlatishni istamasangiz, uni vergul bilan tashlab yuborishingiz mumkin:

let [firstName, , title] = ["Julius", "Caesar", "Consul"];
alert(title); // Consul

Har qanday iterable (iteratsiya qilinadigan obyektlar) bilan ishlaydi

Massivdan tashqari, har qanday iteratsiya qilinadigan obyektlar bilan ham ishlatish mumkin:

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

Solishtirishga mos keladigan har qanday narsaga o'rnatish mumkin

Destructuringni obyektning xususiyatlariga ham o'rnatish mumkin:

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

.entries() bilan aylantirish

Object.entries() metodini destructuring bilan birlashtirib, obyekt xususiyatlari va qiymatlarini aylantirish uchun ishlatish mumkin:

let user = {
  name: "John",
  age: 30
};
 
for (let [key, value] of Object.entries(user)) {
  alert(`${key}: ${value}`);
}

O'zgaruvchilarni almashtirish

Ikki o'zgaruvchining qiymatlarini almashish uchun destructuringdan foydalanishingiz mumkin:

let guest = "Jane";
let admin = "Pete";
 
[guest, admin] = [admin, guest];
 
alert(`${guest} ${admin}`); // Pete Jane

Qolgan elementlarni yig'ish: "..."

Agar massivda ortiqcha elementlar bo'lsa, ularni "...rest" operatori yordamida yig'ish mumkin:

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
 
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic

Default qiymatlar

Agar massivdagi ba'zi elementlar etishmayotgan bo'lsa, ular undefined bo'ladi, lekin o'zgaruvchilarga default qiymatlar belgilash mumkin:

let [firstName = "Guest", surname = "Anonymous"] = ["Julius"];
alert(firstName); // Julius
alert(surname); // Anonymous

Obyektlarda destructuring

Obyektlarni destructuring qilish ham oddiy:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};
 
let {title, width, height} = options;
 
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Agar obyekt ichida xususiyatlarning nomini o'zgartirishni istasangiz, shunday qilib yozishingiz mumkin:

let {width: w, height: h, title} = options;
alert(w);  // 100
alert(h);  // 200

Funksiya parametrlarida destructuring

Destructuring murakkab funksiyalar parametrlarini boshqarishda ham qulaydir:

function showMenu({title = "Untitled", width = 200, height = 100} = {}) {
  alert(`${title} ${width} ${height}`);
}
 
showMenu(); // Menu 200 100

Destructuring assignment - massiv yoki obyektni tezkor ravishda ko'p o'zgaruvchilarga ajratib olish imkonini beradi. Bu oddiy va kuchli sintaksis, ayniqsa murakkab tuzilmalar bilan ishlayotganda juda qulay hisoblanadi.

Destructuring assignment