Ang klase na `JSON` sa JavaScript

Ipinaliwanag ng artikulong ito ang klase na JSON sa JavaScript.

Ipapaliwanag namin ang klase na JSON sa JavaScript gamit ang mga praktikal na halimbawa.

YouTube Video

Ang klase na JSON sa JavaScript

Ang JSON na object ay pangunahing may dalawang pamamaraan. Ang JSON.stringify() ay nagko-convert ng isang object sa JSON string, at ang JSON.parse() ay gumagawa ng object mula sa isang JSON string. Ang JSON ay isang format para sa pagpapalitan ng datos na kayang magpahayag lamang ng ilang JavaScript na halaga. Ang mga function, undefined, Symbol, at mga circular reference ay hindi maaaring diretso'ng i-convert sa JSON.

JSON.stringify()

Una, narito ang isang pangunahing halimbawa ng pagko-convert ng object papuntang JSON string.

1// Convert a JavaScript object to a JSON string.
2const obj = { name: "Alice", age: 30, active: true };
3const jsonString = JSON.stringify(obj);
4console.log(jsonString); // {"name":"Alice","age":30,"active":true}

• Ang code na ito ay pinakapayak na halimbawa ng pagko-convert ng isang ordinaryong object papuntang JSON string. Ang JSON.stringify ay agad na nagbabalik ng string.

Ang pangalawang argumento ng JSON.stringify (replacer)

Sa pagtukoy sa replacer bilang pangalawang argumento ng JSON.stringify, maaari mong idetalye ang mga tuntunin ng conversion. Narito ang isang halimbawa kung paano gumamit ng array upang panatilihin lamang ang mga partikular na katangian.

1// Use a replacer array to include only specific properties during stringification.
2const user = { id: 1, name: "Bob", password: "secret", role: "admin" };
3const safeJson = JSON.stringify(user, ["id", "name", "role"]);
4console.log(safeJson); // {"id":1,"name":"Bob","role":"admin"}

• Sa halimbawang ito, hindi isinama ang password upang maging ligtas ang log output. Magagamit ito kung nais mong alisin ang sensitibong impormasyon para sa seguridad.

Paggamit sa replacer bilang isang function (para sa conversion at pagsala ng halaga)

Kung nais mo ng higit na kakayahang umangkop, maaari kang magbigay ng function para iproseso ang bawat susi at halaga. Narito ang isang halimbawa ng pagpapanatili ng Date bilang ISO string.

 1// Use a replacer function to customize serialization.
 2const data = { name: "Carol", joined: new Date("2020-01-01T12:00:00Z") };
 3const jsonCustom = JSON.stringify(data, (key, value) => {
 4  // Convert Date objects to ISO strings explicitly
 5  if (this && this[key] instanceof Date) {
 6    return this[key].toISOString();
 7  }
 8  return value;
 9});
10console.log(jsonCustom); // {"name":"Carol","joined":"2020-01-01T12:00:00.000Z"}

• Sa function-type na replacer, ipinapasa ang key at value at ang ibinalik na halaga ang ginagamit sa huling JSON. Ang this ay tumutukoy sa parent na object, kaya maaari ring gamitin ito sa nested na conversion.

Ang mga pangunahing kaalaman sa JSON.parse()

Ang JSON.parse ay nagbabalik ng JSON string pabalik sa isang object. Balutin ito ng try/catch para mapangasiwaan ang hindi wastong JSON.

1// Parse a JSON string into an object and handle parsing errors.
2const jsonText = '{"title":"Example","count":42}';
3try {
4  const parsed = JSON.parse(jsonText);
5  console.log(parsed.title); // Example
6} catch (err) {
7  console.error("Invalid JSON:", err.message);
8}

• Kung hindi wasto ang string, magtatapon ito ng exception, kaya laging isama ang exception handling kapag nakikisalamuha sa panlabas na pinagkukunan.

Pasadyang pag-restore gamit ang reviver (halimbawa ng pagpapanumbalik ng Date)

