JSON與JavaScript對象關(guān)系及語法規(guī)則詳解
JSON
JSON 英文全稱 JavaScript Object Notation，JSON 是一種輕量級的數(shù)據(jù)交換格式。JSON是獨(dú)立的語言 ，易于理解。
JSON 格式僅僅是一個文本。文本可以被任何編程語言讀取及作為數(shù)據(jù)格式傳遞。
JSON 是用于存儲和傳輸數(shù)據(jù)的格式。
JSON 通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù) 。
語法規(guī)則
- 數(shù)據(jù)為
鍵/值 對 - 數(shù)據(jù)由逗號分隔，最后一個不加逗號
- 大括號保存對象
- 方括號保存數(shù)組
JSON數(shù)據(jù)
一個名稱對應(yīng)一個值，數(shù)據(jù)格式為鍵/值 對，就像JavaScript對象屬性。鍵/值 對 包括字段名稱（在雙引號中），后面一個冒號，然后是值:
"name":"Runoob"
JSON數(shù)組
JSON 數(shù)組保存在中括號[ ]內(nèi)。
就像在 JavaScript 中, 數(shù)組可以包含對象，最后一個不需要加逗號，如下：
對象 "sites" 是一個數(shù)組，包含了三個對象。
每個對象為站點(diǎn)的信息（網(wǎng)站名和網(wǎng)站地址）。
{"sites":[
{"name":"簡書", "url":"www.jianshu.com"},
{"name":"Google", "url":"www.google.com"},
{"name":" 淘寶", "url":"www.taobao.com"}
]}JSON實(shí)例
{ "images" : [
{
"size" : "20x20",
"idiom" : "ios",
"scale" : "1x",
"filename" : "icon-20X20.png"
},
{
"size" : "20x20",
"idiom" : "ios",
"scale" : "2x",
"filename" : "icon-20X20@2x.png"
}
]}字符串和JS 對象格式轉(zhuǎn)換
| 函數(shù) | 作用 |
|---|---|
| JSON.parse() | 用于將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象。 |
| JSON.stringify() | 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。 |
實(shí)例
我們從服務(wù)器中讀取 JSON 數(shù)據(jù)，并在網(wǎng)頁中顯示第2條數(shù)據(jù)，也就是sites[1]的數(shù)據(jù)。
/**創(chuàng)建 JavaScript 字符串，字符串為 JSON 格式的數(shù)據(jù)**/
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
/**使用 JavaScript 內(nèi)置函數(shù) JSON.parse() 將字符串轉(zhuǎn)換為 JavaScript 對象:**/
obj = JSON.parse(text);
/**在你的頁面中使用新的 JavaScript 對象，從服務(wù)器中讀取 JSON 數(shù)據(jù)，并在網(wǎng)頁中顯示數(shù)據(jù)**/
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;JSON 與JS 對象的關(guān)系
簡單的理解：
JSON 是 JS 對象的字符串表示法。
它使用文本表示一個 JS 對象的信息，JSON 本質(zhì)是一個字符串。
var obj = {a: 'Hello', b: 'World'}; //這是一個js對象，注意js對象的鍵名的引號可加可不加，看個人習(xí)慣，最好是加上
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質(zhì)是一個字符串
JSON.parse() 就是字符串轉(zhuǎn) js 對象， JSON.stringify()就是 js 對象轉(zhuǎn)字符串，它們前提是要 json 格式才有意義。
var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//結(jié)果是 {a: 'Hello', b: 'World'} 一個對象
var json = JSON.stringify({a: 'Hello', b: 'World'});
//結(jié)果是 '{"a": "Hello", "b": "World"}' 一個JSON格式的字符串以上就是JSON與JavaScript對象關(guān)系及語法規(guī)則詳解的詳細(xì)內(nèi)容，更多關(guān)于JSON JavaScript對象關(guān)系的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JS正則匹配中文的方法,結(jié)合具體實(shí)例形式分析了JS針對中文的匹配操作相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2017-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用實(shí)例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中串的表示與應(yīng)用,結(jié)合實(shí)例形式簡單分析了基于javascript順序操作實(shí)現(xiàn)串結(jié)構(gòu)與串的拼接操作相關(guān)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS ES6變量的解構(gòu)賦值，對ES6感興趣的同學(xué)，可以參考下2021-05-05
JavaScript結(jié)合Canvas繪畫畫運(yùn)動小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動小球，canvas被稱為畫布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動畫效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
js 判斷字符串中是否包含某個字符串的實(shí)現(xiàn)代碼
工作中經(jīng)常會使用到判斷一個字符串是否包含某一個字符串，因此總結(jié)一下幾個方法,需要的朋友可以參考下2023-03-03
下面小編就為大家?guī)硪黄獪\談ES6新增的數(shù)組方法和對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
setTimeout函數(shù)是一個原生的javascript函數(shù)。setTimeout函數(shù)會在一個指定的延遲時間之后調(diào)用一個函數(shù)或執(zhí)行一段指定的代碼。它的應(yīng)用非常廣泛，例如我們希望用戶在瀏覽器某個頁面一段時間后彈出一個對話框，或者是鼠標(biāo)點(diǎn)擊某個元素后隔幾秒鐘在刪除這個元素。2017-02-02
這篇文章主要介紹了js實(shí)現(xiàn)3D照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
原生JS 實(shí)現(xiàn)的input輸入時表格過濾操作示例
這篇文章主要介紹了原生JS 實(shí)現(xiàn)的input輸入時表格過濾操作,結(jié)合實(shí)例形式分析了JavaScript基于頁面元素遍歷、運(yùn)算、判斷實(shí)現(xiàn)的表格過濾相關(guān)操作技巧,需要的朋友可以參考下2019-08-08