JavaScript - JSON: A Panduan untuk Pemula

Hai sana, para ahli kod masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia JSON. Jangan bimbang jika anda belum pernah mendengar tentang itu sebelum ini - menjelang akhir panduan ini, anda akan dapat bekerja dengan JSON dengan percaya diri seperti seorang profesional. Jadi, ambil minuman kesukaan anda, duduk selesa, dan mari kita masuk ke dalam!

Apa Itu JSON?

JSON, singkatan daripada JavaScript Object Notation, adalah format pertukaran data ringan. Saya tahu ini kelihatan seperti sebuat kata panjang, tetapi ber fikir tentangnya sebagai cara komputer untuk berbicara satu sama lain dan berkongsi maklumat dalam cara yang mudah difahami oleh kedua-dua mesin dan manusia.

Imagin anda menyampaikan catatan di kelas (tidaklah saya mendorong hal itu, tentu saja!). JSON adalah seperti cara standard menulis catatan itu supaya sesiapa yang membacanya dapat memahami mesej dengan cepat dan mudah.

Ciri-ciri JSON

Sebelum kita masuk ke detil, mari kita lihat apa yang menjadikan JSON istimewa:

1. Ia ringan dan mudah dibaca.
2. Ia bebas daripada bahasa (tidak khusus untuk JavaScript!)
3. Ia berdasarkan dua struktur universal: objek dan array

Ciri-ciri ini menjadikan JSON pilihan yang bagus untuk penyimpanan dan penghantaran data, dan kerana itu ia digunakan secara meluas dalam aplikasi web.

Sintaks JSON

Sekarang, mari kita lihat sintaks asas JSON. Jangan bimbang jika ia kelihatan agak aneh pada permulaan - kita akan merobahnya secara berperingkat.

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

Ini adalah objek JSON ringkas. Mari kita huraikan:

• Keseluruhan objek dikepung oleh kurungan kurma {}.
• Dalamnya, kita ada pasangan kunci-nilai.
• Kunci sentiasa string, dikepung oleh tanda petik dwi.
• Nilai boleh menjadi string, nombor, boolean, array, objek, atau null.
• Pasangan kunci-nilai dipisahkan oleh koma.

Data JSON

JSON dapat mewakili pelbagai jenis data. Mari kita lihat beberapa contoh:

String

{"message": "Hello, World!"}

Nombor

{"age": 30}

Boolean

{"isStudent": true}

Null

{"spouse": null}

Ingat, JSON adalah tentang mewakili data dalam cara yang mudah difahami dan digunakan. Ber fikir tentangnya sebagai membuat profil terperinci untuk setiap piece of information.

Objek JSON

Kita sudah melihat objek JSON ringkas, tetapi mari kita masuk lebih mendalam. Objek JSON boleh mengandungi beberapa pasangan kunci-nilai dan bahkan objek bersarang.

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

Dalam contoh ini, kita ada objek utama dengan kunci "person". Nilai "person" adalah objek lain yang mengandungi pelbagai jenis maklumat. Perhatikan bagaimana kita boleh bersarang objek dan bahkan termasuk array (kita akan membincangkan tentang ini dalam sekelompok masa).

Array JSON

Array dalam JSON adalah senarai terurut nilai. Ia dikepung oleh kurungan siku [] dan boleh mengandungi jenis data JSON apa pun.

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

Array sangat berguna ketika anda mahu mewakili koleksi item yang berkaitan. Contohnya, senarai bahan dalam resipi, atau senarai skor tinggi dalam permainan.

Mengakses Data JSON

Sekarang kita tahu bagaimana untuk menyusun data JSON, mari kita belajar bagaimana untuk mengaksesnya dalam JavaScript. Kita akan menggunakan objek person dari sebelum ini sebagai contoh.

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // Output: Alice
console.log(data.person.hobbies[1]); // Output: cycling
console.log(data.person.address.city); // Output: Wonderland

Seperti yang anda lihat, kita menggunakan notasi titik untuk mengakses properti objek, dan kurungan siku untuk mengakses elemen array. Itu seperti mengikuti peta untuk mencari piece of information yang tepat!

Metode JSON

JavaScript menyediakan dua metode utama untuk bekerja dengan JSON:

Metode	Deskripsi
JSON.parse()	Mengubah string JSON kepada objek JavaScript
JSON.stringify()	Mengubah objek JavaScript kepada string JSON

Mari kita lihat ini dalam tindakan:

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

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // Output: {"name":"Alice","age":25}

Metode ini seperti penterjemah, membantu JavaScript dan JSON berkomunikasi secara efektif.

JSON vs. Objek JavaScript

Walaupun JSON kelihatan sangat mirip dengan objek JavaScript, terdapat beberapa perbezaan utama:

1. Kunci JSON mesti string dan dalam tanda petik dwi.
2. Nilai JSON mesti salah satu jenis berikut: string, nombor, objek, array, boolean, atau null.
3. JSON tidak menyokong fungsi atau komen.

Ini adalah perbandingan cepat:

// Objek JavaScript yang sah
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// JSON yang setara
let jsonObj = {
"name": "John",
"age": 30
};

Perhatikan bagaimana fungsi dan kunci tanpa petik tidak hadir dalam versi JSON.

Mengubah String JSON kepada Objek JavaScript

Saya sudah menunjukkan bagaimana menggunakan JSON.parse() untuk mengubah string JSON kepada objek JavaScript, tetapi mari kita lihat contoh yang lebih kompleks:

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // Output: Alice
console.log(obj.pets[0].name); // Output: Fluffy

Ini sangat berguna ketika menerima data daripada server, yang seringkali datang dalam bentuk string JSON.

Mengubah Objek JavaScript kepada JSON

Secara serupa, kita dapat menggunakan JSON.stringify() untuk mengubah objek JavaScript kepada string JSON. Ini sering diperlukan ketika mengirim data ke server.

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

Dan begitu juga! Anda telah menyelesaikan kursus cepat dalam JSON. Ingat, latihan menjadikan master, jadi jangan takut untuk bereksperimen dengan membuat dan mengubah data JSON. Sebelum anda tahu, anda akan menjadi ahli JSON!

Credits: Image by storyset