JSON與JavaScript對象關(guān)系及語法規(guī)則詳解
JSON
JSON 英文全稱 JavaScript Object Notation，JSON 是一種輕量級的數(shù)據(jù)交換格式。JSON是獨立的語言 ，易于理解。
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ù)組，包含了三個對象。
每個對象為站點的信息（網(wǎng)站名和網(wǎng)站地址）。
{"sites":[
{"name":"簡書", "url":"www.jianshu.com"},
{"name":"Google", "url":"www.google.com"},
{"name":" 淘寶", "url":"www.taobao.com"}
]}JSON實例
{ "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 字符串。 |
實例
我們從服務(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)文章
JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié)
這篇文章主要介紹了JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié),本文重點在搞清楚這些屬性的區(qū)別,需要的朋友可以參考下2014-10-10
下面小編就為大家?guī)硪黄狫S操作時間 - UNIX時間戳的簡單介紹(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。2010-08-08
這篇文章主要為大家詳細(xì)介紹了原生js制作日歷控件的具體代碼，一個日歷控件實例，原生js開發(fā)，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript 有Date、Array、String等這樣的內(nèi)置對象，功能強大使用簡單，人見人愛，但在處理一些復(fù)雜的邏輯的時候，內(nèi)置對象就很無力了，往往需要開發(fā)者自定義對象2013-08-08
利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息
這篇文章主要是對利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息進(jìn)的實例行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
微信小程序數(shù)據(jù)操作指南之從綁定到更新的操作方法
在微信小程序開發(fā)中,數(shù)據(jù)操作是不可或缺的一環(huán),文章詳細(xì)介紹了數(shù)據(jù)綁定、更新等方法,并提供示例和注意事項,幫助開發(fā)者更好地應(yīng)用這些技術(shù),本文給大家介紹微信小程序數(shù)據(jù)操作指南之從綁定到更新,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要介紹了深入剖析JavaScript instanceof 運算符,ECMAScript 引入了另一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與 typeof 運算符相似，用于識別正在處理的對象的類型。,需要的朋友可以參考下2019-06-06
In Javascript Class, how to call the prototype method.(three
In Javascript Class, how to call the prototype method.(three method)...2007-01-01
關(guān)于封裝axios網(wǎng)絡(luò)請求降低代碼耦合度詳解
在項目中直接使用Axios或其他第三方庫來發(fā)送網(wǎng)絡(luò)請求獲取數(shù)據(jù)時,會導(dǎo)致代碼與網(wǎng)絡(luò)請求的邏輯耦合度過高,導(dǎo)致難以維護(hù),所以本文將講解如何將網(wǎng)路請求的代碼進(jìn)行封裝來進(jìn)行解耦操作,文中通過代碼示例和圖文講解的非常詳細(xì),需要的朋友可以參考下2024-05-05