React ES6 Деструктуризація
Деструктуризація
Щоб проілюструвати деструктуризацію, ми зробимо бутерброд. Ви дістаєте все з холодильника, щоб зробити свій сендвіч? Ні, ви виймаєте лише ті продукти, які хотіли б використовувати у своєму сендвічі.
Деструктуризація відбувається точно так само. Ми можемо мати масив або об’єкт, з яким ми працюємо, але нам потрібні лише деякі елементи, які містяться в них.
Деструктурування дозволяє легко витягувати лише те, що потрібно.
Знищення масивів
Ось старий спосіб призначення елементів масиву змінній:
Приклад
Раніше:
const vehicles = ['mustang', 'f-150', 'expedition'];
// старий спосіб
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Ось новий спосіб призначення елементів масиву змінній:
Приклад
З деструктуризацією:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Під час деструктурування масивів важливим є порядок оголошення змінних.
Якщо нам потрібні лише car і suv, ми можемо просто опустити truck, але залишити кому:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Деструктурування стає в нагоді, коли функція повертає масив:
Приклад
function calculate(a, b) {
const add = a + b;
const subtract = a - b;
const multiply = a * b;
const divide = a / b;
return [add, subtract, multiply, divide];
}
const [add, subtract, multiply, divide] = calculate(4, 7);Деструктурування об’єктів
Ось старий спосіб використання об’єкта всередині функції:
Приклад
Раніше:
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 vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
const message = 'My ' + model + ' is registered in ' + state + '.';
}
