Objektien destrukturointi ja spread
Poimi objektien ominaisuuksia destrukturoinnilla, kloonaa ja yhdistä objekteja spread-operaattorilla ja käytä rest-parametreja funktioiden allekirjoituksissa
Objektien destrukturointi ja spread on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä destrukturointi on?
Destrukturoinnilla poimitaan objekteista ja taulukoista arvoja nimettyihin muuttujiin. Se on lyhyt tapa korvata useita ominaisuuksien käyttöä koskevia lausekkeita — koodi tiivistyy ja ilmaisee selkeästi, mitä ominaisuuksia käytetään.
Objektien destrukturoinnin perusteet
Käyttäkää sijoituksen vasemmalla puolella aaltosulkeita nimettyjen ominaisuuksien poimimiseen.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Destrukturoitujen muuttujien uudelleennimeäminen
Käyttäkää syntaksia property: newName ominaisuuden uudelleennimeämiseen destrukturoinnin yhteydessä. Tästä on hyötyä, kun ominaisuuden nimi on ristiriidassa olemassa olevan muuttujan kanssa tai ei ole riittävän kuvaava.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Oletusarvot destrukturoinnissa
Jos ominaisuuden arvo on undefined, käytetään oletusarvoa. Yhdistäkää tähän uudelleennimeäminen.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Sisäkkäisten objektien destrukturointi
Poimikaa sisäkkäisten objektien ominaisuudet antamalla sisäkkäisiä rakenteita.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Taulukoiden destrukturointi
Käyttäkää hakasulkeita taulukoiden destrukturointiin sijainnin perusteella. Ohittakaa alkioita pilkuilla.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Funktioparametrien destrukturointi
Destrukturoikaa suoraan funktioiden parametreissa, jotta rajapinnoista tulee selkeämpiä ja koodista itsensä dokumentoivaa. Tämä on hyvin yleistä React-komponenttien funktioissa.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'Spread-operaattori objekteissa
Spread-operaattori { ...obj } luo objektista pintakopion ja voi yhdistää objekteja. Myöhemmin määritellyt avaimet korvaavat aiemmat, jos avaimet ovat samat.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }Spread-operaattori taulukoissa
[...arr] luo taulukosta pintakopion. Käyttäkää spread-operaattoria taulukoiden yhdistämiseen ja alkioiden lisäämiseen muuttamatta taulukkoa sen alkuun tai loppuun.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Rest-syntaksi destrukturoinnissa
Rest-syntaksi kokoaa jäljelle jäävät ominaisuudet tai alkiot uudeksi objektiksi tai taulukoksi. Rest-rakenteen on oltava viimeinen.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Pinta- ja syväkopiot
Sekä spread että destrukturointi luovat pintakopioita. Sisäkkäiset objektit ja taulukot ovat edelleen jaettuja viittauksia. Luokaa syväklooni käyttämällä structuredClone(obj) (nykyaikainen tapa) tai JSON.parse(JSON.stringify(obj)) (vanha tapa).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Pikatarkistus
Mitä const { a, ...rest } = obj tekee?
Kertaus: destrukturointi ja spread
Objektien destrukturointi poimii nimetyt ominaisuudet. Taulukoiden destrukturointi poimii arvot sijainnin perusteella. Nimeäminen uudelleen tehdään kaksoispisteellä ja oletusarvot =-merkillä. Sisäkkäisiä rakenteita käytetään syvien objektien käsittelyyn. Spread luo pintakopioita ja yhdistää objekteja tai taulukoita. Rest kokoaa jäljelle jäävät ominaisuudet tai alkiot.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Objektien destrukturointi ja spread” ilmainen?
Kyllä – oppitunnin ”Objektien destrukturointi ja spread” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Objektien destrukturointi ja spread”?
Poimi objektien ominaisuuksia destrukturoinnilla, kloonaa ja yhdistä objekteja spread-operaattorilla ja käytä rest-parametreja funktioiden allekirjoituksissa Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Objektien destrukturointi ja spread”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Taulukkometodit: map, filter, reduce ja find
- Objektien destrukturointi ja spread
- Template literalit ja optional chaining
- Moduulit: import ja export