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

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

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

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

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

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

property1, property2 тощо: Це імена змінних, у які будуть присвоєні значення відповідних властивостей з sourceObject. Властивості об'єкта деструктуризуються за іменем властивості, а не за порядком. Порядок не має значення;
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 як окремі змінні з відповідними значеннями з об'єкта person.

Встановлення значень за замовчуванням

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


              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 отримає значення "March 9, 1454", якщо в об'єкті person відсутня властивість 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

Тепер можна використовувати змінні min та max замість minTemperature і maxTemperature.

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

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


              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

У цьому прикладі можна отримати доступ як до властивостей верхнього рівня, таких як name та profession, так і до вкладених властивостей, таких як degree, university та graduationYear, використовуючи деструктуризацію.

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

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

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

Запитати АІ

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

Suggested prompts:

Can you explain how to use object destructuring with function parameters?

What happens if a property is missing when destructuring?

Can you show more examples of nested object destructuring?

Awesome!

Completion rate improved to 2.27

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

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

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

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

property1, property2 тощо: Це імена змінних, у які будуть присвоєні значення відповідних властивостей з sourceObject. Властивості об'єкта деструктуризуються за іменем властивості, а не за порядком. Порядок не має значення;
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

Встановлення значень за замовчуванням


              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

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

Використовуючи синтаксис :, можна призначати значення властивостей змінним з іншими іменами. Наприклад:


              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

Тепер можна використовувати змінні min та max замість minTemperature і maxTemperature.

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


              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. Як можна перейменувати змінні під час деструктуризації об'єкта?

Awesome!

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

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

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

Встановлення значень за замовчуванням

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

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

1. Що виконує наступний код?

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

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