JSON簡介以及用法匯總
JSON（JavaScript Object Notation）即JavaScript對象表示法，是一種輕量級的數(shù)據(jù)交換格式。它非常便于編程人員對數(shù)據(jù)的處理，也便于機(jī)器對數(shù)據(jù)的解析和生成，應(yīng)用非常廣泛。
JSON是一種輕量級的數(shù)據(jù)交換格式，某個JSON格式的文件內(nèi)部譬如可以長成這樣：
{
"name": "hanzichi",
"sex": "male"
}
看起來都是key-value的鍵值對，很像js的對象吧？沒錯，但同時JSON表示不服，我不能跟js的對象長成一樣啊，我得有我自己的個性，于是規(guī)定鍵-值對中的鍵 必須用雙引號 ！同時規(guī)定鍵-值對中的值的取值有一定要求：
JSON 值可以是：
數(shù)字（整數(shù)或浮點數(shù)）
字符串（ 在雙引號中 ）
邏輯值（true 或 false）
數(shù)組（在方括號中）
對象（在花括號中）
null
除以上6種外，再無其他，沒有像js一樣的undefined、NAN，JSON拒絕使用。
如何使用JSON？
JSON一般以字符串的形式在數(shù)據(jù)交互過程中游走，so對于js而言，如何將json字符串和js對象之間進(jìn)行相互轉(zhuǎn)換顯得尤為重要。
eval大法（json字符串 -> js對象）
var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var ans = eval('(' + jsonStr + ')');
console.log(ans.name, ans.sex); // hanzichi male
eval 函數(shù)非常快，但是它可以編譯任何 javascirpt 代碼，這樣的話就可能產(chǎn)生安全的問題。eval 的使用是基于傳入的代碼參數(shù)是可靠的假設(shè)下，有一些情況下，可能客戶端是不可信任的。如果基于安全的考慮的話，最好是使用一個JSON解析器，一個JSON 解析器將只接受JSON文本，所以是更安全的，如下。
JSON.parse（json字符串 -> js對象）
var jsonStr = '{"name": "hanzichi", "sex": "male"}';
var obj = JSON.parse(jsonStr);
console.log(typeof obj, obj); // object Object {name: "hanzichi", sex: "male"}
第二個參數(shù)可以是函數(shù)，可以對值進(jìn)行刪改：
var jsonStr = '{"name": "hanzichi", "sex": "male", "age": 10}';
var obj = JSON.parse(jsonStr, function(key, value) {
if(key === 'name') {
return 'my name is ' + value;
}
return value;
});
console.log(typeof obj, obj); // object Object {name: "my name is hanzichi", sex: "male", age: 10}
JSON.stringify（js對象 -> json字符串）
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"hanzichi","sex":"male","age":"10"}
也可以加個參數(shù)，規(guī)定需要轉(zhuǎn)化為json字符串的屬性（數(shù)組形式，跟數(shù)組同名的js對象屬性才會被轉(zhuǎn)換）：
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, ['name']);
console.log(jsonStr); // {"name":"hanzichi"}
第二個參數(shù)也可以是個函數(shù)，可以刪選符合條件的屬性（或者改變屬性值，沒有return表示放棄該屬性，return的值表示該key在json字符串中的值）
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, function(key, value) {
if(key === 'name') {
return 'my name is ' + value;
}
return value;
});
console.log(jsonStr); // {"name":"my name is hanzichi","sex":"male","age":"10"}
還可以有第三個參數(shù)，可以是數(shù)字或者字符串。
如果是數(shù)字的話，表示縮進(jìn)，數(shù)字大小超過10了按10處理。
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 4);
console.log(jsonStr);
// {
// "name": "hanzichi",
// "sex": "male",
// "age": "10"
// }
也可以是字符串，會在屬性前加上這些字符串充當(dāng)前綴，同樣字符串長度超過10只截取10：
var obj = {name: 'hanzichi', sex: 'male', age: '10'};
var jsonStr = JSON.stringify(obj, null, 'pre');
console.log(jsonStr);
// {
// pre"name": "hanzichi",
// pre"sex": "male",
// pre"age": "10"
// }
這里我有個疑問，我覺得輸出應(yīng)該是如下形式才對啊...
{
"prename": "hanzichi",
"presex": "male",
"preage": "10"
}
麻煩有知道的大大能傾情告訴我...
總結(jié)
當(dāng)然傳說中的ie8（及以下）因為某種缺陷不能使用JSON.parse()以及JSON.stringify()方法，而eval()又顯得不安全，如果要兼容它們的話可以引用 json2.js 。
以上內(nèi)容給大家介紹了JSON簡介以及用法匯總，希望對大家有所幫助！
相關(guān)文章
網(wǎng)上收集的一些經(jīng)典特效，這里因為篇幅較長，不加整理了，想運(yùn)行的代碼的朋友可以點擊textarea中，全選復(fù)制即可。2010-07-07
這篇文章主要介紹了datagrid使用方法（重要）,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
鼠標(biāo)事件的移動及移出效果都可以使用js來自定義，下面有個示例，實，效果為當(dāng)事件發(fā)生改變時背景顏色也隨著改變2014-10-10
JavaScript仿商城實現(xiàn)圖片廣告輪播實例代碼
大家在逛購物商城的時候不知道有沒有注意到商城首頁上面都會有各種輪播廣告，效果非常好，下面小編給大家整理特此分享給大家學(xué)習(xí)2016-02-02
這篇文章主要介紹了深入學(xué)習(xí)JS?XML和Fetch請求，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
JavaScript 實現(xiàn)網(wǎng)頁打印處理
JavaScript 實現(xiàn)網(wǎng)頁打印處理...2007-04-04
這篇文章主要介紹了JavaScript獲取Excel表格的列序號和列名，在處理Excel文件時，通常要獲取xx列的數(shù)據(jù)，這就要求先找到列序號，下文關(guān)于列名獲取需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了JS查找孩子節(jié)點,結(jié)合完整實例形式分析了javascript節(jié)點遍歷、查找相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
JavaScript中isPrototypeOf函數(shù)作用和使用實例
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)作用和使用實例,本文講解了它的作用和使用方法以及使用實例,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于uniapp圖片展示自適應(yīng)等比例縮放方法的相關(guān)資料,在uniapp頁面展示中會遇到圖片展示問題,等比縮放或者自適應(yīng)view大小,需要的朋友可以參考下2023-10-10