ES6 destrukturizatsiya

Reactda destruksiya

Destructuring - bu obyektlar yoki massivlardan qiymatlarni alohida o‘zgaruvchilarga chiqarish imkonini beruvchi JavaScript xususiyati. React-da u odatda props, hooklar va state boshqaruvi bilan qo‘llaniladi.

Eslatma: Destrukturizatsiya takrorlanuvchi obyekt va massivga kirishni kamaytirish orqali React kodini toza va o‘qilishi mumkin bo‘ladi.

Massivlarni destrukturizatsiya qilish

O‘zgaruvchiga massiv elementlarini belgilashning eski usuli:

Misol

Oldin:

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

O‘zingiz sinab ko‘ring »

O‘zgaruvchiga massiv elementlarini tayinlashning yangi usuli:

Misol

Destructuring bilan:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

//You can now access each variable separately:
document.getElementById('demo').innerHTML = truck;

O‘zingiz sinab ko‘ring »

Massivlarni destruksiyalashda o‘zgaruvchilarni e’lon qilish tartibi muhim ahamiyatga ega.

Agar biz faqat mashina va suvga ega bo‘lishni xohlasak, biz shunchaki yuk mashinasini qoldirib, vergul qo‘yishimiz mumkin:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

Funksiya massivni qaytarganda destrukturizatsiya foydali bo‘ladi:

Misol

function dateInfo(dat) {
  const d = dat.getDate();
  const m = dat.getMonth() + 1;
  const y = dat.getFullYear();

  return [d, m, y];
}

const [date, month, year] = dateInfo(new Date());

O‘zingiz sinab ko‘ring »

Obyektlarni destrukturizatsiya qilish

Obyektdan qiymatlarni chiqarish uchun siz destruksiyadan foydalanishingiz mumkin:

Misol

Obyektdan qiymatlarni o‘chiring:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName, age} = person;

//You can now access each variable separately:
document.getElementById("demo").innerHTML = firstName;

O‘zingiz sinab ko‘ring »

Obyektlar uchun xususiyatlarning tartibi muhim emas:

Misol

Qiymatlarni tasodifiy tartibda oching:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {lastName, age, firstName} = person;

O‘zingiz sinab ko‘ring »

Siz faqat kerakli qiymat(lar)ni chiqarib olishingiz mumkin:

Misol

Obyektdan faqat firstNameni chiqarib oling:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName} = person;

O‘zingiz sinab ko‘ring »

Potensial yetishmayotgan xususiyatlar uchun biz standart qiymatlarni o‘rnatishimiz mumkin:

Misol

Yo‘qolgan xususiyat uchun standart qiymatni o‘rnating:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Destructuring
let {firstName, lastName, age, country = "Norway"} = person;

O‘zingiz sinab ko‘ring »

Shuningdek, chuqur joylashgan (nested) obyektlarni ham destrukturizatsiya qilishimiz mumkin: buning uchun ichki obyektga murojaat qilamiz, so‘ngra ikki nuqta va jingalak qavslar yordamida undan kerakli elementlarni yana destrukturizatsiya qilamiz:

Misol

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  car: {
    brand: 'Ford',
    model: 'Mustang',
  }
};

// Destructuring
let {firstName, car: { brand, model }} = person;

let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;

O‘zingiz sinab ko‘ring »

Bizning JavaScript qo‘llanmamizda destrukturizatsiya haqida ko‘proq o‘qing.

React componentlarida destrukturizatsiya

Destrukturizatsiya (destructuring) ayniqsa React-da props, hooklar va API javoblari bilan ishlashda foydali. U kodingizni ixchamroq va o‘qilishi osonroq qiladi.

Props destrukturizatsiyasi

Component propslarni qabul qilganda, kerakli qiymatlarni chiqarish uchun destruksiyadan foydalanishingiz mumkin.

Destrukturadan foydalanish va foydalanmaslik o‘rtasidagi farqni ko‘rib chiqing:

//Using destructuring:
function Greeting({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

//NOT using destructuring:
function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}

Keling, ishlaydigan misolni ko‘rib chiqaylik:

Misol

Propslarni ajratib olish uchun destrukturadan foydalanish:

import { createRoot } from 'react-dom/client'

function Greeting({ name, age }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}
  
createRoot(document.getElementById('root')).render(
  <Greeting name="John" age={25} />
);

O‘zingiz sinab ko‘ring »

useState hook’ini destrukturizatsiya qilish

Agar component useState hookidan foydalansa, biz undan qiymatlarni olish uchun destruksiyadan foydalanamiz.

Misol

UseState dan qiymatlarni chiqarish uchun destrukturadan foydalanish:

import { createRoot, useState } from 'react-dom/client'

function Counter() {
  // Destructuring the array returned by useState
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

createRoot(document.getElementById('root')).render(
  <Counter />
);

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish