React ES6 Desestructuración
desestructuración
Para ilustrar la desestructuración, haremos un sándwich. ¿Saca todo de la nevera para hacer su sándwich? No, solo saca los artículos que le gustaría usar en su sándwich.
La desestructuración es exactamente lo mismo. Es posible que tengamos una matriz u objeto con el que estemos trabajando, pero solo necesitamos algunos de los elementos contenidos en estos.
La desestructuración facilita extraer solo lo que se necesita.
Destrucción de arreglos
Aquí está la forma antigua de asignar elementos de matriz a una variable:
Antes:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Esta es la nueva forma de asignar elementos de matriz a una variable:
Con desestructuración:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Al desestructurar arreglos, el orden en que se declaran las variables es importante.
Si solo queremos el automóvil y el todoterreno, simplemente podemos omitir el camión pero mantener la coma:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;La desestructuración es útil cuando una función devuelve una matriz:
Ejemplo
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);
¡Obtener la certificación!
$95 INSCRÍBETE
Destrucción de objetos
Aquí está la forma antigua de usar un objeto dentro de una función:
Antes:
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 + '.';
}Aquí está la nueva forma de usar un objeto dentro de una función:
Con desestructuración:
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 + '.';
}
Tenga en cuenta que las propiedades del objeto no tienen que declararse en un orden específico.
Incluso podemos desestructurar objetos profundamente anidados haciendo referencia al objeto anidado y luego usando dos puntos y llaves para desestructurar nuevamente los elementos necesarios del objeto anidado:
Ejemplo
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 + '.';
}