JSON

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的truefalse
  • 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ì)象了功戚。

序列化(JSON.stringify )

讓我們先把小明這個(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']
};

要輸出得好看一些娶眷,可以加上參數(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ù)先處理:

  • 傳入函數(shù)只會(huì)返回和改變value,name不會(huì)被改變
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}'

使用 JSON.stringify 結(jié)合 localStorage 的例子
一些時(shí)候灯萍,你想存儲(chǔ)用戶(hù)創(chuàng)建的一個(gè)對(duì)象轧铁,并且,即使在瀏覽器被關(guān)閉后仍能恢復(fù)該對(duì)象旦棉。下面的例子是 JSON.stringify 適用于這種情形的一個(gè)樣板:

// 創(chuàng)建一個(gè)示例數(shù)據(jù)
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 轉(zhuǎn)換為 JSON 字符串

// 然后使用 localStorage 保存在 session 名稱(chēng)里 

localStorage.setItem('session', JSON.stringify(session));

// 然后是如何轉(zhuǎn)換通過(guò) JSON.stringify 生成的字符串齿风,該字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));

// 現(xiàn)在 restoredSession 包含了保存在 localStorage 里的對(duì)象

console.log(restoredSession);


反序列化(JSON.parse())

拿到一個(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)換解析出的屬性:

  • 遍歷順序 : 遍歷順序是平級(jí)沒(méi)內(nèi)部屬性,先平級(jí),從內(nèi)向外的
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末救斑,一起剝皮案震驚了整個(gè)濱河市童本,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌系谐,老刑警劉巖巾陕,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異纪他,居然都是意外死亡鄙煤,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)茶袒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梯刚,“玉大人,你說(shuō)我怎么就攤上這事薪寓⊥鲎剩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵向叉,是天一觀(guān)的道長(zhǎng)锥腻。 經(jīng)常有香客問(wèn)我,道長(zhǎng)母谎,這世上最難降的妖魔是什么瘦黑? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮奇唤,結(jié)果婚禮上幸斥,老公的妹妹穿的比我還像新娘。我一直安慰自己咬扇,他們只是感情好甲葬,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著懈贺,像睡著了一般经窖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上梭灿,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天钠至,我揣著相機(jī)與錄音,去河邊找鬼胎源。 笑死棉钧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的涕蚤。 我是一名探鬼主播宪卿,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼的诵,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了佑钾?” 一聲冷哼從身側(cè)響起西疤,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎休溶,沒(méi)想到半個(gè)月后代赁,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡兽掰,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年芭碍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孽尽。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡窖壕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出杉女,到底是詐尸還是另有隱情瞻讽,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布熏挎,位于F島的核電站速勇,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏坎拐。R本人自食惡果不足惜快集,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望廉白。 院中可真熱鬧,春花似錦乖寒、人聲如沸猴蹂。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)磅轻。三九已至,卻和暖如春逐虚,著一層夾襖步出監(jiān)牢的瞬間聋溜,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工叭爱, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留撮躁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓买雾,卻偏偏與公主長(zhǎng)得像把曼,于是被迫代替她去往敵國(guó)和親杨帽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354