JavaScript Academy · Oppitunti

JSON.parse- ja JSON.stringify-perusteet

Muunna objektit JSON-merkkijonoiksi ja takaisin; tutustu lyhyesti replaceriin ja reviveriin; käsittele virheelliset syötteet turvallisesti

Oppitunti 1/38 vaihetta

JSON.parse- ja JSON.stringify-perusteet on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. 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ä 3 oppituntia.

Miksi JSON?

Tavoite: Sarjallistakaa ja jäsentäkää turvallisesti.

  • JSON.stringify → merkkijono
  • JSON.parse ← merkkijono
  • replacer/reviver (esimerkki)
  • Perusvinkit turvallisuuteen
JSON.parse- ja JSON.stringify-perusteet — kuvitus 1

stringify()

Käyttäkää JSON.stringify(value)-funktiota JSON-merkkijonon muodostamiseen. Luettavuutta varten antakaa space-parametrille luku, esimerkiksi 2.

// Turn a value into a JSON string
const user = { name: "Ayla", score: 12, active: true };
const json = JSON.stringify(user);
console.log("json:", json);

// Optional: pretty-print with spaces (2)
const pretty = JSON.stringify(user, null, 2);
console.log("pretty:", pretty);
JSON.parse- ja JSON.stringify-perusteet — kuvitus 2

parse()

JSON.parse(text) palauttaa arvon. Syötteen on oltava kelvollinen JSON-merkkijono.

// Parse a JSON string back to a value
const raw = "{\"name\":\"Ayla\",\"score\":12,\"active\":true}";
const value = JSON.parse(raw);
console.log("name:", value.name, "score:", value.score);
JSON.parse- ja JSON.stringify-perusteet — kuvitus 3

Replacer (stringify)

replacer(key, value) voi jättää kenttiä pois tai muokata niitä sarjallistamisen aikana, esimerkiksi piilottaa salasanat.

// Replacer: filter or transform keys during stringify
const account = { id: 7, password: "secret", role: "user" };

// Hide sensitive fields
function replacer(key, value) {
  if (key === "password") return undefined; // drop it
  return value;
}

const safeJson = JSON.stringify(account, replacer, 2);
console.log("safeJson:", safeJson);
JSON.parse- ja JSON.stringify-perusteet — kuvitus 4

Reviver (parse)

reviver(key, value) voi muuntaa arvoja jäsentämisen aikana, esimerkiksi merkkijonoja → Date-olioiksi.

// Reviver: convert specific strings back into richer types
const orderJson = "{\"when\":\"2024-06-01T10:00:00Z\",\"total\":25}";

function reviver(key, value) {
  if (key === "when" && typeof value === "string") {
    return new Date(value); // restore Date
  }
  return value;
}

const order = JSON.parse(orderJson, reviver);
console.log("is Date?", order.when instanceof Date);
console.log("total:", order.total);
JSON.parse- ja JSON.stringify-perusteet — kuvitus 5

Turvallisuus ja rajoitukset

Vinkit:

  • Ympäröikää JSON.parse try/catch-rakenteella, kun syöte ei ole luotettua.
  • Käyttäkää replaceria arkaluontoisten kenttien poistamiseen ennen kirjaamista tai jakamista.
  • JSON ei säilytä funktioita eikä prototyyppitietoja, vaan sarjallistaa vain dataa.
JSON.parse- ja JSON.stringify-perusteet — kuvitus 6

stringify vai parse -koe

Pikatarkistus: Arvon sarjallistaminen.

JSON.parse- ja JSON.stringify-perusteet — kuvitus 7

Kertaus

Kertaus: Muuntakaa arvot JSON.stringify- ja JSON.parse-funktioilla. Käyttäkää replacer-funktiota kenttien suodattamiseen ja reviver-funktiota Date-tyyppisten tyyppien palauttamiseen. Lisätkää turvallisuuden vuoksi try/catch-rakenne.

JSON.parse- ja JSON.stringify-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 ”JSON.parse- ja JSON.stringify-perusteet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “JSON.parse- ja JSON.stringify-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ä 3 oppituntia.

Mitä opin oppitunnilla ”JSON.parse- ja JSON.stringify-perusteet”?

Muunna objektit JSON-merkkijonoiksi ja takaisin; tutustu lyhyesti replaceriin ja reviveriin; käsittele virheelliset syötteet turvallisesti 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/3.

Kuinka kauan ”JSON.parse- ja JSON.stringify-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. JSON.parse- ja JSON.stringify-perusteet
  2. Rakenteinen kloonaus ja URLSearchParams
  3. Turvallisen JSON-jäsentämisen strategiat
← Takaisin: JavaScript Academy