JavaScript Academy · Oppitunti

Taulukoiden ja objektien destructuring-perusteet

Taulukoiden ja objektien destructuring: perusteet, alkioiden ohittaminen, oletusarvot, uudelleennimeäminen ja yksinkertainen vaihtotemppu

Oppitunti 1/28 vaihetta

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 ja objektien destructuring-perusteet — kuvitus 1

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);
Taulukoiden ja objektien destructuring-perusteet — kuvitus 2

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);
Taulukoiden ja objektien destructuring-perusteet — kuvitus 3

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);
Taulukoiden ja objektien destructuring-perusteet — kuvitus 4

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);
Taulukoiden ja objektien destructuring-perusteet — kuvitus 5

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);
Taulukoiden ja objektien destructuring-perusteet — kuvitus 6

Vaihtosyntaksin tietovisa

Pikatarkistus: Vaihtaminen destrukturoinnilla.

Taulukoiden ja objektien destructuring-perusteet — kuvitus 7

Kertaus

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

Taulukoiden ja objektien destructuring-perusteet — kuvitus 8
Aloita maksutta

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

  1. Taulukoiden ja objektien destructuring-perusteet
  2. Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö
← Takaisin: JavaScript Academy