JavaScript Academy · Oppitunti

Muuttumattomat päivitysmallit

Päivittäkää dataa luomalla uusia kopioita.

Oppitunti 3/413 vaihetta

Muuttumattomat päivitysmallit on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. 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ä 4 oppituntia.

Päivittäminen ilman muuttamista

Muuttumattomat päivitykset luovat uuden kopion, johon muutos on tehty, ja jättävät alkuperäisen koskemattomaksi. Tämä on ennustettavan tilanhallinnan perusta nykyaikaisessa JavaScriptissä.

Spread-operaattori ... on tärkein työkalu.

Olion kopioiminen spread-operaattorilla

Levittäkää olion sisältö uuteen olioon spread-operaattorilla ja korvatkaa sitten ominaisuus. Alkuperäisen olion arvo säilyy ennallaan.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Kyseessä ovat eri oliot

Kopio on kokonaan uusi olio, ei sama viite. Identiteettivertailu vahvistaa tämän.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Ominaisuuden lisääminen muuttumattomasti

Lisätkää kenttä levittämällä vanha olio uuteen ja sisällyttämällä uusi avain. Alkuperäiseen olioon ei lisätä mitään.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Ominaisuuden poistaminen muuttumattomasti

Poimikaa ei-toivottu avain destrukturoinnilla ja ottakaa muu sisältö talteen. Muu sisältö sisältävä olio ei sisällä poistettua avainta.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Taulukoiden kopioiminen spread-operaattorilla

Kopioikaa taulukko levittämällä sen sisältö uuteen taulukkoon. Myös map- ja filter-metodit palauttavat uusia taulukoita eivätkä koskaan muuta lähdetaulukkoa.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Alkion lisääminen taulukkoon muuttumattomasti

Sen sijaan, että käyttäisitte push-metodia, joka muuttaa taulukkoa, muodostakaa uusi taulukko spread-operaattorilla. Alkuperäisen taulukon pituus säilyy samana.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Alkion poistaminen taulukosta muuttumattomasti

Tuottakaa filter-metodilla uusi taulukko ilman ei-toivottua alkiota ja jättäkää alkuperäinen taulukko ennalleen.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Sisäkkäisten olioiden päivittäminen

Sisäkkäiset päivitykset edellyttävät spread-operaattorin käyttöä jokaisella muutettavalla tasolla. Vain käsitelty haara luodaan uudelleen; muu osa jaetaan viitteenä.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Taulukon alkion päivittäminen

Palauttakaa map-metodilla muuttunut kopio vastaavasta alkiosta ja alkuperäinen alkio muista kohdista. Yhtäkään alkiota ei muuteta.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Miksi muuttumattomilla päivityksillä on väliä

Jaetun tilan muuttamatta jättäminen tekee muutosten tunnistamisesta edullista viitteitä vertaamalla, mahdollistaa kumoamisen ja uudelleen tekemisen sekä estää vaikutusten leviämisestä aiheutuvia virheitä. Malli on seuraava: kopioikaa ja muuttakaa sitten kopiota. Syväkloonausta käsitellään seuraavalla oppitunnilla structuredClone-metodin avulla.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Pikatarkistus

Mitä { ...user, age: 37 } tuottaa, kun user-oliolla on jo age-ominaisuus?

Vastaa interaktiivisessa oppitunnissa

Kertaus: muuttumattomat päivitysmallit

Opitte päivittämään dataa muuttamatta sitä:

Kopioikaa ja korvatkaa spread-operaatiolla { ...obj, key: value }.
Poistakaa ominaisuus muuttumattomasti destrukturoimalla muu sisältö rest-syntaksilla.
Käyttäkää map-, filter- ja taulukon spread-operaatiota push- ja splice-metodien sijaan.
Käyttäkää spread-operaatiota jokaisella tasolla sisäkkäisiä päivityksiä varten ja jakakaa muu osa viitteenä.

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Muuttumattomat päivitysmallit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Muuttumattomat päivitysmallit”. 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ä 4 oppituntia.

Mitä opin oppitunnilla ”Muuttumattomat päivitysmallit”?

Päivittäkää dataa luomalla uusia kopioita. 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 3/4.

Kuinka kauan ”Muuttumattomat päivitysmallit”-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

← Takaisin: JavaScript Academy