Rumah > hujung hadapan web > tutorial js > JSON.stringify() & JSON.parse()

JSON.stringify() & JSON.parse()

Susan Sarandon
Lepaskan: 2024-12-06 16:38:16
asal
823 orang telah melayarinya

JSON

JSON, atau Notasi Objek JavaScript, ialah format teks untuk menyimpan dan mengangkut data kompleks antara sistem. Javascript termasuk kaedah mudah untuk menukar teks JSON kepada objek dan objek JSON kepada teks.

Ini berguna apabila ...

JSON.stringify() dan JSON.parse() dibina dalam fungsi yang boleh digunakan pada objek JavaScript dan rentetan untuk menukarnya ke belakang dan ke belakang.

Di sini, saya mempunyai tatasusunan yang dipanggil album objek album, setiap satu mengandungi dua kunci: "artis" dan "tajuk".

let albums = [
{
  "artist" : "Herbie Hancock",
  "title" : "Head Hunters",
},
{
  "artist" : "Beastie Boys",
  "title" : "Pauls Boutique"
},
  {
  "artist" : "The Cramps",
  "title" : "Bad Music for Bad People"
}
];

console.log(albums);
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Herbie Hancock",
  "title": "Head Hunters"
},// [object Object] 
{
  "artist": "Beastie Boys",
  "title": "Pauls Boutique"
},// [object Object] 
{
  "artist": "The Cramps",
  "title": "Bad Music for Bad People"
}]
Salin selepas log masuk

Apabila memanggil console.log(albums);, konsol melihat bahawa album ialah tatasusunan. Ia meringkaskan tatasusunan sebagai [Array objek] dan setiap item di dalamnya sebagai [Objek Objek], bukannya mengembangkan setiap butiran secara lalai. Ini ialah trengkas terbina dalam konsol untuk menunjukkan setiap elemen ialah objek.

JSON.stringify()

JSON.stringify() mengambil JavaScript tatasusunan atau objek kompleks dan mengubahnya menjadi rentetan JSON.

Di sini, saya menukar tatasusunan album kepada rentetan JSON dengan menggunakan kaedah JSON.stringify() pada album:

let albumStrings = JSON.stringify(albums);

console.log(albumStrings);
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

"[{'artist':'Herbie Hancock','title':'Head Hunters'},{'artist':'Beastie 
Boys','title':'Pauls Boutique'},{'artist':'The Cramps','title':'Bad Music 
for Bad People'}]"
Salin selepas log masuk

Ini memberi kita tatasusunan tiga objek dengan dua sifat setiap satu.

Tetapi bagaimana jika saya mahu..

Fungsi JSON.stringify() menerima sehingga tiga parameter:

  1. Nilai: nilai untuk ditukar kepada rentetan JSON (album)

  2. Pengganti(Pilihan): fungsi yang membolehkan anda mengubah suai setiap pasangan nilai kunci (null)

  3. Ruang(Pilihan): bilangan ruang untuk digunakan setiap tahap (4)

let albumStringsFormat = JSON.stringify(albums, null, 4);

console.log(albumStringsFormat);
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

"[
    {
        'artist': 'Herbie Hancock',
        'title': 'Head Hunters'
    },
    {
        'artist': 'Beastie Boys',
        'title': 'Pauls Boutique'
    },
    {
        'artist': 'The Cramps',
        'title': 'Bad Music for Bad People'
    }
]"
Salin selepas log masuk

Di sini, anda boleh melihat setiap objek sekarang

JSON.stringify() & JSON.parse()

JSON.parse()

Seterusnya, saya telah mencipta rentetan

let albumsString = '[{"artist": "Bad Brains", "title": "Bad Brains"}, 
{"artist": "A Tribe Called Quest", "title": "Low End Theory"}, {"artist": 
"Nina Simone", "title": "Wild is the Wind"}]'

console.log(albumsString);
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

"[{'artist': 'Bad Brains', 'title': 'Bad Brains'}, {'artist': 'A Tribe 
Called Quest', 'title': 'Low End Theory'}, {'artist': 'Nina Simone', 
'title': 'Wild is the Wind'}]"
Salin selepas log masuk

Jika saya log panjang

console.log(albumsString.length); // length of string
162
Salin selepas log masuk

Jika memberi saya panjang 162, kerana.

Seterusnya, jika saya menghuraikan

let albumsObject = JSON.parse(albumsString);

console.log(albumsObject);
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

// [object Array] (3)
[// [object Object] 
{
  "artist": "Bad Brains",
  "title": "Bad Brains"
},// [object Object] 
{
  "artist": "A Tribe Called Quest",
  "title": "Low End Theory"
},// [object Object] 
{
  "artist": "Nina Simone",
  "title": "Wild is the Wind"
}]
Salin selepas log masuk

Sekarang, apabila saya log panjang objek

console.log(albumsObject.length); // length of object
3
Salin selepas log masuk

Log ini

console.log(JSON.stringify(albumsObject, null, 4));
Salin selepas log masuk

Melog kod ini akan memberikan output berikut:

"[
    {
        'artist': 'Bad Brains',
        'title': 'Bad Brains'
    },
    {
        'artist': 'A Tribe Called Quest',
        'title': 'Low End Theory'
    },
    {
        'artist': 'Nina Simone',
        'title': 'Wild is the Wind'
    }
]"
Salin selepas log masuk

JSON.stringify() & JSON.parse()

Atas ialah kandungan terperinci JSON.stringify() & JSON.parse(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan