歡迎關(guān)注我的CSDN博客叉谜，里面發(fā)布了大量學(xué)習(xí)筆記。
https://xdr630.blog.csdn.net/
1. JSON 是什么院溺？
- JSON祠乃，全稱是 JavaScript Object Notation姨拥，即 JavaScript對象標記法绣檬。
- JSON是一種輕量級（Light-Meight)、基于文本的(Text-Based)缩焦、可讀的(Human-Readable)格式读虏。
- JSON 的名稱中雖然帶有JavaScript，但這是指其語法規(guī)則是參考JavaScript對象的袁滥，而不是指只能用于JavaScript 語言盖桥。
- JSON無論對于人，還是對于機器來說题翻，都是十分便于閱讀和書寫的揩徊，而且相比 XML(另一種常見的數(shù)據(jù)交換格式)，文件更小嵌赠，因此迅速成為網(wǎng)絡(luò)上十分流行的交換格式塑荒。
- 近年來JavaScript已經(jīng)成為瀏覽器上事實上的標準語言，JavaScript 的風(fēng)靡姜挺，與JSON 的流行也有密切的關(guān)系袜炕。
- 因為JSON本身就是參考JavaScript 對象的規(guī)則定義的，其語法與JavaScript定義對象的語法幾乎完全相同初家。
- JSON格式的創(chuàng)始人聲稱此格式永遠不升級，這就表示這種格式具有長時間的穩(wěn)定性乌助，10 年前寫的文件溜在，10年后也能用,沒有任何兼容性問題。
2. JSON 的語法規(guī)則是怎樣的他托？
JSON 的語法規(guī)則十分簡單掖肋，可稱得上“優(yōu)雅完美”，總結(jié)起來有：
- 數(shù)組（Array）用方括號(“
[]”)表示赏参。 - 對象（0bject）用大括號(“
{}”)表示志笼。 - 名稱/值對(
name/value）組合成數(shù)組和對象。 - 名稱(
name）置于雙引號中把篓，值（value）有字符串纫溃、數(shù)值、布爾值韧掩、null紊浩、對象和數(shù)組。 - 并列的數(shù)據(jù)之間用逗號(“
,”）分隔
{
"name": "xdr630",
"favorite": "programming"
}
3. JSON 和 XML
JSON常被拿來與XML做比較，因為JSON 的誕生本來就多多少少要有取代XNL的意思坊谁。相比 XML费彼，JSON的優(yōu)勢如下:
- 沒有結(jié)束標簽,長度更短,讀寫更快
- 能夠直接被JavaScript解釋器解析
- 可以使用數(shù)組
兩者比較
- JSON：
{
"name":"兮動人",
"age":22,
"fruits":["apple","pear","grape"]
}
- XML：
<root>
<name>兮動人</name>
<age>22</age>
<fruits>apple</fruits>
<fruits>pear</fruits>
<fruits>grape</fruits>
</root>
4. JSON的解析和生成（JSON 和 JS 對象互轉(zhuǎn)）
- 在JavaScript中，有兩個方法與此相關(guān):
JSON.parse和JSON.stringify口芍。
JSON 和 JS 對象互轉(zhuǎn)
- 要實現(xiàn)從JSON字符串轉(zhuǎn)換為JS對象箍铲，使用
JSON.parse()方法：
<script>
var str = '{"name": "兮動人","age":22}';
var obj = JSON.parse(str);
console.log(obj);
</script>
在這里插入圖片描述
- 要實現(xiàn)從JS對象轉(zhuǎn)換為JSON字符串，使用
JSON.stringify()方法：
<script>
var str = '{"name": "兮動人","age":22}';
var obj = JSON.parse(str);
console.log(obj);
var jsonstr = JSON.stringify(obj);
console.log(jsonstr);
</script>
在這里插入圖片描述
5. JSON格式規(guī)定
在這里插入圖片描述
1鬓椭、對象（0bject)
-
對象用大括號(“
{}”）括起來颠猴，大括號里是一系列的“名稱/值對”，請看概念圖膘融。
在這里插入圖片描述 兩個并列的數(shù)據(jù)之間用逗號(“
,”）隔開芙粱，注意兩點:
- 使用英文的逗號（“
,”)，不要用中文的逗號(“氧映，”) - 最后一個“
名稱/值對“之后不要加逗號
JSON在線檢查語法：https://www.json.cn/
-
這里報錯說明JSON中Key/Value不能使用單引號
在這里插入圖片描述 -
正確寫法
在這里插入圖片描述
2春畔、數(shù)組（Array）
-
數(shù)組表示一系列有序的值，用方括號(“
[]”)包圍起來岛都，并列的值之間用逗號分隔律姨，請看概念圖。
在這里插入圖片描述 例如臼疫，以下的數(shù)組是合法的:
[1,2,"three","four",true,false,null,[1,2],{"name":"兮動人"}]
在這里插入圖片描述
3择份、名稱/值對（Name/Value）
- 名稱（Name）是一個字符串，要用雙引號括起來烫堤，不能用單引號荣赶，也不能沒有引號，這一點與JavaScript不同鸽斟。
- 值的類型只有七種:
字符串（string)拔创、數(shù)值(number)、對象（object)富蓄、數(shù)組（array), true剩燥、false、null立倍。不能有這之外的類型灭红，例如undefined、函數(shù)等口注。請看概念圖变擒。
在這里插入圖片描述
字符串（string）的規(guī)則如下:
- 英文雙引號括起來,不能用單引號，也不能沒有疆导。
- 字符串中不能單獨出現(xiàn)雙引號（
”）和右斜杠（“\")赁项。 - 如果要打雙引號或右斜杠葛躏，需要使用“
右斜杠+字符”的形式，例如\”和\\悠菜，其它的轉(zhuǎn)義字符也是如此字符串的概念圖舰攒。
在這里插入圖片描述
- 轉(zhuǎn)義字符
{
"string":"\\ \" "
}
在這里插入圖片描述
-
數(shù)值類型，可以使用科學(xué)計數(shù)法表示
在這里插入圖片描述
{
"number":1e3,
"n1":1e2,
"n2":-100
}
在這里插入圖片描述
6. 字符串轉(zhuǎn)化成對象
在這里插入圖片描述
- 解析：是指將符合JSON 語法規(guī)則的字符串轉(zhuǎn)換成對象的過程悔醋。
- 不同的編程語言都提供了解析JSON字符串的方法摩窃，在這里主要講解JavaScript中的解析方法。主要有三種:
- 使用
eval() - 使用
JSON.parse() - 使用第三方庫,例如JQuery等
1芬骄、 eval()
-
eval(）函數(shù)的參數(shù)是一個字符串猾愿，其作用是直接執(zhí)行其中的 JavaScript代碼。 - 案例：eval()解析字符串
<script>
var str = "console.log('hello')";
eval(str);
</script>
- eval 解析字符串的結(jié)果：
在這里插入圖片描述
- eval(）能夠解析JSON字符串账阻。從這里也可以看得出蒂秘，JSON 和JavaScript是高度嵌合的。
- 案例：eval()解析JSON字符串
<script>
var str = '{"name":"兮動人","age":22}';
var obj = eval("("+str+")");
console.log(obj)
</script>
在這里插入圖片描述
- 但是,現(xiàn)在已經(jīng)很少直接使用eval()來解析了淘太，如果您的瀏覽器版本真的是很舊姻僧，可能才需要這個方法。此外蒲牧，eval()是一個相對危險的函數(shù)撇贺，因為字符串中可能含有未知因素。在這里冰抢，作為學(xué)習(xí)松嘶，還是要知道這也是一種方法。
- 請注意 eval()的參數(shù)挎扰，在字符串兩旁加了括號翠订，這是必須的，否則會報錯遵倦。
- 因為JSON字符串是被大括號（“
{}”）包圍的蕴轨，直接放到eval()會被當成語句塊來執(zhí)行，因此要在兩旁加上括號骇吭，使其變成表達式。
2歧寺、JSON. parse()
- 現(xiàn)在絕大多數(shù)瀏覽器都以支持
JSON.parse()燥狰，是推薦使用的方式。 - 如果輸入了不符合規(guī)范的字符串,會報錯斜筐。
案例：JSON字符串轉(zhuǎn)換為JS對象
<script>
var str = '{"name":"兮動人","age":22}';
var obj = JSON.parse(str)
console.log(obj)
</script>
在這里插入圖片描述
-
JSON.parse()可以有第二個參數(shù)龙致，是一個函數(shù)。此函數(shù)有兩個參數(shù):name和value顷链，分別代表名稱和值目代。當傳入一個JSON字符串后，JSON的每一組名稱/值對都要調(diào)用此函數(shù)。該函數(shù)有返回值榛了，返回值將賦值給當前的名稱(name)在讶。 - 利用第二個參數(shù)，可以在解析JSON字符串的同時對數(shù)據(jù)進行一些處理霜大。
案例：
<script>
var str = '{"name":"兮動人","age":22}';
var obj = JSON.parse(str,fun);
function fun(name,value){
console.log(name+":"+value);
return value
}
console.log(obj)
</script>
在這里插入圖片描述
- 可以做判斷處理构哺，當JSON字符串的 name=age 時，設(shè)置age的value=14
<script>
var str = '{"name":"兮動人","age":22}';
var obj = JSON.parse(str,fun);
function fun(name,value){
if (name == "age")
value = 14;
return value
}
console.log(obj)
</script>
在這里插入圖片描述
7. JS對象轉(zhuǎn)化為字符串
在這里插入圖片描述
- 序列化战坤，指將 JavaScript 值轉(zhuǎn)化為JSON字符串的過程曙强。
-
JSON.stringify(）能夠?qū)avaScript值轉(zhuǎn)換成JSON字符串。JSON.stringify()生成的字符串可以用JSON.parse()再還原成JavaScript值途茫。
1碟嘴、參數(shù)的含義
JSON.stringify(value[, replacer[, space]])
-
value:必選參數(shù)。被變換的JavaScript值囊卜，一般是對象或數(shù)組娜扇。 -
replace:可以省略。有兩種選擇:函數(shù)或數(shù)組边败。
- 如果是函數(shù)袱衷，則每一組名稱/值對都會調(diào)用此函數(shù)，該函數(shù)返回一個值笑窜，作為名稱的值變換到結(jié)果字符串中,如果返回
undefined致燥，則該成員被忽略。
案例：
<script>
var obj = {
name: "兮動人",
age: 22
};
console.log(obj);
var jsonstr = JSON.stringify(obj,fun);
function fun(name,value) {
if (name=="age")
value = 18;
return value;
}
console.log(jsonstr)
</script>
在這里插入圖片描述
- 如果是數(shù)組排截，則只有數(shù)組中存在名稱才能夠被轉(zhuǎn)換嫌蚤，且轉(zhuǎn)換后順序與數(shù)組中的值保持一致。
- 案例：
<script>
var obj = {
a: 1,
b: 2,
c: 3,
d: 4
};
console.log(obj);
var jsonstr = JSON.stringify(obj,["a","b","c"]);
console.log(jsonstr)
</script>
在這里插入圖片描述
- 把順序改下断傲，對應(yīng)轉(zhuǎn)換的JSON字符串的數(shù)值不變
var jsonstr = JSON.stringify(obj,["c","a","b"]);
在這里插入圖片描述
-
space:可以省略脱吱。這是為了排版、方便閱讀而存在的认罩∠潋穑可以在JSON字符串中添加空白或制表符等。
2垦垂、value的用法
<script>
var obj = {
name: "兮動人",
age: 22
}
console.log(obj);
var jsonstr = JSON.stringify(obj);
console.log(jsonstr)
</script>
在這里插入圖片描述
- 當有不符合JSON語法規(guī)則時宦搬，就不會被轉(zhuǎn)換成JSON字符串。
- 數(shù)組中有函數(shù)時會被轉(zhuǎn)換成
null
<script>
var obj = {
name: "兮動人",
age: 22,
a: undefined,
f: function () {
},
b:[function () {}]
}
console.log(obj);
var jsonstr = JSON.stringify(obj);
console.log(jsonstr)
</script>
在這里插入圖片描述
3劫拗、replace的用法
4间校、space的用法
- 案例：在上面的基礎(chǔ)上添加
<script>
var obj = {
a: 1,
b: 2,
c: 3,
d: 4
};
console.log(obj);
var jsonstr = JSON.stringify(obj,["c","a","b"],"one");
console.log(jsonstr)
</script>
在這里插入圖片描述
- 改成制表符：
\t
<script>
var obj = {
a: 1,
b: 2,
c: 3,
d: 4
};
console.log(obj);
var jsonstr = JSON.stringify(obj,["c","a","b"],"\t");
console.log(jsonstr)
</script>
在這里插入圖片描述
