快捷導(dǎo)航

javascript學(xué)習(xí)之json入門

更新時(shí)間：2016年12月22日 16:48:18 作者：呆里呆氣

本文主要對(duì)javascript中的JSON進(jìn)行詳細(xì)介紹。相信對(duì)于初學(xué)者具有很好的參考價(jià)值，下面就跟著小編一起來看下吧

1. 什么是JSON

JSON---Javascript Object Notation，前兩個(gè)單詞大家應(yīng)該都認(rèn)識(shí)，最后一個(gè)notation，是“記號(hào)、標(biāo)記法”的意思，連在一起，便成了JSON。

它是一種輕量級(jí)的數(shù)據(jù)交換格式，是基于Javascript的一個(gè)子集，可以叫做Javascript對(duì)象表示法，是存儲(chǔ)和交換文本信息的語法，但它并不是Javascript獨(dú)有的數(shù)據(jù)格式，其它很多語言都可以對(duì)JSON進(jìn)行解析和序列化。

2. JSON的由來

在21世紀(jì)初，Douglas Crockford（Web開發(fā)領(lǐng)域最知名的技術(shù)權(quán)威之一，ECMA JavaScript2.0標(biāo)準(zhǔn)化委員會(huì)委員，被JavaScript之父Brendan Eich稱為JavaScript的大宗師（Yoda），曾任Yahoo!資深JavaScript架構(gòu)師，現(xiàn)任PayPal高級(jí)JavaScript架構(gòu)師）試圖尋找一種更加簡(jiǎn)便的數(shù)據(jù)交換格式，能夠在服務(wù)器之間交換數(shù)據(jù)，當(dāng)時(shí)通用的數(shù)據(jù)交換語言是XML，但是Douglas Crockford認(rèn)為XML的生成與解析都過于麻煩，所以他提出了一種更加簡(jiǎn)化的格式，就是我們現(xiàn)在使用的JSON。

JSON的規(guī)格十分簡(jiǎn)單，只用一個(gè)頁面幾百個(gè)字就能說清楚，而且Douglas Crackford稱這個(gè)規(guī)格永遠(yuǎn)不用升級(jí)，因?yàn)樵撘?guī)定的都已經(jīng)規(guī)定好了。

3. 為什么要用JSON

JSON類似于XML，比XML更小、更快、更容易解析。但同時(shí)XML也有它的不可替代性，應(yīng)根據(jù)使用場(chǎng)景進(jìn)行更合適的選擇；

JSON語法簡(jiǎn)單，很容易理解，并且對(duì)象信息自描述，數(shù)據(jù)傳輸量小不占用帶寬；

JSON雖然遠(yuǎn)不及emoji這一世界通用語言，但其實(shí)它的支持度也已經(jīng)非?？捎^，支持的語言包括C，C#，Java，JavaScript，PHP，Python，Ruby等等；

對(duì)于Ajax應(yīng)用程序來說，JSON比XML更快捷，更易用；

JSON的可讀性、可擴(kuò)展性都非常好，編碼難度也比較低，即使不借助工具也能寫出比較規(guī)范的JSON

......

4. JSON怎么用

⑴ JSON的基本語法

① 并列的數(shù)據(jù)之間用逗號(hào)( , )分隔

② 映射用冒號(hào)( : )表示

③ 映射的集合用大括號(hào)( {} )表示

④ 并列數(shù)據(jù)的集合用方括號(hào)( [] )表示

例如：

上賽季的MVP是斯蒂芬?guī)炖?，?chǎng)上位置是控球后衛(wèi)，球衣號(hào)碼是30號(hào)，球隊(duì)是金州勇士隊(duì)

上賽季的FMVP是勒布朗詹姆斯，場(chǎng)上位置是小前鋒，球衣號(hào)碼是23號(hào)，球隊(duì)是克里夫蘭騎士隊(duì)

用JSON格式就可以表示為：

[{
 "MVP":"Stephen Curry",
 "position":"Point Guard",
 "number":"30",
 "team":"Golden State Warriors"
 },{
 "FMVP":"Lebron James",
 "position":"Small Forward",
 "number":"23",
 "team":"Cleveland Cavaliers"
 }]

更復(fù)雜的數(shù)據(jù)也可以使用JSON來進(jìn)行表示，比如下面這段信息：最喜歡的編輯器是sublime，最喜歡的運(yùn)動(dòng)是籃球，最喜歡的球隊(duì)是馬刺隊(duì)，馬刺隊(duì)控衛(wèi)有托尼帕克、帕蒂米爾斯，分衛(wèi)有馬努吉諾比利、丹尼格林，小前鋒有科懷倫納德、凱爾安德森，大前鋒有拉馬庫斯阿爾德里奇、大衛(wèi)李，中鋒有德維恩戴德蒙、保羅加索爾?！　?/p>

{
 "favoriteEditor": "sublime",
 "favoriteSport": "basketball",
 "favoriteTeam":{
 "Spurs":[
 {
  "PG":"Tony Parker",
  "SG":"Danny Green",
  "SF":"Kawhi Leonard",
  "PF":"LaMarcus Aldridge",
  "C":"Pau Gasol" 
 },
 {
  "PG":"Patty Mills",
  "SG":"Manu Ginobili",
  "SF":"Kyle Anderson",
  "PF":"David Lee",
  "C":"Dewayne Dedmon" 
 }
 ]
 }
 }

⑵ JSON的解析與序列化

① 通過eval()函數(shù)將JSON字符串解析為JavaScript原生值

var str = '[{"name":"james","height":"203","number":"23"}, {"name":"kobe","height":"198","number":"24"}]'; //定義JSON字符串
 var oJson = eval(str); //通過eval()函數(shù)解析拿到JavaScript原生值
 //接下來便可通過JS進(jìn)行操作
 alert(oJson[0].name); //james
 alert(oJson[1].height); //198

② 通過全局對(duì)象JSON的兩個(gè)方法parse()和stringify()進(jìn)行操作

parse()可以將JSON字符串轉(zhuǎn)化為JavaScript原生值：

var str = '[{"name":"james","height":"203","number":"23"},{"name":"kobe","height":"198","number":"24"}]';  //定義JSON字符串
 var oJson = JSON.parse(str); //通過JSON對(duì)象的parse方法得到該JSON字符串的JavaScript原生值
 document.write("姓名：" + oJson[1].name + "<br/>" + "身高：" + oJson[1].height + "cm" + "<br/>" + "球衣號(hào)碼：" + oJson[1].number);

parse()也可以傳第二個(gè)參數(shù)，此時(shí)可以在還原出JavaScript值的時(shí)候?qū)⒃堤鎿Q成自己想要的值，如下：

var str = '[{"name":"james","height":"203","number":"23"},{"name":"kobe","height":"198","number":"24"}]';
 var oJson = JSON.parse(str, function(key, value){
 if('name' == key){
 return '球員' + value;
 }else if('number' == key){
 return value + '號(hào)球衣';
 }else{
 return value;
 }
 });
 alert(oJson[0].name + '更牛逼還是' + oJson[1].name + '更牛逼' + '\n' + '你喜歡' + oJson[0].number + '還是' + oJson[1].number);

stringify()可以將原生JavaScript值轉(zhuǎn)換為JSON字符串：

 var oJson = [{
 name : "james",
 height : 203,
 number : 23
 },{
 name : "kobe",
 height : 198,
 number : 24
 }];
 var jsonStr = JSON.stringify(oJson,['name','number'],4);
 alert(jsonStr);

JSON.stringify(oJson,['name','number'],4);中的第一個(gè)參數(shù)表示需要轉(zhuǎn)化的JS對(duì)象；第二個(gè)參數(shù)用于過濾結(jié)果，表示只留下name和number，其他的key以及所對(duì)應(yīng)的的value都不要了；第三個(gè)參數(shù)表示在JSON字符串中保留的縮進(jìn)數(shù)，有縮進(jìn)時(shí)可讀性更高，該參數(shù)也可以是一個(gè)字符串，比如'----'，此時(shí)彈出結(jié)果如下：

如果不需要保留縮進(jìn)，那么最后一個(gè)參數(shù)空起來即可，但如果不需要進(jìn)行過濾，第二個(gè)參數(shù)需設(shè)置為null占位，不能空起來，否則最后一個(gè)參數(shù)也會(huì)失效。

第二個(gè)參數(shù)也可以是函數(shù)，函數(shù)可以進(jìn)行更加復(fù)雜的過濾：

var oJson = [{
 name : "james",
 height : 203,
 position : '小前鋒'
 },{
 name : "kobe",
 height : 198,
 position : '得分后衛(wèi)'
 }];
 var jsonStr = JSON.stringify(oJson,function(key,value){
 switch(key){
 case 'name':
 return '球員 ' + value;
 case 'height':
 return '身高 ' + value + 'cm';
 case 'position':
  return '位置 ' + value;
 default:
 return value;
 }
 },4);
 alert(jsonStr);