Objek Javascript Vs JSON

208

Saya ingin memahami perbedaan mendasar antara objek Javascript dan string JSON.

Katakanlah saya membuat variabel JS berikut:

var testObject = {one: 1,"two":2,"three":3};

Q1. Apakah kunci / nama properti valid baik dengan / tanpa tanda kutip? (mis. "one" : 1)

Jika ya, apa bedanya?

T2: Jika saya mengonversi objek di atas menggunakan JSON.stringify(testObject), apa perbedaan antara objek JS asli dan JSON?

Saya merasa mereka hampir sama. Tolong jelaskan ini.

T3: Untuk parsing string JSON, apakah metode di bawah ini disarankan?

var javascriptObj = JSON.parse(jSonString);
testndtv
sumber

Jawaban:

239
  1. Apakah kunci / nama properti valid baik dengan / tanpa tanda kutip?

    Satu-satunya waktu yang Anda butuhkan untuk menyertakan kunci dalam tanda kutip ketika menggunakan Object notasi Literal adalah di mana kunci berisi karakter khusus ( if, :, -dll). Perlu dicatat bahwa kunci dalam JSON harus diapit dengan tanda kutip ganda .

  2. Jika saya mengonversi objek di atas ke menggunakan JSON var jSonString = JSON.stringify(testObject);, apa perbedaan antara 2 (JS obj dan JSON)?

    JSON adalah format pertukaran data. Ini adalah standar yang menjelaskan bagaimana daftar yang diurutkan dan peta yang tidak berurutan, string boolean, dan angka dapat direpresentasikan dalam string. Sama seperti XML dan YAML adalah cara untuk menyampaikan informasi terstruktur antar bahasa, JSON juga sama. Objek JavaScript di sisi lain adalah tipe fisik. Sama seperti array PHP, kelas C ++ / struct, objek JavaScript adalah tipe internal untuk JavaScript.

    Ini sebuah cerita. Bayangkan Anda membeli beberapa perabot dari toko, dan Anda menginginkannya dikirim. Namun satu-satunya yang tersisa dalam stok adalah model tampilan, tetapi Anda setuju untuk membelinya.

    Di toko, laci yang Anda beli adalah benda hidup:

    var chestOfDrawers = {
        color: "red",
        numberOfDrawers: 4
    }

    Namun, Anda tidak dapat mengirim peti laci di pos, sehingga Anda membongkarnya (baca, sesuaikan). Sekarang tidak berguna dalam hal furnitur. Sekarang JSON. Ini dalam bentuk paket datar.

    {"color":"red","numberOfDrawers":4}

    Ketika Anda menerimanya, Anda kemudian membangun kembali lemari laci (baca, parsing). Sekarang kembali dalam bentuk objek.

    Alasan di balik JSON / XML dan YAML adalah untuk memungkinkan data ditransfer antara bahasa pemrograman dalam format yang dapat dipahami oleh kedua bahasa yang berpartisipasi; Anda tidak bisa memberikan PHP atau C ++ objek JavaScript Anda secara langsung; karena setiap bahasa merepresentasikan objek secara berbeda di bawah kap. Namun, karena kami telah merender objek menjadi notasi JSON; yaitu cara standar untuk merepresentasikan data, kita dapat mengirimkan representasi JSON objek ke bahasa lain (C ++, PHP), mereka dapat membuat ulang objek JavaScript yang kita miliki ke objek mereka sendiri berdasarkan pada representasi JSON objek.

    Penting untuk dicatat bahwa JSON tidak dapat mewakili fungsi atau tanggal. Jika Anda mencoba untuk mengencangkan objek dengan anggota fungsi, fungsi tersebut akan dihapus dari representasi JSON. Tanggal akan dikonversi menjadi string;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
  3. Untuk parsing string JSON, apakah metode di bawah ini disarankan? var javascriptObj = JSON.parse(jSonString);

    Ya, tetapi browser yang lebih lama tidak mendukung JSON secara native (IE <8) . Untuk mendukung ini, Anda harus memasukkan json2.js.

    Jika Anda menggunakan jQuery, Anda dapat menelepon jQuery.parseJSON(), yang akan digunakan di JSON.parse()bawah kap jika didukung dan sebaliknya akan mundur ke implementasi kustom untuk mengurai input.

Mat
sumber
4
@testndtv Anda kehilangan intinya - meskipun di atas kertas (atau di layar) string JSON dan tampilan objek JS mungkin terlihat sama, mereka bukan hal yang sama. JSON hanyalah cara untuk mengemas objek menjadi string, sehingga dapat ditransfer ke suatu tempat dan kemudian dibongkar kembali menjadi sebuah objek.
Alnitak
1
@Matt analogi miskin IMHO - JSON tidak boleh digunakan untuk membuat serialisasi objek yang memiliki metode - hanya untuk objek data murni.
Alnitak
1
Jadi jika objek JS memiliki metode, akan mengkonversi menjadi string JSON benar-benar mengabaikannya ... seperti dalam kasus di atas getInut dan getOut akan sepenuhnya diabaikan .... Apakah itu cara kerjanya?
testndtv
3
@Growler: biasanya saya menggunakan JSON jika "hal" perlu dihasilkan di server, dan menggunakan file js jika "benda" hanya berfungsi apa adanya. Pembeda besar lainnya adalah apakah Anda harus menyertakan fungsi dan / atau tanggal, karena JSON tidak dapat mewakili mereka, jadi Anda harus menggunakan file JS. Jika Anda masih ragu, silakan tanyakan sebagai pertanyaan terpisah tentang Stack Overflow (perlihatkan contoh konten yang perlu Anda sediakan untuk mewakili dialog Anda), dan berikan saya tautannya; Saya akan senang melihat lebih dekat!
Matt
4
@ Mat Anda, tuan, adalah raja # jenius! Penjelasan Anda tepat, jelas, singkat, dan mudah dimengerti. Saya berharap Anda adalah mentor JavaScript / pemrograman saya.
FrankDraws
30

T1: Saat mendefinisikan objek literal dalam javascript, kunci dapat menyertakan tanda kutip atau tidak. Tidak ada perbedaan kecuali bahwa kutipan memungkinkan Anda untuk menentukan kunci tertentu yang akan menyebabkan penerjemah gagal untuk menguraikan jika Anda mencobanya telanjang. Misalnya, jika Anda menginginkan kunci yang hanya merupakan tanda seru, Anda perlu mengutip:

a = { "!": 1234 } // Valid
a = { !: 1234 } //  Syntax error

Namun dalam kebanyakan kasus, Anda dapat menghilangkan tanda kutip di sekitar tombol pada objek literal.

T2: JSON secara harfiah adalah representasi string. Itu hanya sebuah string. Jadi, pertimbangkan ini:

var testObject = { hello: "world" }
var jSonString = JSON.stringify(testObject);

Karena testObjectini adalah objek nyata, Anda dapat memanggil properti di atasnya dan melakukan hal lain yang dapat Anda lakukan dengan objek:

testObject.hello => "world"

Di sisi lain, jsonStringhanyalah sebuah string:

jsonString.hello => undefined

Perhatikan satu perbedaan lain: Di JSON, semua kunci harus dikutip. Itu kontras dengan objek literal, di mana kutipan biasanya dapat dihilangkan sesuai penjelasan saya di Q1.

Q3. Anda dapat mengurai string JSON dengan menggunakan JSON.parse, dan ini umumnya cara terbaik untuk melakukannya (jika browser atau kerangka menyediakannya). Anda juga dapat menggunakan evalkarena JSON adalah kode javascript yang valid, tetapi metode sebelumnya direkomendasikan karena beberapa alasan (eval memiliki banyak masalah buruk yang terkait dengannya).

Ben Lee
sumber
9

Masalah dipecahkan oleh JSON

Katakanlah Anda ingin bertukar objek JavaScript biasa antara dua komputer, dan Anda menetapkan dua aturan:

  • Data yang dikirimkan harus berupa string biasa.
  • Hanya atribut yang dapat dipertukarkan, metode tidak ditransmisikan.

Sekarang Anda membuat dua objek pada host pertama:

var obj1 = { one: 1,"two":2,"three":3 }; // your example
var obj2 = { one: obj1.one, two: 2, three: obj1.one + obj1.two };

Bagaimana Anda bisa mengubah benda-benda itu menjadi string untuk transmisi ke host kedua?

  • Untuk objek pertama, Anda dapat mengirim string ini dari definisi literal '{ one: 1,"two":2,"three":3 }', tetapi sebenarnya Anda tidak dapat membaca literal di bagian skrip dokumen (setidaknya tidak mudah). Jadi obj1dan obj2harus benar-benar diproses dengan cara yang sama.
  • Anda perlu menghitung semua atribut dan nilainya, dan membuat string yang mirip dengan objek literal.

