React ES6 Déstructuration
Déstructuration
Pour illustrer la déstructuration, nous allons faire un sandwich. Vous sortez tout du réfrigérateur pour faire votre sandwich ? Non, vous ne sortez que les éléments que vous souhaitez utiliser sur votre sandwich.
La déstructuration est exactement la même. Nous pouvons avoir un tableau ou un objet avec lequel nous travaillons, mais nous n'avons besoin que de certains des éléments qu'ils contiennent.
La déstructuration permet d'extraire facilement uniquement ce qui est nécessaire.
Destruction de tableaux
Voici l'ancienne façon d'affecter des éléments de tableau à une variable :
Avant de:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Voici la nouvelle façon d'assigner des éléments de tableau à une variable :
Avec déstructuration :
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Lors de la déstructuration de tableaux, l'ordre dans lequel les variables sont déclarées est important.
Si nous ne voulons que la voiture et le suv, nous pouvons simplement omettre le camion mais garder la virgule :
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;La déstructuration est pratique lorsqu'une fonction renvoie un tableau :
Exemple
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);
Obtenir une certification!
95 $ S'INSCRIRE
Déstructuration d'objets
Voici l'ancienne façon d'utiliser un objet dans une fonction :
Avant 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 + '.';
}Voici la nouvelle façon d'utiliser un objet à l'intérieur d'une fonction :
Avec déstructuration :
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 + '.';
}
Notez que les propriétés de l'objet n'ont pas besoin d'être déclarées dans un ordre spécifique.
Nous pouvons même déstructurer des objets profondément imbriqués en référençant l'objet imbriqué puis en utilisant deux points et des accolades pour déstructurer à nouveau les éléments nécessaires de l'objet imbriqué :
Exemple
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 + '.';
}