Деструктуризация — это мощный и удобный способ извлечения отдельных значений из массивов и объектов в JavaScript и присваивания их отдельным переменным. В React деструктуризация часто используется для работы с пропсами, хуками и управлением состоянием компонента.
Деструктуризация массивов
Ранее присвоение элементов массива отдельным переменным выглядело так:
Пример
const vehicles = ['mustang', 'f-150', 'expedition'];
// старый способ
const car = vehicles[0]; // mustang
const truck = vehicles[1]; // f-150
const suv = vehicles[2]; // expedition
// Теперь можно обращаться к каждому элементу отдельно:
document.getElementById('demo').innerHTML = truck;
Новый способ назначения элементов массива:
Пример
const vehicles = ['mustang', 'f-150', 'expedition'];
// с помощью деструктуризации
const [car, truck, suv] = vehicles;
// Теперь можно обращаться к каждому элементу отдельно:
document.getElementById('demo').innerHTML = truck;
Деструктуризация удобна, когда функция возвращает массив:
Пример
function dateInfo(date) {
const day = date.getDate(); // День месяца
const month = date.getMonth() + 1; // Номер месяца (начиная с нуля)
const year = date.getFullYear(); // Год
return [day, month, year];
}
// Назначение переменных через деструктуризацию
const [day, month, year] = dateInfo(new Date());
Пропуск значений
Порядок объявления переменных при деструктуризации массивов играет важную роль. Если нужны только некоторые элементы, можно пропустить промежуточные значения, оставив пробелы с запятыми:
Пример
const vehicles = ['mustang', 'f-150', 'expedition'];
// возьмем только первую и последнюю машины
const [car, , suv] = vehicles;
Деструктуризация объектов
Извлекать значения из объекта можно также при помощи деструктуризации.
Пример
Извлечение значений из объекта:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Обычный способ
let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;
// Деструктуризация
let { firstName, lastName, age } = person;
// Теперь можно обратиться к каждой переменной отдельно:
document.getElementById("demo").innerHTML = firstName;
При этом порядок свойств при деструктуризации объектов не важен.
Пример
Извлечение значений из объекта в случайном порядке:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Меняем порядок свойств при извлечении
let { lastName, age, firstName } = person;
Можно извлекать только нужные вам свойства.
Пример
Извлечение из объекта только свойства firstName:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Берем только нужное свойство
let { firstName } = person;
Для отсутствующих свойств можно устанавливать значения по умолчанию.
Пример
Устанавливаем значение по умолчанию для отсутствующего свойства:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Устанавливаем страну по умолчанию, если её нет
let { firstName, lastName, age, country = "Norway" } = person;
Если вы хотите присвоить извлеченные значения переменным с другими именами, вы можете использовать синтаксис переименования.
Пример
Передаем извлеченное значение переменной с другим именем:
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const { name: fullName, age: years, city: location } = person;
console.log(fullName); // John
console.log(years); // 30
console.log(location); // New York
Если объект содержит вложенные объекты, вы можете использовать вложенную деструктуризацию.
Пример
Извлекаем значения из вложенного объекта:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(name); // John
console.log(city); // New York
console.log(country); // USA
Деструктуризация также может использоваться в параметрах функций.
Пример
Старый способ использования объекта внутри функции:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// старый способ
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}
Новый способ использования объекта внутри функции:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
function myVehicle({type, color, brand, model}) {
const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}
Деструктуризация может быть использована в циклах для обработки массивов объектов.
Пример
const people = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 35 }
];
for (const { name, age } of people) {
console.log(`${name} is ${age} years old.`);
}
Деструктуризация в компонентах React
Особенно полезна деструктуризация в React при работе с пропсами, хуками и ответами API. Она помогает сделать код компактнее и чище.
Деструктуризация пропсов
Компонент, принимающий пропсы, может извлекать нужные значения с помощью деструктуризации.
Сравните два способа - с использованием деструктуризации и без нее:
// Использование деструктуризации:
function Greeting({ name, age }) {
return <h1>Здравствуйте, {name}! Вам {age} лет.</h1>;
}
// Без использования деструктуризации:
function Greeting(props) {
return <h1>Здравствуйте, {props.name}! Вам {props.age} лет.</h1>;
}
Рабочий пример:
Пример
Использование деструктуризации для извлечения пропсов:
import { createRoot } from 'react-dom/client';
function Greeting({ name, age }) {
return <h1>Здравствуйте, {name}! Вам {age} лет.</h1>;
}
createRoot(document.getElementById('root')).render(<Greeting name="Иван" age={30} />);
Деструктуризация хука useState
При использовании хука useState в компоненте React также удобно применять деструктуризацию:
Пример
Использование деструктуризации для извлечения значений из хука useState:
import { createRoot, useState } from 'react-dom/client';
function Counter() {
// Деструктуризация массива, возвращаемого useState
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>Счётчик: {count}</button>
);
}
createRoot(document.getElementById('root')).render(<Counter />);
Таким образом, деструктуризация существенно сокращает объём кода и делает его намного более читаемым и аккуратным.
