8.1 Деструктуризація об'єктів
Деструктуризація в JavaScript — це синтаксис, який дозволяє розпаковувати значення з масивів або властивості з об'єктів в окремі змінні. Це робить код більш чистим і зручним для читання. У цій лекції ми детально розглянемо деструктуризацію об'єктів і масивів, а також різні приклади та їх застосування.
1. Основний синтаксис
Деструктуризація об'єктів дозволяє отримувати значення властивостей об'єкта і присвоювати їх змінним:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Виведе: John
console.log(age); // Виведе: 30
console.log(isStudent); // Виведе: false
2. Присвоєння новим змінним
Можна присвоювати значення властивостей об'єкта змінним з іншими іменами:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Виведе: John
console.log(personAge); // Виведе: 30
3. Значення за замовчуванням
Якщо властивості не існує в об'єкті, можна задати значення за замовчуванням:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Виведе: true
4. Вкладена деструктуризація
Можна отримувати значення з вкладених об'єктів:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Виведе: New York
console.log(country); // Виведе: USA
5. Деструктуризація в параметрах функції
Деструктуризацію можна використовувати в параметрах функції:
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Виведе: Hello, my name is John and I am 30 years old.
8.2 Деструктуризація масивів
1. Основний синтаксис
Деструктуризація масивів дозволяє отримувати значення елементів масиву і присвоювати їх змінним:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Виведе: apple
console.log(second); // Виведе: banana
console.log(third); // Виведе: cherry
2. Пропуск елементів
Можна пропускати елементи масиву, які не потрібно отримувати:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Виведе: apple
console.log(third); // Виведе: cherry
3. Значення за замовчуванням
Можна задавати значення за замовчуванням для елементів масиву:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Виведе: banana
4. Вкладена деструктуризація
Можна отримувати значення з вкладених масивів:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Виведе: 2
console.log(three); // Виведе: 3
5. Деструктуризація в параметрах функції
Деструктуризацію можна використовувати в параметрах функції для масивів:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Виведе: John Doe
8.3 Приклади застосування деструктуризації
1. Обмін значеннями змінних
Деструктуризація дозволяє легко обмінюватися значеннями змінних:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Виведе: 2
console.log(b); // Виведе: 1
2. Отримання даних з об'єктів
Деструктуризація спрощує отримання даних з об'єктів, наприклад, із відповіді API:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Виведе: John Doe
console.log(email); // Виведе: john@example.com
3. Налаштування за замовчуванням у функціях
Деструктуризація дозволяє легко задавати значення за замовчуванням для параметрів функцій:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Виведе: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Виведе: { name: 'Anonymous', age: 0, isAdmin: false }
4. Масиви та функції
Деструктуризація спрощує роботу з масивами, особливо при використанні методів масивів:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Виведе: 1
console.log(second); // Виведе: 2
console.log(rest); // Виведе: [3, 4, 5]
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