Sa paggamit ng pangalawang argumento na reviver sa JSON.parse, maari kang gumawa ng pagpapanumbalik ng halaga. Narito ang halimbawa ng pagko-convert ng naitalang string na petsa pabalik sa Date object.

 1// Use a reviver to turn ISO date strings back into Date objects.
 2const jsonWithDate = '{"name":"Dana","joined":"2021-06-15T09:00:00.000Z"}';
 3const obj = JSON.parse(jsonWithDate, (key, value) => {
 4  // A simple check for ISO date-like strings
 5  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)) {
 6    return new Date(value);
 7  }
 8  return value;
 9});
10console.log(obj.joined instanceof Date); // true

• Ang reviver ay tinatawag para sa bawat susi, at ang ibinabalik na halaga ay gagamitin sa huling object. Mangyaring magsagawa ng mahigpit na pag-check sa petsa batay sa iyong aplikasyon.

Pretty-printing at ang argumentong space

Para mag-output na may indentation para sa madaling pagbabasa, ilagay ang isang numero o string bilang pangatlong argumento sa JSON.stringify.

1// Pretty-print an object with 2-space indentation for readability.
2const config = { host: "localhost", port: 3000, debug: true };
3const pretty = JSON.stringify(config, null, 2);
4console.log(pretty);
5/* {
6  "host": "localhost",
7  "port": 3000,
8  "debug": true
9} */

• Para sa JSON na para sa mga tao tulad ng logs o configuration file outputs, maganda na tukuyin ang indentation. Pero tandaan na pinapalaki nito ang laki ng file.

Paano hawakan ang circular references

Ang JSON.stringify ay nagtatapon ng TypeError kung mayroong circular reference. Isang karaniwang solusyon ay gumawa ng replacer gamit ang seen set upang maiwasan ang circular references.

 1// Safely stringify objects that may contain circular references.
 2function safeStringify(value) {
 3  const seen = new WeakSet();
 4  return JSON.stringify(value, (key, val) => {
 5    if (val && typeof val === "object") {
 6      if (seen.has(val)) return "[Circular]";
 7      seen.add(val);
 8    }
 9    return val;
10  });
11}
12
13const a = { name: "A" };
14a.self = a;
15console.log(safeStringify(a)); // {"name":"A","self":"[Circular]"}

• Sa paggamit ng WeakSet, maaari mong matagpuan ang circular references habang iniiwasan ang memory leaks. Kapag may circular reference, ibinabalik nito ang "[Circular]". Maaari ring magtalaga ng reference ID imbis na "[Circular]".

Pasadyang serialization gamit ang toJSON na pamamaraan

Kapag nagtakda ka ng toJSON sa isang object, ginagamit ng JSON.stringify ang ibinabalik nitong halaga. Mahalaga ito kung nais mong isama ang mga panuntunan sa conversion para sa bawat uri.

 1// Define toJSON on a class to customize its JSON representation.
 2class Point {
 3  constructor(x, y) {
 4    this.x = x;
 5    this.y = y;
 6  }
 7  toJSON() {
 8    // This will be used by JSON.stringify
 9    return { x: this.x, y: this.y, type: "Point" };
10  }
11}
12
13const p = new Point(10, 20);
14console.log(JSON.stringify(p)); // {"x":10,"y":20,"type":"Point"}

• Sa toJSON, maaari kang magtakda ng serialization rules sa mismong antas ng object, kaya mas lokal at madaling maunawaan kaysa sa paggamit ng replacer.

Mga limitasyon at paalala sa paggamit ng JSON

Ang mga hindi maaaring i-convert sa JSON ay undefined, functions, Symbol, BigInt, at circular references. Bigyang pansin din ang numerical precision (tulad ng malalaking integer at pagreround ng IEEE floating-point).

 1// Demonstrate values that can't be represented in JSON.
 2const sample = {
 3  a: undefined,
 4  b: function () {},
 5  c: Symbol("s"),
 6  d: 9007199254740993n // BigInt (note: JSON.stringify will throw on BigInt)
 7};
 8// JSON.stringify will throw for BigInt and will drop undefined, functions, symbols in objects.
 9try {
10  console.log(JSON.stringify(sample));
11} catch (err) {
12  console.error("Error during stringify:", err.message);
13}

