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