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

更新時(shí)間：2018年08月08日 10:21:04 作者：筱葭

這篇文章主要介紹了JavaScript常見(jiàn)JSON操作,簡(jiǎn)單描述了json的概念、常見(jiàn)json類型,并結(jié)合實(shí)例形式分析了json的序列化、轉(zhuǎn)換、格式化、解析等相關(guān)操作技巧,需要的朋友可以參考下

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

1、JSON

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

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

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

(1)簡(jiǎn)單數(shù)據(jù)類型：字符串、數(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í)不能滿足某些對(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,Cindy
alert(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字符串
alert(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.jb51.net/code/json

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

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

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

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

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

您可能感興趣的文章: