Вивчайте Деструктуризація Об'єктів для Чистішого Коду | Просунуті Методи Маніпулювання Об'єктами

Деструктуризація об'єктів — це можливість, яка дозволяє витягувати окремі властивості з об'єкта та присвоювати їх змінним. Це сприяє створенню більш лаконічного та зрозумілого коду, особливо при роботі з об'єктами, що містять багато властивостей.

Розуміння деструктуризації об'єктів

Деструктуризація об'єктів — це спосіб розпаковки значень з об'єктів у окремі змінні. Деструктуризація використовує синтаксис, схожий на об'єктний літерал, але розташований зліва від операції присвоєння.

Ось базовий синтаксис деструктуризації об'єкта:

const { property1, property2, ...} = sourceObject;

property1, property2: імена змінних, які міститимуть значення з об'єкта;
sourceObject: об'єкт, з якого витягуються властивості;
Порядок не має значення: властивості співставляються за іменем.

Деструктуризація об'єктів на практиці


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Тепер fullName, nationality та occupation — це окремі змінні, які містять відповідні значення.

Вказування значень за замовчуванням

Якщо об'єкт не містить властивості, можна призначити значення за замовчуванням:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Якщо birthDate відсутній, використовується значення за замовчуванням.

Перейменування змінних

Можна перейменовувати отримані змінні за допомогою синтаксису :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Це корисно, коли коротші імена підвищують читабельність або дозволяють уникнути конфліктів імен.

Деструктуризація вкладених об'єктів

Можна також деструктурувати властивості всередині вкладених об'єктів.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Можна витягувати як верхньорівневі, так і глибоко вкладені значення в одному виразі.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 7

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Свайпніть щоб показати меню

Розуміння деструктуризації об'єктів

Ось базовий синтаксис деструктуризації об'єкта:

const { property1, property2, ...} = sourceObject;

property1, property2: імена змінних, які міститимуть значення з об'єкта;
sourceObject: об'єкт, з якого витягуються властивості;
Порядок не має значення: властивості співставляються за іменем.

Деструктуризація об'єктів на практиці


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Тепер fullName, nationality та occupation — це окремі змінні, які містять відповідні значення.

Вказування значень за замовчуванням

Якщо об'єкт не містить властивості, можна призначити значення за замовчуванням:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Якщо birthDate відсутній, використовується значення за замовчуванням.

Перейменування змінних

Можна перейменовувати отримані змінні за допомогою синтаксису :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Це корисно, коли коротші імена підвищують читабельність або дозволяють уникнути конфліктів імен.

Деструктуризація вкладених об'єктів

Можна також деструктурувати властивості всередині вкладених об'єктів.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

Можна витягувати як верхньорівневі, так і глибоко вкладені значення в одному виразі.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 7

Деструктуризація Об'єктів для Чистішого Коду

Розуміння деструктуризації об'єктів

Деструктуризація об'єктів на практиці

Вказування значень за замовчуванням

Перейменування змінних

Деструктуризація вкладених об'єктів

1. Що робить наступний код?

2. Як можна надати значення за замовчуванням для змінних при деструктуризації об'єкта?

3. Як можна перейменувати змінні під час деструктуризації об'єкта?

Деструктуризація Об'єктів для Чистішого Коду

Розуміння деструктуризації об'єктів

Деструктуризація об'єктів на практиці

Вказування значень за замовчуванням

Перейменування змінних

Деструктуризація вкладених об'єктів

1. Що робить наступний код?

2. Як можна надати значення за замовчуванням для змінних при деструктуризації об'єкта?

3. Як можна перейменувати змінні під час деструктуризації об'єкта?