Reagire ES6 Destrutturazione
Destrutturazione
Per illustrare la destrutturazione, faremo un panino. Tiri fuori tutto dal frigorifero per fare il tuo panino? No, tiri fuori solo gli oggetti che vorresti usare sul tuo panino.
La destrutturazione è esattamente la stessa. Potremmo avere un array o un oggetto con cui stiamo lavorando, ma abbiamo solo bisogno di alcuni degli elementi contenuti in questi.
La destrutturazione rende facile estrarre solo ciò che è necessario.
Array di distruzione
Ecco il vecchio modo di assegnare gli elementi dell'array a una variabile:
Prima:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Ecco il nuovo modo di assegnare gli elementi dell'array a una variabile:
Con destrutturazione:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Quando si destrutturano gli array, l'ordine in cui vengono dichiarate le variabili è importante.
Se vogliamo solo auto e suv possiamo semplicemente lasciare fuori il camion ma mantenere la virgola:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;La destrutturazione è utile quando una funzione restituisce un array:
Esempio
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);
Ottieni la certificazione!
ISCRIVITI A $95
Destrutturazione di oggetti
Ecco il vecchio modo di usare un oggetto all'interno di una funzione:
Prima:
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 + '.';
}Ecco il nuovo modo di utilizzare un oggetto all'interno di una funzione:
Con destrutturazione:
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 + '.';
}
Si noti che le proprietà dell'oggetto non devono essere dichiarate in un ordine specifico.
Possiamo anche destrutturare oggetti profondamente nidificati facendo riferimento all'oggetto nidificato, quindi utilizzando due punti e parentesi graffe per destrutturare nuovamente gli elementi necessari dall'oggetto nidificato:
Esempio
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 + '.';
}