JavaScript常見JSON操作實例分析

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

目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、麻章網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1、JSON

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

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

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

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

(2)對象：無序的鍵值對。

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

3、JSON對象與JavaScript對象的不同

(1)屬性必須用雙引號（最好不要用單引號，可能會出問題）。

(2)末尾無分號。

(3)不支持變量。

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

(1)末尾無分號。

(2)不支持變量。

5、序列化

(1)JSON.stringify()方法

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

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

var person = {
  name: "Alice",
  age: 23,
  adult: true,
  friends: ["Bruce", "Cindy"]
};
var jsonText1 = JSON.stringify(person);//Date對象在序列化后變成了JSON字符串
var jsonText2 = JSON.stringify(person, ["name", "friends"]);//Date對象在序列化后變成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符將數(shù)組連接成一個字符串
  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個參數(shù)過濾器的補充。stringify()有時不能滿足某些對象進行自定義序列化的需求，則給對象定義toJSON()方法。

序列化對象的順序：

1)若存在toJSON()方法且能通過它取得有效的值，則調(diào)用這個方法。否則，返回對象本身。
2)如果提供了第2個參數(shù)，應(yīng)用此函數(shù)過濾器，傳入函數(shù)過濾器的值是第1步返回的值。
3)對第2步返回的每個值進行相應(yīng)的序列化。
4)如果提供了第3個參數(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對象在序列化后變成了JSON字符串
var jsonText2 = JSON.stringify(person, ["adult", "id", "friends"]);//Date對象在序列化后變成了JSON字符串
var jsonText3 = JSON.stringify(person, function(key, value) {
switch(key){
  case "friends":
    return value.join("|");//按指定分隔符將數(shù)組連接成一個字符串
  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對象（JSON對象）的第一種方法。

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

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

(4)jQuery.parseJSON()方法

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

需要先引入jQuery的js文件。

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

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

(5)JSON.parse()方法

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

接收2個參數(shù)：JSON字符串和可選的函數(shù)（在每個鍵值對上調(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

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

eg2：

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

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

在線JSON代碼檢驗、檢驗、美化、格式化工具：
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

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

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

文章標(biāo)題：JavaScript常見JSON操作實例分析
網(wǎng)頁地址：http://www.muchs.cn/article4/gcehoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信公眾號、App設(shè)計、網(wǎng)站內(nèi)鏈、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容