Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö
Kerää loput arvot ja ominaisuudet, kloonaa ja yhdistä spread-syntaksilla sekä vältä piilomutaatioita yksinkertaisilla malleilla
Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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: Käyttäkää rest-syntaksia ylimääräisten arvojen keräämiseen ja spread-syntaksia kopiointiin tai yhdistämiseen.
- Taulukon ja olion spread
- Taulukon rest (alku/loppu)
- Olion rest (joidenkin avainten poissulkeminen)
- Muuttaminen ja kopiointi
Taulukon spreadin perusteet
[...arr] kopioi taulukon; yhdistäkää taulukoita levittämällä ne uuteen taulukkoon.
// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];
const clone = [...a];
const merged = [...a, ...b];
console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Taulukon rest-hahmo
Rest-elementti (…tail) kokoaa jäljelle jäävät alkiot uudeksi taulukoksi.
// Array rest collects the remaining items
const nums = [10, 20, 30, 40];
const [head, ...tail] = nums;
console.log("head:", head);
console.log("tail:", tail);
Olion spreadin perusteet
Olioiden yhdistämisessä järjestyksellä on merkitystä: myöhemmät spreadit korvaavat aiemmat avaimet.
// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };
const copy = { ...base };
const merged = { ...base, ...override };
console.log("copy:", copy);
console.log("merged:", merged);
Olion rest-hahmo
Käyttäkää { a, ...rest }-rakennetta poimiaksenne muutaman ominaisuuden ja kootaksenne loput yhteen.
// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };
const { id, ...publicInfo } = user;
console.log("id:", id);
console.log("publicInfo:", publicInfo);
Mutaation välttäminen kopioimalla
Luokaa uusi olio arvoja muuttaessanne; se on selkeämpää ja turvallisempaa kuin jaetun datan muuttaminen.
// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };
// Mutating version (avoid in shared state)
// settings.volume = 6;
// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };
console.log("settings:", settings);
console.log("updated:", updated);
Olion rest-tietovisa
Pikatarkistus: Olion rest.
Kertaus
Kertaus: Spread kopioi ja yhdistää taulukoita ja olioita, kun taas rest kokoaa jäljelle jäävät arvot. Suosikaa kopiointia mutaation sijaan, jotta muutokset pysyvät selkeinä.
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 ”Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö”. 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 ”Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö”?
Kerää loput arvot ja ominaisuudet, kloonaa ja yhdistä spread-syntaksilla sekä vältä piilomutaatioita yksinkertaisilla malleilla 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 2/2.
Kuinka kauan ”Rest ja spread — taulukoiden ja objektien idiomaattinen käyttö”-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ö