JSON 數(shù)據(jù)詳解及實(shí)例代碼分析
JSON 數(shù)據(jù)詳解
一、json值的類型
1.簡單值: 可以表示字符串,數(shù)值,布爾值,null不支持undefined(json的數(shù)值表示: 2 )
2.對象: 一組有序的鍵值對,每個鍵值對的值可以是簡單值,也可以是復(fù)雜數(shù)據(jù)類型。(json的字符串:“hello world”)。json字符串與JavaScript字符串的區(qū)別,json必須用雙引號。
3.數(shù)組:一組有序值的列表,數(shù)組的值可以是簡單值,也可以是復(fù)雜數(shù)據(jù)類型。
不支持變量,函數(shù),以及對象實(shí)例
二、json對象與javascript對象
區(qū)別:
//javascript對象
var obj = {
name: "liu",
age: 33,
};
// json對象
{
"name": "liu",
"age": 33,
}
- 沒有聲明變量(json中沒有變量的說法)
- 沒有末尾分號()
- json中屬性也要加雙引號
三、字符串與json對象轉(zhuǎn)換
1、JSON.parse()。parse把字符串解析成原生javascript值(javascript對象);每個屬性名都必須用雙引號
var str = '{"name":"huangxiaojian","age":"23"}';
console.log(JSON.parse(str)); //Object { name: "huangxiaojian", age: "23" }
接收另一個參數(shù),為區(qū)別JSON.stringify()的過濾函數(shù)(過濾器), 因而叫還原函數(shù)。如下:
var book = {
title: "hello",
author: [ "apple" ],
year: 300,
releaseDate: new Date(2016)
};
var jsonText = JSON.stringify( book )
var bookCopy = JSON.parse( jsonText, function( key, value ) {
if (key == "releaseDate" ) {
return new Date( value );
} else {
return value;
}
} );
console.log( bookCopy.releaseDate.getFullYear() );
以上代碼book對象,有個releaseDate屬性,保存Date對象,經(jīng)過序列化后變成有效的JSON數(shù)據(jù)字符串,然后經(jīng)過解析又在bookCopy中還原為一個Date對象,當(dāng)遇到releaseDate鍵值時,會基于相應(yīng)的值創(chuàng)建一個新的Date對象,結(jié)果就是bookCopy.releaseDate屬性中保存一個新的Date對象。
2、JSON.stringify( object, selector, retract ) 對象,過濾器(數(shù)組或函數(shù)),保留縮進(jìn)。
JSON.stringify()把json對象序列化為字符串。(忽略函數(shù)、原型)
var a = {a:1,b:2};
console.log(JSON.stringify(a)); //{"a":1,"b":2}不包含任何空格字符或縮進(jìn)
3、JSON.stringify()第二個參數(shù),過濾器為數(shù)組
過濾器:可以使數(shù)組(如果是數(shù)組,就把數(shù)組中有的屬性保留),也可以是函數(shù)(如果是函數(shù),傳兩個參數(shù):屬性和屬性值)。
var person = {
name: "liu",
age: 33,
eat: [ "apple" ],
sex: "man"
}
var jsonText = JSON.stringify( person, ["eat", "age" ] )
console.log( jsonText ) //{"eat":["apple"],"age":33}
4、JSON.stringify()第二個參數(shù)為函數(shù)
函數(shù):函數(shù)的兩個參數(shù)()。switch中參數(shù)是屬性名(必須字符串)。如果是undefined則忽略屬性,(這個value參數(shù)是整個序列化后的對象)
特別注意,value在《javascript高級程序設(shè)計(jì)第三版》中表述和我的不同??赡苁俏业睦斫庥袉栴},但是我測試了,結(jié)果也是序列化后的值。誰能解決了可以告訴我。(page:566~567)
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
var jsonText = JSON.stringify( person, function( key, value ) {
// console.log( value )
switch("eat") {
case "eat":
return [3,4,5,5,5].join(",");
case "age":
return 33;
case "sex":
return undefined;
default:
return value;
}
} )
console.log( jsonText ) //"3,4,5,5,5"
5、縮進(jìn),最大縮進(jìn)為10。超過10 會轉(zhuǎn)換為10
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
var jsonText = JSON.stringify( person, null, 4 )
console.log( jsonText )
/////////////////////////結(jié)果,帶有格式////////////////////
{
"name": "liu",
"age": 33,
"eat": [
"apple"
],
"sex": "man"
}
//特別的縮進(jìn)方式
var jsonText = JSON.stringify( person, null, "---" )
console.log( jsonText )
/////////////////////////結(jié)果,帶有格式////////////////////
{
---"name": "liu",
---"age": 33,
---"eat": [
------"apple"
---],
---"sex": "man"
}
6、toJSON()方法,返回自身的json數(shù)據(jù)格式。
var date = new Date()
console.log( date.toJSON() )
//person自身沒有json數(shù)據(jù)格式,這是錯的。
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man"
}
console.log( person.toJSON() )
7、為對象添加toJSON()方法,返回字符串則是字符串格式,對象則是對象格式,單個數(shù)值就是數(shù)值格式。
var person = {
"name": "liu",
"age": 33,
"eat": [ "apple" ],
"sex": "man",
"toJSON": function () {
return this.age
}
}
console.log( person.toJSON() ) // 33
toJSON()可以做過濾器補(bǔ)充
8、假設(shè)一個對象傳入JSON.stringify(),序列化該對象的順序
- 存在toJSON()方法,且能獲取有效值,則調(diào)用該方法,否則按默認(rèn)順序序列化。
- 如果提供了第二個參數(shù),應(yīng)用這個函數(shù)過濾器,傳入函數(shù)過濾器的值是第1步的返回值。
- 對第2步返回的每個值進(jìn)行序列化。
- 如果提供了第三個參數(shù),執(zhí)行相應(yīng)的格式化。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- JS對象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- $.ajax json數(shù)據(jù)傳遞方法
- android客戶端從服務(wù)器端獲取json數(shù)據(jù)并解析的實(shí)現(xiàn)代碼
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
- Android中使用Gson解析JSON數(shù)據(jù)的兩種方法
- 淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
- jquery的ajax異步請求接收返回json數(shù)據(jù)實(shí)例
- JAVA對象JSON數(shù)據(jù)互相轉(zhuǎn)換的四種常見情況
相關(guān)文章
js從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s從數(shù)組中刪除指定值(不是指定位置)的元素實(shí)現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
javascript 面向?qū)ο髮?shí)戰(zhàn)思想分享
萬物皆對象,所以,任何事物都是有特征(屬性)和動作(方法)的,一般拿到一份需求分檔,或者你瀏覽一個網(wǎng)頁看到一個畫面的時候,腦子里就要有提煉出來的屬性和方法的能力,那你才是合格的2017-09-09
JavaScript 以對象為索引的關(guān)聯(lián)數(shù)組
我們常說JavaScript原生支持json,因?yàn)槲覀兛梢哉J(rèn)為json就是對JavaScript的Object對象的靈活應(yīng)用。2010-05-05
javascript框架設(shè)計(jì)讀書筆記之種子模塊
本文是司徒正美的《javascript框架設(shè)計(jì)》一書第一章種子模塊的讀書筆記,記錄了一下自認(rèn)為比較重要的東西,分享給大家2014-12-12
JS實(shí)現(xiàn)簡單移動端鼠標(biāo)拖拽
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單移動端鼠標(biāo)拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
js關(guān)閉瀏覽器窗口及檢查瀏覽器關(guān)閉事件
js關(guān)閉瀏覽器窗口,不彈出提示框。支持ie6+,火狐,谷歌等瀏覽器,下面以一個示例為大家詳細(xì)介紹下具體的實(shí)現(xiàn)方法,感興趣的朋友可以參考下2013-09-09

