Menguasai Pengendalian JSON dalam JavaScript: Parsing dan Stringifying

Pengendalian JSON dalam JavaScript (Penghuraian dan Pencabutan)

JSON (JavaScript Object Notation) ialah format pertukaran data ringan yang mudah dibaca dan ditulis oleh manusia serta mudah dihuraikan dan dijana oleh mesin. JavaScript menyediakan kaedah terbina dalam untuk menghuraikan rentetan JSON ke dalam objek dan menukar objek kepada rentetan JSON.

---

1. Menghuraikan Rentetan JSON

Kaedah JSON.parse() digunakan untuk menukar rentetan JSON kepada objek JavaScript.

Sintaks

JSON.parse(text[, reviver]);

• teks: Rentetan JSON untuk dihuraikan.
• reviver (pilihan): Fungsi untuk mengubah objek yang dihuraikan sebelum mengembalikannya.

Contoh

A. Penghuraian Mudah

const jsonString = '{"name": "John", "age": 30}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // Output: John
console.log(parsedData.age);  // Output: 30

B. Menggunakan Fungsi Reviver
Fungsi reviver boleh digunakan untuk menyesuaikan proses penghuraian.

const jsonString = '{"name": "John", "birthYear": 1990}';
const parsedData = JSON.parse(jsonString, (key, value) => {
  if (key === "birthYear") {
    return 2024 - value; // Convert birth year to age
  }
  return value;
});
console.log(parsedData.birthYear); // Output: 34

Pengendalian Ralat

Sentiasa balut JSON.parse() dalam percubaan...tangkap blok untuk mengendalikan JSON yang tidak sah.

const invalidJson = "{name: 'John', age: 30}"; // Invalid JSON (keys must be in quotes)
try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

---

2. Merangkai Objek JavaScript

Kaedah JSON.stringify() menukar objek JavaScript kepada rentetan JSON.

Sintaks

JSON.stringify(value[, replacer[, space]]);

• nilai: Objek yang akan dirangkaikan.
• pengganti (pilihan): Fungsi atau tatasusunan untuk menapis sifat.
• ruang (pilihan): Menambah lekukan untuk kebolehbacaan yang lebih baik.

Contoh

A. Stringifying Mudah

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString); // Output: {"name":"John","age":30}

B. Menggunakan Fungsi Pengganti
Fungsi pengganti menapis atau mengubah sifat objek.

const data = { name: "John", age: 30, password: "secret" };
const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // Exclude passwords
  return value;
});
console.log(jsonString); // Output: {"name":"John","age":30}

C. Menambah Lekukan
Parameter ruang memformatkan output dengan lekukan.

const data = { name: "John", age: 30 };
const jsonString = JSON.stringify(data, null, 2);
console.log(jsonString);
// Output:
// {
//   "name": "John",
//   "age": 30
// }

Pengendalian Ralat

Rujukan bulat dalam objek menyebabkan JSON.stringify() membuang ralat.

const circularObject = {};
circularObject.self = circularObject;
try {
  JSON.stringify(circularObject);
} catch (error) {
  console.error("Cannot stringify circular object:", error.message);
}

---

3. Kes Penggunaan Praktikal

A. Menghantar Data ke Pelayan

Tukar objek JavaScript kepada rentetan JSON sebelum menghantarnya dalam permintaan HTTP.

const data = { name: "John", age: 30 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

B. Menyimpan Data dalam Storan Setempat

Simpan dan dapatkan semula data dalam format JSON menggunakan localStorage.

const data = { name: "John", age: 30 };
localStorage.setItem("user", JSON.stringify(data)); // Storing data

const userData = JSON.parse(localStorage.getItem("user")); // Retrieving data
console.log(userData.name); // Output: John

C. Objek Penyalinan Dalam

Menggunakan kaedah JSON untuk mencipta salinan dalam objek (tidak berfungsi untuk fungsi atau rujukan bulat).

JSON.parse(text[, reviver]);

---

4. Perbezaan Antara JSON dan Objek JavaScript

JSON	JavaScript Object
Text format (string)	In-memory data structure
Keys must be strings (quoted)	Keys can be strings or symbols
Cannot store methods/functions	Can store methods/functions

---

5. Ringkasan

• Gunakan JSON.parse() untuk menukar rentetan JSON kepada objek JavaScript.
• Gunakan JSON.stringify() untuk menukar objek JavaScript kepada rentetan JSON.
• JSON adalah penting untuk pertukaran data dalam aplikasi web, terutamanya dengan API dan storan setempat.
• Sentiasa mengendalikan ralat semasa menghuraikan atau menyusun JSON.

Menguasai pengendalian JSON ialah kemahiran penting untuk membina aplikasi web berasaskan data yang moden.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Pengendalian JSON dalam JavaScript: Parsing dan Stringifying. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!