Reagieren ES6 Destrukturieren
Destrukturieren
Um die Destrukturierung zu veranschaulichen, machen wir ein Sandwich. Nimmst du alles aus dem Kühlschrank, um dein Sandwich zu machen? Nein, Sie nehmen nur die Artikel heraus, die Sie für Ihr Sandwich verwenden möchten.
Destrukturieren ist genau das gleiche. Wir haben vielleicht ein Array oder Objekt, mit dem wir arbeiten, aber wir brauchen nur einige der darin enthaltenen Elemente.
Die Destrukturierung macht es einfach, nur das zu extrahieren, was benötigt wird.
Arrays zerstören
Hier ist die alte Art, Array-Elemente einer Variablen zuzuweisen:
Vor:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Hier ist die neue Art, Array-Elemente einer Variablen zuzuweisen:
Mit Destrukturierung:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Beim Destrukturieren von Arrays ist die Reihenfolge wichtig, in der Variablen deklariert werden.
Wenn wir nur das Auto und den Geländewagen wollen, können wir den LKW einfach weglassen, aber das Komma beibehalten:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Die Destrukturierung ist praktisch, wenn eine Funktion ein Array zurückgibt:
Beispiel
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);
Zertifiziert werden!
$ 95 REGISTRIEREN
Destrukturieren von Objekten
Hier ist die alte Art, ein Objekt innerhalb einer Funktion zu verwenden:
Vor:
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 ist die neue Art, ein Objekt innerhalb einer Funktion zu verwenden:
Mit Destrukturierung:
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 + '.';
}
Beachten Sie, dass die Objekteigenschaften nicht in einer bestimmten Reihenfolge deklariert werden müssen.
Wir können sogar tief verschachtelte Objekte destrukturieren, indem wir auf das verschachtelte Objekt verweisen und dann einen Doppelpunkt und geschweifte Klammern verwenden, um die benötigten Elemente aus dem verschachtelten Objekt erneut zu destrukturieren:
Beispiel
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 + '.';
}