JavaScript之json_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JSON是JavaScript Object Notation的縮寫(xiě),它是一種數(shù)據(jù)交換格式。
在JSON出現(xiàn)之前,大家一直用XML來(lái)傳遞數(shù)據(jù)。因?yàn)閄ML是一種純文本格式,所以它適合在網(wǎng)絡(luò)上交換數(shù)據(jù)。XML本身不算復(fù)雜,但是,加上DTD、XSD、XPath、XSLT等一大堆復(fù)雜的規(guī)范以后,任何正常的軟件開(kāi)發(fā)人員碰到XML都會(huì)感覺(jué)頭大了,最后大家發(fā)現(xiàn),即使你努力鉆研幾個(gè)月,也未必搞得清楚XML的規(guī)范。
終于,在2002年的一天,道格拉斯·克羅克福特(Douglas Crockford)同學(xué)為了拯救深陷水深火熱同時(shí)又被某幾個(gè)巨型軟件企業(yè)長(zhǎng)期愚弄的軟件工程師,發(fā)明了JSON這種超輕量級(jí)的數(shù)據(jù)交換格式。
道格拉斯同學(xué)長(zhǎng)期擔(dān)任雅虎的高級(jí)架構(gòu)師,自然鐘情于JavaScript。他設(shè)計(jì)的JSON實(shí)際上是JavaScript的一個(gè)子集。在JSON中,一共就這么幾種數(shù)據(jù)類(lèi)型:
- number:和JavaScript的
number
完全一致; - boolean:就是JavaScript的
true
或false
; - string:就是JavaScript的
string
; - null:就是JavaScript的
null
; - array:就是JavaScript的
Array
表示方式——[]
; - object:就是JavaScript的
{ ... }
表示方式。
以及上面的任意組合。
并且,JSON還定死了字符集必須是UTF-8,表示多語(yǔ)言就沒(méi)有問(wèn)題了。為了統(tǒng)一解析,JSON的字符串規(guī)定必須用雙引號(hào)""
,Object的鍵也必須用雙引號(hào)""
。
由于JSON非常簡(jiǎn)單,很快就風(fēng)靡Web世界,并且成為ECMA標(biāo)準(zhǔn)。幾乎所有編程語(yǔ)言都有解析JSON的庫(kù),而在JavaScript中,我們可以直接使用JSON,因?yàn)镴avaScript內(nèi)置了JSON的解析。
把任何JavaScript對(duì)象變成JSON,就是把這個(gè)對(duì)象序列化成一個(gè)JSON格式的字符串,這樣才能夠通過(guò)網(wǎng)絡(luò)傳遞給其他計(jì)算機(jī)。
如果我們收到一個(gè)JSON格式的字符串,只需要把它反序列化成一個(gè)JavaScript對(duì)象,就可以在JavaScript中直接使用這個(gè)對(duì)象了。
序列化
讓我們先把小明這個(gè)對(duì)象序列化成JSON格式的字符串:
var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'] }; JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'
要輸出得好看一些,可以加上參數(shù),按縮進(jìn)輸出:
JSON.stringify(xiaoming, null, ' ');
結(jié)果:
{ "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" Middle School", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] }
第二個(gè)參數(shù)用于控制如何篩選對(duì)象的鍵值,如果我們只想輸出指定的屬性,可以傳入Array:
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
結(jié)果:
{ "name": "小明", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] }
還可以傳入一個(gè)函數(shù),這樣對(duì)象的每個(gè)鍵值對(duì)都會(huì)被函數(shù)先處理:
function convert(key, value) { if (typeof value === 'string') { return value.toUpperCase(); } return value; } JSON.stringify(xiaoming, convert, ' ');
上面的代碼把所有屬性值都變成大寫(xiě):
{ "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" MIDDLE SCHOOL", "skills": [ "JAVASCRIPT", "JAVA", "PYTHON", "LISP" ] }
如果我們還想要精確控制如何序列化小明,可以給xiaoming
定義一個(gè)toJSON()
的方法,直接返回JSON應(yīng)該序列化的數(shù)據(jù):
var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'], toJSON: function () { return { // 只輸出name和age,并且改變了key: 'Name': this.name, 'Age': this.age }; } }; JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'
反序列化
拿到一個(gè)JSON格式的字符串,我們直接用JSON.parse()
把它變成一個(gè)JavaScript對(duì)象:
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true] JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14} JSON.parse('true'); // true JSON.parse('123.45'); // 123.45
JSON.parse()
還可以接收一個(gè)函數(shù),用來(lái)轉(zhuǎn)換解析出的屬性:
JSON.parse('{"name":"小明","age":14}', function (key, value) { // 把number * 2: if (key === 'name') { return value + '同學(xué)'; } return value; }); // Object {name: '小明同學(xué)', age: 14}
在JavaScript中使用JSON,就是這么簡(jiǎn)單!
相關(guān)文章
抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼...2007-07-07javascript(js)的小數(shù)點(diǎn)乘法除法問(wèn)題詳解
本篇文章主要是對(duì)javascript(js)中的小數(shù)點(diǎn)乘法除法問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03JavaScript高級(jí)程序設(shè)計(jì) XML、Ajax 學(xué)習(xí)筆記
JavaScript高級(jí)程序設(shè)計(jì) XML、Ajax 學(xué)習(xí)筆記,需要的朋友可以參考下。2011-09-09JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器,平臺(tái),語(yǔ)言的接口,使得你可以訪(fǎng)問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04深入理解JavaScript系列(12) 變量對(duì)象(Variable Object)
JavaScript編程的時(shí)候總避免不了聲明函數(shù)和變量,以成功構(gòu)建我們的系統(tǒng),但是解釋器是如何并且在什么地方去查找這些函數(shù)和變量呢2012-01-01