JSON telah dibuat sebagai solusi untuk kebutuhan yang baru saja dibahas: Ini adalah seperangkat aturan untuk membuat string yang setara dengan objek dengan mendaftar semua atribut dan nilai (metode diabaikan).

JSON menormalkan penggunaan tanda kutip ganda untuk nama atribut dan nilai.

Ingatlah bahwa JSON adalah seperangkat aturan saja (standar).

Berapa banyak objek JSON yang dibuat?

Hanya satu, itu secara otomatis dibuat oleh mesin JS.

Mesin JavaScript modern yang ditemukan di browser memiliki objek asli, juga bernama JSON. Objek JSON ini mampu:

  • Dekode string yang dibangun menggunakan standar JSON, menggunakan JSON.parse (string). Hasilnya adalah objek JS biasa dengan atribut dan nilai yang ditemukan di string JSON.

  • Encode atribut / nilai objek JS biasa menggunakan JSON.stringify (). Hasilnya adalah string yang sesuai dengan aturan JSON.

Objek (tunggal) JSON mirip dengan codec, fungsinya adalah untuk menyandikan dan mendekode.

Perhatikan bahwa:

  • JSON.parse () tidak membuat objek JSON, ia menciptakan objek JS biasa, tidak ada perbedaan antara objek yang dibuat menggunakan objek literal dan objek yang dibuat oleh JSON.parse () dari string yang sesuai dengan JSON.

  • Hanya ada satu objek JSON, yang digunakan untuk semua konversi.

Kembali ke pertanyaan :

  • Q1: Penggunaan tanda kutip ganda diizinkan untuk objek literal. Perhatikan bahwa tanda kutip digunakan secara opsional untuk nama atribut, dan wajib untuk nilai string. Objek literal itu sendiri tidak dikelilingi oleh tanda kutip.

  • T2: Objek yang dibuat dari literal dan menggunakan JSON.parse () benar-benar sama. Kedua objek ini setara setelah dibuat:

    var obj1 = { one: 1, "two": 2, "three": 3 };
    var obj2 = JSON.parse('{ "one": "1", "two": "2", "three": "3" }');

  • T3: Pada browser modern JSON.parse()digunakan untuk membuat objek JS dari string yang sesuai dengan JSON. (jQuery juga memiliki metode setara yang dapat digunakan untuk semua browser).

mnt
sumber
7

Q1 - di JS Anda hanya perlu menggunakan tanda kutip jika kuncinya adalah kata yang dipesan atau jika itu akan menjadi token ilegal. Di JSON Anda HARUS selalu menggunakan tanda kutip ganda pada nama-nama kunci.

Q2 - jsonStringadalah versi serial objek input ...

Q3 - yang dapat di- deserialised ke objek yang tampak identik menggunakanJSON.parse()

Alnitak
sumber
1

Pertanyaan sudah memiliki jawaban yang bagus, saya menambahkan contoh kecil di bawah ini, yang akan membuatnya lebih mudah untuk memahami penjelasan yang diberikan dalam jawaban sebelumnya. Salin tempel di bawah cuplikan ke IDE Anda untuk pemahaman yang lebih baik dan komentar baris yang berisi invalid_javascript_object_no_quotesdeklarasi objek untuk menghindari kesalahan waktu kompilasi.

// Valid JSON strings(Observe quotes)
valid_json = '{"key":"value"}'
valid_json_2 = '{"key 1":"value 1"}' // Observe the space(special character) in key - still valid


//Valid Javascript object
valid_javascript_object_no_quotes = {
    key: "value"  //No special character in key, hence it is valid without quotes for key
}


//Valid Javascript object
valid_javascript_object_quotes = {
    key:"value",  //No special character in key, hence it is valid without quotes for key
    "key 1": "value 1" // Space (special character) present in key, therefore key must be contained in double quotes  - Valid
}



console.log(typeof valid_json) // string
console.log(typeof valid_javascript_object_no_quotes) // object
console.log(typeof valid_javascript_object_quotes) // object

//Invalid Javascript object 
invalid_javascript_object_no_quotes = {
   key 1: "value"//Space (special character) present in key, since key is not enclosed with double quotes "Invalid Javascript Object"
}
Siwa
sumber