Reageren ES6 Destructuring
destructief
Om de destructie te illustreren, maken we een sandwich. Haal jij alles uit de koelkast om je boterham te maken? Nee, je haalt er alleen de spullen uit die je op je boterham wilt gebruiken.
Destructie is precies hetzelfde. We hebben misschien een array of object waarmee we werken, maar we hebben slechts enkele items nodig die hierin zijn opgenomen.
Destructuring maakt het gemakkelijk om alleen te extraheren wat nodig is.
Arrays vernietigen
Dit is de oude manier om array-items aan een variabele toe te wijzen:
Voordat:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Dit is de nieuwe manier om array-items aan een variabele toe te wijzen:
Met destructie:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Bij het destructureren van arrays is de volgorde waarin variabelen worden gedeclareerd belangrijk.
Als we alleen de auto en suv willen, kunnen we de vrachtwagen gewoon weglaten, maar de komma behouden:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Destructuring is handig wanneer een functie een array retourneert:
Voorbeeld
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);
Gecertificeerd!
$95 INSCHRIJVEN
Objecten vernietigen
Hier is de oude manier om een object in een functie te gebruiken:
Voordat:
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 + '.';
}Dit is de nieuwe manier om een object in een functie te gebruiken:
Met destructie:
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 + '.';
}
Merk op dat de objecteigenschappen niet in een bepaalde volgorde gedeclareerd hoeven te worden.
We kunnen zelfs diep geneste objecten destructureren door te verwijzen naar het geneste object en vervolgens een dubbele punt en accolades gebruiken om de benodigde items van het geneste object opnieuw te destructureren:
Voorbeeld
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 + '.';
}