Destrukturyzacja
Dane z obiektów możemy wyciągać tak jak to robiliśmy do tej pory, czyli korzystając ze składni kropki lub kwadratowych nawiasów. Możemy też skorzystać z tak zwanego przypisania destrukturyzującego, czy też destrukturyzacji, która skraca zapis.
const tab = ["Ala", "Ola", "Ela"];
//pobieram wartości klasycznie
const name1 = tab[0];
const name2 = tab[1];
//za pomocą destrukturyzacji
const [name1, name2] = tab;
const ob = {
name : "Rudzik",
pet : "kot"
}
//klasycznie
const name = ob.name;
const pet = ob["pet"];
//za pomocą destrukturyzacji
const {name, pet} = ob;
Destrukturyzacja tablic
Aby stworzyć nowe zmienne na bazie danych z tablicy możemy skorzystać z zapisu:
const tab = ["Ala", "Ola", "Ela", "Fela"];
const [a, b] = tab;
console.log(a, b) //"Ala", "Ola"
Jeżeli chcielibyśmy z tablicy wyciągnąć wartości, ale z pominięciem kolejnej, wtedy po prostu jej nie podajemy:
const tab = ["Ala", "Ola", "Ela", "Fela"];
const [name1, name2, , name4] = tab;
console.log(name1, name2, name4); //"Ala", "Ola", "Fela"
Podczas tworzenia zmiennych, możemy im też ustawić domyślną wartość, która zostanie użyta, jeżeli w tablicy nie będzie wartości na danym indeksie:
const tab = ["Ala", "Ola"];
const [ name1 = "brak", name2 = "brak", name3 = "brak" ] = tab;
console.log(name1, name2, name3); //"Ala", "Ola", "brak"
Przypisanie takie możemy też zastosować przy zamianie miejscami wartości zmiennych:
let a = 1;
let b = 5;
[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 1
Destrukturyzacja obiektów
Przypuśćmy, że mamy obiekt:
const obj = {
first_name : "Karol",
last_name : "Kowalski",
age : 10
}
Jeżeli teraz chciałbym, z tego obiektu wyciągnąć dane i podstawić je pod zmienne mógłbym to zrobić w klasyczny sposób:
const obj = {
first_name : "Karol",
last_name : "Kowalski",
age : 10
}
const name = obj.first_name;
const surname = obj.last_name;
const age = obj.age;
Ale i korzystając z destrukturyzacji:
const obj = {
first_name : "Karol",
last_name : "Kowalski",
age : 10
}
const {
first_name,
last_name,
age
} = obj;
Tak samo jak w przypadku tablic, zmiennym możemy ustawić domyślną wartość:
const obj = {
first_name : "Karol",
last_name : "Kowalski"
}
const {
first_name = "brak",
last_name = "brak",
favoritePet = "kot"
} = obj;
console.log(first_name); //Karol
console.log(last_name); //Kowalski
console.log(favoritePet); //"kot"
Gdybyś chciał stworzyć zmienne o nowych nazwach, musisz użyć znaku dwukropka:
const obj = {
first_name : "Karol",
last_name : "Kowalski",
}
const {
first_name : name = "brak",
last_name : surname = "brak",
favoritePet : pet = "brak"
} = obj;
console.log(name); //Karol
console.log(surname); //Kowalski
console.log(pet); //"brak"
Destrukturyzacja w iteracji
Destrukturyzacja idealnie sprawdza się w przypadku iterowania po danych:
.fetch(.....)
.then(result => result.json())
.then(result => {
//działamy na pobranych użytkownikach
for (const el of result.users) {
const {
name = "",
surname = "",
email = "",
plan = "basic"
role = "user",
www = ""
} = el;
console.log(surname, name, email, plan, role, www);
}
});
Destrukturyzacja i parametry funkcji
Bardzo przydatnym manewrem jest zastosowanie destrukturyzacji w przypadku parametrów funkcji.
Wszędzie tam, gdzie ktoś (w tym silnik Javascript) przekaże ci jakiś obiekt czy tablicę, możesz używać desktruturyzacji do wyciągania danych z jego wnętrza.
Zamiast więc działać bezpośrednio na danej zmiennej:
const buttons = document.querySelectorAll("button");
//zamiast
buttons.forEach(el => {
console.log(`Tekst elementu to ${el.innerText} a jego id to ${el.id}`);
})
Mogę wyciągnąć odpowiednie dane:
const buttons = document.querySelectorAll("button");
buttons.forEach(({innerText : text, id}) => {
console.log(`Tekst elementu to ${text} a jego id to ${id}`);
});
Podobnie będzie miało to miejsce w przypadku przekazywania wartości do funkcji:
Zamiast:
function showUser(ob) {
console.log(ob.name);
console.log(ob.surname)
}
const user = {
name : "Marcin",
surname : "Nowak"
}
showUser(user)
mogę:
function showUser({name, surname}) {
console.log(name);
console.log(surname)
}
const user = {
name : "Marcin",
surname : "Nowak"
}
showUser(user);
Szczególnie ten ostatni przypadek ma bardzo duże znaczenie przy bardziej rozbudowanych aplikacjach.
W obiektach kolejność kluczy nie ma znaczenia, dzięki czemu mogę przekazywać do funkcji dane nie zważając na kolejność danych:
//klasyczna funkcja z kilkoma parametrami
function print(name, speed, color, food) {
console.log(`
Name : ${name}
Speed : ${speed}
Color : ${color}
Food : ${food}
`);
}
//mam kilka zmiennych, które chcę do niej przekazać
const name = "Szamson";
const speed = 10000;
const color = "brown";
const food = "mięso";
const type = "dog";
//w przypadku zwykłych parametrów muszę pamiętać ich kolejność
//nie jest to jakimś super problemem, bo dobry edytor mi je podpowie
print(name, speed, color, food);
Zamiast pamiętania kolejności, mogę skróconym zapisem stworzyć obiekt i przekazać go do funkcji:
//do poniższej funkcji ktoś mi przekaże obiekt, a ja go od razu rozbiję na odpowiednie zmienne
function print({name, speed, color, food}) {
console.log(`
Nazwa : ${name}
Szybkość : ${speed}
Kolor : ${color}
Ulubione jedzenie : ${food}
`);
}
print({
name : "Szamson",
speed : 10000,
food : "Mięso",
color : "brown",
})
//lub jeżeli mam już wcześniej zmienne
//mogę stworzyć obiekt z takimi kluczami:
const name = "Szamson";
const speed = 10000;
const color = "brown";
const food = "mięso";
const type = "dog";
//kolejność nie ma znaczenia
print({name, food, speed, type, color}); //dodatkowy klucz type nie ma znaczenia
//bo to jest to samo co:
print({
name : name,
food : food,
speed : speed,
type : type,
color : color
});
Co więcej mogę to połączyć z domyślnymi wartościami dla wyciąganych kluczy z obiektu, dzięki czemu odpalając funkcję nie będę musiał przekazywać wszystkich wartości:
function print({name, speed = 100, color = "red", food = "mięso", height = 140}) {
}
print({
name : "Karol",
height : 200
})
Destrukturyzacja i rest
Stosując przypisanie destrukturyzacji możemy też użyć operatora rest, co pozwala nam wybierać resztę zmiennych:
const tab = [1, 2, 3, 4, 5];
const [first, ...other] = tab;
console.log(first, other); //1, [2, 3, 4, 5]
Podobny zabieg możemy też stosować dla obiektów, co przydaje się gdy chcemy pomijać jakieś właściwości:
const ob = {
name : "Piotrek",
age : 20,
surname : "Nowak",
pet : "pies"
}
const {pet, ...obWithoutPet} = ob;
console.log(pet); //"pies"
console.log(obWithoutPet); //obiekt bez właściwości pet
const carData = {
brand : "BMW",
color: "red",
maxSpeed : 260,
owner: "Jan Nowak",
ownerAge : 30
}
const {owner, ownerAge, ...car} = carData;
console.log(car); //car bez właściwości owner i ownerAge
lub kopiować płaskie obiekty:
const pet = {
name : "Szamson",
speed : 1000,
}
const pet2 = {...pet}
pet2.height = 40;
console.log(pet); //{name : "Szamson", speed : 1000}
console.log(pet2); //{name : "Szamson", speed : 1000, height: 40}
Podejście to będziemy stosować w kilku projektach np. tutaj lub tutaj.
Bardziej skomplikowana struktura
Jeżeli za pomocą destrukturyzacji chcemy wyciągać zagnieżdżone dane, wtedy w naszym wzorze powinniśmy odwzorować wygląd struktury obiektu:
const myObj = {
first_name : "Karol",
last_name : "Nowak",
role : "driver",
pets: ["pies", "kot"],
car : {
name : "Honda",
year: 2002,
type : "hatchback"
}
}
const {
first_name: name,
last_name : surname,
role,
pets : [
pet1,
pet2
],
car : {
name : carName,
year : carYear,
type : carType
}
} = myObj || {}
Zauważ, że nasz wzorzec postawiłem pod myObj lub pusty obiekt. Dzięki temu zabezpieczam się na wypadek, gdyby nie było myObj w ogóle.