Destrukcja React ES6
Destrukturyzacja
Aby zilustrować destrukturyzację, zrobimy kanapkę. Czy wyjmujesz wszystko z lodówki, żeby zrobić kanapkę? Nie, wyjmujesz tylko te przedmioty, które chciałbyś wykorzystać na swojej kanapce.
Destrukturyzacja jest dokładnie taka sama. Możemy mieć tablicę lub obiekt, z którym pracujemy, ale potrzebujemy tylko niektórych elementów w nich zawartych.
Destrukturyzacja ułatwia wyodrębnienie tylko tego, co jest potrzebne.
Niszczenie tablic
Oto stary sposób przypisywania elementów tablicy do zmiennej:
Zanim:
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];Oto nowy sposób przypisywania elementów tablicy do zmiennej:
Z destrukturyzacją:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;Podczas destrukturyzacji tablic ważna jest kolejność deklarowania zmiennych.
Jeśli chcemy tylko samochód i suv, możemy po prostu pominąć ciężarówkę, ale zachować przecinek:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Destrukturyzacja przydaje się, gdy funkcja zwraca tablicę:
Przykład
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);
Zostać certyfikowanym!
95 $ ZAPISZ
Destrukturyzacja obiektów
Oto stary sposób używania obiektu wewnątrz funkcji:
Zanim:
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 + '.';
}Oto nowy sposób używania obiektu wewnątrz funkcji:
Z destrukturyzacją:
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 + '.';
}
Zauważ, że właściwości obiektu nie muszą być deklarowane w określonej kolejności.
Możemy nawet zdestrukturyzować głęboko zagnieżdżone obiekty, odwołując się do zagnieżdżonego obiektu, a następnie używając dwukropka i nawiasów klamrowych, aby ponownie zdestrukturyzować potrzebne elementy z zagnieżdżonego obiektu:
Przykład
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 + '.';
}