Reagir ES6 Desestruturando
Desestruturando
Para ilustrar a desestruturação, faremos um sanduíche. Você tira tudo da geladeira para fazer seu sanduíche? Não, você só retira os itens que gostaria de usar no seu sanduíche.
A desestruturação é exatamente a mesma coisa. Podemos ter um array ou objeto com o qual estamos trabalhando, mas precisamos apenas de alguns dos itens contidos neles.
A desestruturação facilita a extração apenas do que é necessário.
Destruindo Matrizes
Aqui está a maneira antiga de atribuir itens de matriz a uma variável:
Antes de:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Aqui está a nova maneira de atribuir itens de matriz a uma variável:
Com desestruturação:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Ao desestruturar arrays, a ordem em que as variáveis são declaradas é importante.
Se quisermos apenas o carro e o suv, podemos simplesmente deixar o caminhão de fora, mas manter a vírgula:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;A desestruturação é útil quando uma função retorna uma matriz:
Exemplo
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);
Obter certificação!
$ 95 INSCRIÇÃO
Desestruturando Objetos
Aqui está a maneira antiga de usar um objeto dentro de uma função:
Antes de:
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 + '.';
}Aqui está a nova maneira de usar um objeto dentro de uma função:
Com desestruturação:
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 + '.';
}
Observe que as propriedades do objeto não precisam ser declaradas em uma ordem específica.
Podemos até desestruturar objetos profundamente aninhados referenciando o objeto aninhado e usando dois pontos e chaves para desestruturar novamente os itens necessários do objeto aninhado:
Exemplo
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 + '.';
}