Taulukoiden ja objektien destructuring-perusteet
Taulukoiden ja objektien destructuring: perusteet, alkioiden ohittaminen, oletusarvot, uudelleennimeäminen ja yksinkertainen vaihtotemppu
Taulukoiden ja objektien destructuring-perusteet on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/2. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 2 oppituntia.
Johdanto
Tavoite: Poimikaa arvoja taulukoista ja olioista selkeästi.
- Taulukoiden destrukturointi
- Ohittaminen ja oletusarvot
- Olioiden destrukturointi
- Uudelleennimeäminen ja vaihtotemppu

Taulukoiden perusteet
Taulukkohahmot vastaavat paikkoja. Ensimmäinen alkio sijoitetaan ensimmäiseen muuttujaan ja niin edelleen.
// Array destructuring: assign by position
const pair = [10, 20];
const [x, y] = pair;
console.log("x:", x);
console.log("y:", y);

Ohittaminen ja oletusarvot
Käyttäkää pilkkuja paikkojen ohittamiseen. Lisätkää = default määrittämättömille tai puuttuville alkioille.
// Skip items with commas and provide defaults
const triple = [5, undefined, 9];
// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;
console.log("first:", first);
console.log("third with default:", third);

Vaihtotemppu
Yhden rivin vaihto poistaa tarpeen väliaikaiselle muuttujalle.
// Swap values with destructuring
let a = "left";
let b = "right";
[a, b] = [b, a];
console.log("a:", a);
console.log("b:", b);

Olioiden perusteet ja uudelleennimeäminen
Oliot kohdistetaan avaimen perusteella. Nimetkää avain uudelleen muodolla key: localName ja lisätkää tarvittaessa = default.
// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };
// Basic
const { name, active } = user;
// Renaming and default
const { level: userLevel = 0 } = user;
console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);

Sisäkkäiset kentät (perusteet)
Sisäkkäisiä kenttiä voi lukea yhdellä kertaa. Pitäkää hahmot pieninä, jotta ne ovat mobiilissa helposti luettavia.
// Nested destructuring (keep it simple)
const config = {
theme: { primary: "blue", contrast: "white" },
flags: { compact: true }
};
const { theme: { primary }, flags: { compact } } = config;
console.log("primary:", primary);
console.log("compact:", compact);

Vaihtosyntaksin tietovisa
Pikatarkistus: Vaihtaminen destrukturoinnilla.

Kertaus
Kertaus: Taulukot destrukturoituvat paikan ja oliot avaimen perusteella. Ohititte alkioita, käytitte oletusarvoja, nimesitte avaimia uudelleen ja vaihdoitte arvoja yhdellä rivillä.

Opi JavaScript 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
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Taulukoiden ja objektien destructuring-perusteet” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Taulukoiden ja objektien destructuring-perusteet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 2 oppituntia.
Mitä opin oppitunnilla ”Taulukoiden ja objektien destructuring-perusteet”?
Taulukoiden ja objektien destructuring: perusteet, alkioiden ohittaminen, oletusarvot, uudelleennimeäminen ja yksinkertainen vaihtotemppu Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/2.
Kuinka kauan ”Taulukoiden ja objektien destructuring-perusteet”-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ä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript 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
- Taulukoiden ja objektien destructuring-perusteet
- Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö