JavaScript常見(jiàn)JSON操作實(shí)例分析

2019-11-19 13:19:17

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JavaScript常見(jiàn)JSON操作。分享給大家供大家參考，具體如下：

1、JSON

JSON，JavaScript Object Notation)(JavaScript對(duì)象表示法) ，是存儲(chǔ)和交換文本信息的語(yǔ)法，是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單，易于讀寫(xiě)，占用帶寬小，類(lèi)似 XML，但JSON 比 XML更小、更快，更易解析。

JSON不支持變量、函數(shù)、對(duì)象實(shí)例，只是一種數(shù)據(jù)的格式。數(shù)據(jù)在鍵值對(duì)中，數(shù)據(jù)由逗號(hào)分隔。

2、JSON數(shù)據(jù)類(lèi)型

(1)簡(jiǎn)單數(shù)據(jù)類(lèi)型：字符串、數(shù)值、布爾值，null（不支持JavaScript的 undefined）。

(2)對(duì)象：無(wú)序的鍵值對(duì)。

(3)數(shù)組：有序的值列表。

3、JSON對(duì)象與JavaScript對(duì)象的不同

(1)屬性必須用雙引號(hào)（最好不要用單引號(hào)，可能會(huì)出問(wèn)題）。

(2)末尾無(wú)分號(hào)。

(3)不支持變量。

4、JSON數(shù)組與JavaScript數(shù)組的不同

(1)末尾無(wú)分號(hào)。

(2)不支持變量。

5、序列化

(1)JSON.stringify()方法

把JavaScript對(duì)象（JSON對(duì)象）序列化為JSON字符串的方法。默認(rèn)情況下，輸出的JSON字符串不包含任何空格字符或縮進(jìn)，同時(shí)會(huì)忽略JavScript對(duì)象的函數(shù)和原型對(duì)象。

接收3個(gè)參數(shù)：過(guò)濾器、可選的過(guò)濾器（可以是函數(shù)，也可以是數(shù)組）、可選的字符串縮進(jìn)數(shù)。

var person = {  name: "Alice",  age: 23,  adult: true,  friends: ["Bruce", "Cindy"]};var jsonText1 = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date對(duì)象在序列化后變成了JSON字符串var jsonText3 = JSON.stringify(person, function(key, value) {switch(key){  case "friends":    return value.join("|");//按指定分隔符將數(shù)組連接成一個(gè)字符串  case "age":    return value + 1;  case "adult":    return undefined;//返回undefined則刪除此屬性  default:    return value;//其他值正常顯示  }});var jsonText4 = JSON.stringify(person, null, 4);alert(jsonText1);//{"name":"Alice","age":23,"adult":true,"friends":["Bruce", "Cindy"]}alert(jsonText2);//{"name":"Alice","friends":["Bruce", "Cindy"]}alert(jsonText3);//{"name":"Alice","age":24,"friends":["Bruce|Cindy"]}alert(jsonText4);/*{  "name":"Alice",  "age":23,  "adult":true,  "friends":[    "Bruce",    "Cindy"  ]}*/

(2)toJSON()方法

作為stringify()方法中第2個(gè)參數(shù)過(guò)濾器的補(bǔ)充。stringify()有時(shí)不能滿(mǎn)足某些對(duì)象進(jìn)行自定義序列化的需求，則給對(duì)象定義toJSON()方法。

序列化對(duì)象的順序：

1)若存在toJSON()方法且能通過(guò)它取得有效的值，則調(diào)用這個(gè)方法。否則，返回對(duì)象本身。
2)如果提供了第2個(gè)參數(shù)，應(yīng)用此函數(shù)過(guò)濾器，傳入函數(shù)過(guò)濾器的值是第1步返回的值。
3)對(duì)第2步返回的每個(gè)值進(jìn)行相應(yīng)的序列化。
4)如果提供了第3個(gè)參數(shù)，執(zhí)行相應(yīng)的格式化。

