溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript常見JSON操作。分享給大家供大家參考，具體如下：
1、JSON
JSON，JavaScript Object Notation)(JavaScript對象表示法) ，是存儲和交換文本信息的語法，是基于JavaScript的一個子集。數據格式簡單，易于讀寫，占用帶寬小，類似 XML，但JSON 比 XML更小、更快，更易解析。
JSON不支持變量、函數、對象實例，只是一種數據的格式。數據在鍵值對中，數據由逗號分隔。
2、JSON數據類型
(1)簡單數據類型：字符串、數值、布爾值，null（不支持JavaScript的 undefined）。
(2)對象：無序的鍵值對。
(3)數組：有序的值列表。
3、JSON對象與JavaScript對象的不同
(1)屬性必須用雙引號（最好不要用單引號，可能會出問題）。
(2)末尾無分號。
(3)不支持變量。
4、JSON數組與JavaScript數組的不同
(1)末尾無分號。
(2)不支持變量。
5、序列化
(1)JSON.stringify()方法
把JavaScript對象（JSON對象）序列化為JSON字符串的方法。默認情況下，輸出的JSON字符串不包含任何空格字符或縮進，同時會忽略JavScript對象的函數和原型對象。
接收3個參數：過濾器、可選的過濾器（可以是函數，也可以是數組）、可選的字符串縮進數。
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("|");//按指定分隔符將數組連接成一個字符串
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個參數過濾器的補充。stringify()有時不能滿足某些對象進行自定義序列化的需求，則給對象定義toJSON()方法。
序列化對象的順序：
toJSON()方法且能通過它取得有效的值，則調用這個方法。否則，返回對象本身。
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("|");//按指定分隔符將數組連接成一個字符串
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方法只能在非嚴格模式中進行使用,在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個參數：JSON字符串和可選的函數（在每個鍵值對上調用）。
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
注意：第一個參數是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對象，可以調用getFullYear()
PS：這里再為大家推薦幾款相關的json在線工具供大家參考：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉換工具：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans
更多關于JavaScript相關內容可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
