1 什麼是JSON? JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation) 是輕量級的文本數據交換格式,JSON 比 XML 更小、更快,更易解析。 2 JSON 語法規則 JSON 語法是 JavaScript 對象表示語法的子集。 數據在名稱 ...
1 什麼是JSON?
- JSON 指的是 JavaScript 對象表示法(JavaScript Object Notation)
- 是輕量級的文本數據交換格式,JSON 比 XML 更小、更快,更易解析。
2 JSON 語法規則
JSON 語法是 JavaScript 對象表示語法的子集。
- 數據在名稱/值對中
- 數據由逗號分隔
- 大括弧保存對象
- 中括弧保存數組
JSON 值可以是:字元串, 數字, 對象, 數組, 布爾值 或 null
JavaScript 的值可以是:JSON 數據類型,也可以是 JavaScript 的表達式,包括函數,日期,及 undefined
3 JSON和JavaScript對象之間的轉換
(1)JSON.parse()
作用:將json格式的字元串轉換為JavaScript對象
語法: JSON.parse(text[, reviver])
參數說明:
- text:必需, 一個有效的 JSON 字元串。
- reviver: 可選,一個轉換結果的函數, 將為對象的每個成員調用此函數。
返回值:對象或數組
示例一:
var jsonStr = '{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'; // json格式的字元串 var obj = JSON.parse(jsonStr); // JavaScript對象 document.write("name = " + obj.name); document.write("name = " + obj[name]); // 第二種寫法
示例二:
1 var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; 2 var obj = JSON.parse(text, function (key, value) { // 函數會遍歷字元串中所有key和value,得到返回的value 3 if (key == "initDate") { 4 return new Date(value); 5 } else { 6 return value; 7 }}); 8 document.write("創建日期:" + obj.initDate); // 輸出,創建日期:Sat Dec 14 2013 08:00:00 GMT+0800 (中國標準時間)
(2)JSON.stringify()
作用:將JavaScript對象轉換為json格式的字元串
語法: JSON.stringify(value[, replacer[, space]])
參數說明:
- text:必需, JavaScript對象或數組。
- replacer: 可選。用於轉換結果的函數或數組。
如果 replacer 是函數,則 JSON.stringify 將調用該函數,並傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined,則排除成員。根對象的鍵是一個空字元串:""。
如果 replacer 是數組,則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也為數組時,將忽略 replacer 數組。(意思就是,對象或數組中key值如果在數組中存在,才保留。不存在的就去掉)
- space: 可選,文本添加縮進、空格和換行符,如果 space 是一個數字,則返回值文本在每個級別縮進指定數目的空格,如果 space 大於 10,則文本縮進 10 個空格。space 也可以使用非數字,如:\t。
返回值:json格式的字元串
示例一:
var obj = { "name":"runoob", "initDate":new Date(), "alexa":10000}; var jsonStr= JSON.stringify(obj); document.write(jsonStr); // 輸出,{"name":"runoob","initDate":"2019-04-04T08:56:59.679Z","alexa":10000}
實例二:
1 函數 2 3 var obj = { "name":"Runoob", "age":23, "site":"www.runoob.com"}; 4 var jsonStr = JSON.stringify(obj, function(key,value){ 5 if (key == "age") { 6 return 55; 7 } 8 return value; 9 }, '\t'); 10 document.write(jsonStr); // 輸出,{"name":"Runoob","age":55,"site":"www.runoob.com"} 11 12 數組 13 14 var obj = { "name":"Runoob", "age":23, "site":"www.runoob.com"}; 15 var jsonStr = JSON.stringify(obj, [site,name], '\t'); // 保留數組中出現的對象的key值,按數組的順序 16 document.write(jsonStr); // 輸出,{"site":"www.runoob.com","name":"Runoob"}
(3)eval()
作用:使用的是 JavaScript 編譯器,可解析 JSON 文本,然後生成 JavaScript 對象。必須把文本包圍在括弧中,這樣才能避免語法錯誤
語法: var obj = eval ("(" + txt + ")");
參數說明:
- string:必需, 可以表示要計算的 JavaScript 表達式或要執行的語句。
返回值:返回計算string的值,如果有的話 (沒有則不做任何改變返回)
示例一:
// 表達式 eval("x=10;y=20;document.write(x*y)"); //output為200 document.write(eval("2+2")); //output為4 var x=10; document.write(eval(x+17)); //output為27 // json格式字元串 7 var json = '{"name":"GDT","age":23,"University":"GDUT"}'; 8 var info = eval('(' + json + ')'); //解析為JSON對象 9 document.write(info); //output為[object Object]
3.1 為什麼eval()要用一對圓括弧將字元串包起來?
- 原因:歸結於eval本身的問題,由於json是以”{}”的方式來開始以及結束的,在JS中,它會被當成一個語句塊來處理,所以必須強制性的將它轉換成一種表達式。
- 解決方法:加上圓括弧的目的是迫使eval函數在處理JavaScript代碼的時候強制將括弧內的表達式(expression)轉化為對象,而不是作為語句(statement)來執行。舉一個例子,例如對象字面量{},如若不加外層的括弧,那麼eval會將大括弧識別為JavaScript代碼塊的開始和結束標記,那麼{}將會被認為是執行了一句空語句。請看下列例子的不同
alert(eval("{}")); // return undefined alert(eval('('+'{}'+')')); // return object[Object]
另外,相對於寫法格式嚴格的JSON.parse()來說,eval()可以解析任何字元串,eval是不安全的,因為eval比較寬鬆,會有潛在的安全性問題。比如以下代碼:
var str1 = '{"a":"b"}'; document.write(eval("("+str1+")")); //正常解析為對象 var str2 = '{"a": (function(){alert("I can do something bad!");})()}'; eval('('+str2+')'); //可以用來執行木馬腳本
總結:第一次寫自己的技術博文,很多都是從其他地方借鑒的。畢竟是第一次寫,有不對的地方也請見諒,也暴露了我自己的邏輯思維需要提升了,講述一個問題的解答方法比理解一個問題更難,希望以後能靠自己就寫出好的博文,堅持就是勝利。
加油 2019!
【參考】
- https://www.cnblogs.com/DTBelieve/p/5346603.html JSON.parse()、JSON.stringify()、eval()講解
- http://www.runoob.com/json/json-tutorial.html JSON教程