var person = {  name: "Alice",  age: 23,  adult: true,  friends: ["Bruce", "Cindy"],  toJSON:function(){    return {"name":"Alice","id":23,"friends":["Bruce", "Cindy"]};  }};var jsonText1 = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date對(duì)象在序列化后變成了JSON字符串var jsonText3 = JSON.stringify(person, function(key, value) {switch(key){  case "friends":    return value.join("|");//按指定分隔符將數(shù)組連接成一個(gè)字符串  case "id":    return value - 1;  case "age":    return value + 1;//返回undefined則刪除此屬性  default:    return value;//其他值正常顯示  }});var jsonText4 = JSON.stringify(person, null, 4);alert(jsonText1);//{"name":"Alice", "id":23, "friends":["Bruce", "Cindy"]};alert(jsonText2);//{"id":23,"friends":["Bruce", "Cindy"]}alert(jsonText3);//{"name":"Alice","id":22,"friends":["Bruce|Cindy"]}alert(jsonText4);/*{  "name":"Alice",  "id":23,  "friends":[    "Bruce",    "Cindy"  ]}*/

(3)eval()方法

把JSON字符串解析成JavaScript對(duì)象（JSON對(duì)象）的第一種方法。

var JSText = eval('(' + '{"name":"Alice", "friends":["Bruce", "Cindy"]}' + ')');alert(JSText.friends);//Bruce,Cindy

注意：eval方法只能在非嚴(yán)格模式中進(jìn)行使用,在use strict中是不允許使用這個(gè)方法的。

(4)jQuery.parseJSON()方法

把JSON字符串解析成JavaScript對(duì)象（JSON對(duì)象）的第二種方法。

需要先引入jQuery的js文件。

var JSText = jQuery.parseJSON('{"name":"Alice", "friends":["Bruce", "Cindy"]}');alert(JSText.friends);//Bruce,Cindy

注意：從jQuery 3.0開(kāi)始，不推薦使用jQuery.parseJSON()方法，要解析JSON字符串，請(qǐng)改用原生的JSON.parse()方法。

(5)JSON.parse()方法

把JSON字符串解析成JavaScript對(duì)象（JSON對(duì)象）的第三種方法。

接收2個(gè)參數(shù)：JSON字符串和可選的函數(shù)（在每個(gè)鍵值對(duì)上調(diào)用）。

eg1：

var JSText1 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}');var JSText2 = JSON.parse('{"name":"Alice", "friends":["Bruce", "Cindy"]}', function(key, value) {  if (key == "friends")      return value.join("&");    else      return value;});alert(JSText1.friends);//Bruce,Cindyalert(JSText2.friends);//Bruce&Cindy

注意：第一個(gè)參數(shù)是JSON字符串，因此JSON對(duì)象需要用引號(hào)引住。

eg2：

var person = {  name: "Alice",  age: 23,  birthday: new Date(1993, 12, 6)//保存了一個(gè)Date對(duì)象};var jsonText = JSON.stringify(person);//Date對(duì)象在序列化后變成了JSON字符串a(chǎn)lert(jsonText);//{"name":"Alice","age":23,"birthday":"1994-01-05T16:00:00:000Z"}var JSText = JSON.parse(jsonText, function(key, value) {//解析在JSText中還原了Date對(duì)象，則JSText.birthdat屬性中會(huì)保存一個(gè)Date對(duì)象  if (key == "birthday")    return new Date(value);  else    return value;});alert(JSText.birthday.getFullYear());//1994，已是Date對(duì)象，可以調(diào)用getFullYear()

PS：這里再為大家推薦幾款相關(guān)的json在線工具供大家參考：

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.VeVB.COm/code/json

JSON在線格式化工具：
http://tools.VeVB.COm/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.VeVB.COm/code/json_yasuo_trans

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

上一篇：angularJs中$http獲取后臺(tái)數(shù)據(jù)的實(shí)例講解

下一篇：vue.js與后臺(tái)數(shù)據(jù)交互的實(shí)例講解