Reageer ES6 Destrukturering
Destrukturering
Om vernietiging te illustreer, maak ons 'n toebroodjie. Haal jy alles uit die yskas om jou toebroodjie te maak? Nee, jy haal net die items uit wat jy graag op jou toebroodjie wil gebruik.
Destrukturering is presies dieselfde. Ons het dalk 'n skikking of voorwerp waarmee ons werk, maar ons benodig net sommige van die items wat hierin vervat is.
Destrukturering maak dit maklik om net te onttrek wat nodig is.
Vernietig Skikkings
Hier is die ou manier om skikking-items aan 'n veranderlike toe te ken:
Voor:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Hier is die nuwe manier om skikking-items aan 'n veranderlike toe te ken:
Met vernietiging:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Wanneer skikkings gedestruktureer word, is die volgorde waarin veranderlikes verklaar word belangrik.
As ons net die kar en motorvoertuig wil hê, kan ons eenvoudig die vragmotor uitlaat, maar die komma hou:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Destrukturering kom handig te pas wanneer 'n funksie 'n skikking terugstuur:
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);
Word gesertifiseer!
$95 INSKRIF
Destrukturering van voorwerpe
Hier is die ou manier om 'n voorwerp binne 'n funksie te gebruik:
Voor:
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 + '.';
}Hier is die nuwe manier om 'n voorwerp binne 'n funksie te gebruik:
Met vernietiging:
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 + '.';
}
Let daarop dat die voorwerpeienskappe nie in 'n spesifieke volgorde verklaar hoef te word nie.
Ons kan selfs diep geneste voorwerpe destruktureer deur na die geneste voorwerp te verwys en dan 'n dubbelpunt en krulhakies te gebruik om weer die items wat nodig is vanaf die geneste voorwerp te destruktureer:
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 + '.';
}