Reagovat ES6 Destructuring
Ničení
Pro ilustraci ničení si uděláme sendvič. Vytahujete všechno z lednice, abyste si udělali sendvič? Ne, vyjmete pouze položky, které byste chtěli použít na svém sendviči.
Destrukce je úplně stejná. Můžeme mít pole nebo objekt, se kterým pracujeme, ale potřebujeme pouze některé položky v nich obsažené.
Destrukcí je snadné extrahovat pouze to, co je potřeba.
Ničení polí
Zde je starý způsob přiřazování položek pole k proměnné:
Před:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Zde je nový způsob přiřazování položek pole k proměnné:
S destrukcí:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Při destrukci polí je důležité pořadí, ve kterém jsou proměnné deklarovány.
Pokud chceme jen auto a suv, můžeme náklaďák jednoduše vynechat, ale čárku si necháme:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Destrukce se hodí, když funkce vrátí pole:
Příklad
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);
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Ničení objektů
Zde je starý způsob použití objektu uvnitř funkce:
Před:
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red'
}
myVehicle(vehicleOne);
// old way
function myVehicle(vehicle) {
const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}Zde je nový způsob použití objektu uvnitř funkce:
S destrukcí:
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 + '.';
}
Všimněte si, že vlastnosti objektu nemusí být deklarovány v určitém pořadí.
Můžeme dokonce destruovat hluboce vnořené objekty odkazem na vnořený objekt a poté pomocí dvojtečky a složených závorek znovu destruovat položky potřebné z vnořeného objektu:
Příklad
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 + '.';
}