• Kapag nagtatrabaho sa BigInt, i-convert ito sa string o tukuyin ang representasyon gamit ang custom na replacer o toJSON.

Seguridad (kapag humahawak ng hindi mapagkakatiwalaang JSON)

Ang JSON.parse ay ligtas at mas ligtas kaysa sa eval, ngunit mapanganib na basta gamitin ang parsed na object para sa property access o database queries. Palaging suriin at tiyaking tumutugma ang datos sa inaasahang schema.

1// Parse external JSON and validate expected properties before use.
2const external = '{"username":"eve","role":"user"}';
3const parsed = JSON.parse(external);
4if (typeof parsed.username === "string" && ["user","admin"].includes(parsed.role)) {
5  console.log("Safe to use parsed.username and parsed.role.");
6} else {
7  throw new Error("Invalid payload");
8}

• Para sa input validation (schema validation), matibay ang paggamit ng mga library tulad ng ajv.

Mga konsiderasyon sa performance

Ang madalas na pag-serialize at deserialize ng malalaking object ay nakaka-apekto sa CPU at memory. Kung kinakailangan, maaari mong ituring ang pagpapadala ng pagkakaiba lamang, paggamit ng binary formats (gaya ng MessagePack), o streaming (sunod-sunod na pagproseso ng data). Sa browser, may mga kaso na magagamit ang structuredClone (para sa pag-copy) o transferable objects sa postMessage.

Maikling tiyak na payo

Maaari mo ring isaalang-alang ang mga sumusunod na puntos:.

• Para sa logs, iwasan ang pretty-print at gumamit ng single-line na JSON upang lumiit ang laki.
• Ang mga object na madalas i-serialize ay dapat gawing magaan muna, halimbawa sa pagtanggal ng di-kailangang property.
• Gamitin ang replacer upang mabawasan ang traversal at di-isama ang di-kailangang properties.

Praktikal na halimbawa: API request send/receive flow

Panghuli, narito ang pagkakasunod-sunod ng ligtas na pag-convert ng object sa JSON para ipadala sa server at paano ibalik ang petsa mula sa natanggap na response.

 1// Prepare payload, stringify safely, send via fetch, and revive dates on response.
 2async function sendUserUpdate(url, user) {
 3  // Remove sensitive info before sending
 4  const payload = JSON.stringify(user, (k, v) => (k === "password" ? undefined : v));
 5  const res = await fetch(url, {
 6    method: "POST",
 7    headers: { "Content-Type": "application/json" },
 8    body: payload
 9  });
10
11  const text = await res.text();
12  // Reviver: convert ISO date strings back to Date
13  const data = JSON.parse(text, (key, value) => {
14    if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)) {
15      return new Date(value);
16    }
17    return value;
18  });
19  return data;
20}

• Sa halimbawang ito, tinanggal muna ang password bago ipadala at ang petsa ay ibinalik gamit ang reviver pagkatapos matanggap. Sa aktwal na paggamit, kailangan mong magdagdag ng error handling at timeout processing.

Buod

Gamit ang JSON.stringify() at JSON.parse(), maaari mong i-convert ang object at string sa isa’t isa. Pwede mong i-customize ang proseso ng conversion gamit ang replacer at reviver, at kung magpapatupad ka ng toJSON sa isang klase, maaari mo ring kontrolin bawat object nang hiwalay. Ang circular references, BigInt, mga function at iba pa ay hindi kayang i-handle ng direkta, kaya kailangang i-proseso muna ang mga ito.

Laging i-validate ang external input, at tiyaking walang sensitibong impormasyon sa logs o mga komunikasyon. Kung malaki ang laki ng data, mainam na iwasan ang pretty-printing, pag-isipan ang differential transmission o gumamit ng binary formats.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video