前端學習之 JavaScript 之 JSON

時間 2019-12-09

標籤前端學習 javascript json 欄目 JavaScript 简体版

原文原文鏈接

一．JSON的簡介

1.什麼是JSON

JSON 英文全稱 JavaScript Object Notationhtml

JSON 是一種輕量級的數據交換格式。python

JSON是獨立的語言 *編程

JSON 易於理解。json

2.json的起源

在JSON出現以前，你們一直用XML來傳遞數據。由於XML是一種純文本格式，因此它適合在網絡上交換數據。XML自己不算複雜，可是，加上DTD、XSD、XPath、XSLT等一大堆複雜的規範之後，任何正常的軟件開發人員碰到XML都會感受頭大了，最後你們發現，即便你努力鑽研幾個月，也未必搞得清楚XML的規範。數組

終於，在2002年的一天，道格拉斯·克羅克福特（Douglas Crockford）同窗爲了拯救深陷水深火熱同時又被某幾個巨型軟件企業長期愚弄的軟件工程師，發明了JSON這種超輕量級的數據交換格式。服務器

道格拉斯同窗長期擔任雅虎的高級架構師，天然鍾情於JavaScript。他設計的JSON其實是JavaScript的一個子集。網絡

3.json的數據類型及表示

number：和JavaScript的number徹底一致；架構

boolean：就是JavaScript的true或false；編程語言

string：就是JavaScript的string；函數

null：就是JavaScript的null；

array：就是JavaScript的Array表示方式——[]；

object：就是JavaScript的{ ... }表示方式。

以及上面的任意組合。

而且，JSON還定死了字符集必須是UTF-8，表示多語言就沒有問題了。爲了統一解析，JSON的字符串規定必須用雙引號""，Object的鍵也必須用雙引號""。

因爲JSON很是簡單，很快就風靡Web世界，而且成爲ECMA標準。幾乎全部編程語言都有解析JSON的庫，而在JavaScript中，咱們能夠直接使用JSON，由於JavaScript內置了JSON的解析。

把任何JavaScript對象變成JSON，就是把這個對象序列化成一個JSON格式的字符串，這樣纔可以經過網絡傳遞給其餘計算機。

若是咱們收到一個JSON格式的字符串，只須要把它反序列化成一個JavaScript對象，就能夠在JavaScript中直接使用這個對象了。

(1)JSON 數字

JSON 數字能夠是整型或者浮點型：

{ "age":30 }

(2)JSON 布爾值

JSON 布爾值能夠是 true 或者 false：

{ "flag":true }

(3)JSON string

JSON的數據能夠是字符串類型

{ "name":"hsz" }

(4)JSON null

JSON 能夠設置 null 值：

{ "sex":null }

(5)JSON 數組

JSON 數組在中括號中書寫：

數組可包含多個對象：

var JSONArray= { "personinfo":[

{"name":"hsz",}

{"age": 25, }

{"slogan":"學就是了！"}

]

};

(6)JSON 對象

JSON 對象在大括號（{}）中書寫：

對象能夠包含多個名稱/值對：(相似於python的字典)

{ "name":"hsz" , "url":"https://home.cnblogs.com/u/hszstudypy/" }

二．JOSN 對象與JSON 數組介紹

1.JSON對象

(1)對象語法

{ "name":"hsz", "alexa":10000, "site":null }

JSON 對象使用在大括號({})中書寫。

對象能夠包含多個 key/value（鍵/值）對。

key 必須是字符串，value 能夠是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

key 和 value 中使用冒號(:)分割。

每一個 key/value 對使用逗號(,)分割。

(2)訪問對象值

你能夠使用點號（.）來訪問對象的值：

例：

<body>

<p>你能夠使用點號（.）來訪問 JSON 對象的值：</p>

var myObj, x;

myObj = { "name":"hsz", "alexa":10000, "site":"www.hsz.com" };

x = myObj.site;

document.getElementById("demo").innerHTML = x;

</script>

</body>

(3)嵌套 JSON 對象

例：

<body>

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

document.getElementById("demo").innerHTML += myObj.sites.site2 + "<br>";

// 或者

document.getElementById("demo").innerHTML += myObj.sites["site2"];

</script>

</body>

(4)修改值

你能夠使用點號(.)來修改 JSON 對象的值：

<body>

var myObj, i, x = "";

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

document.getElementById("demo").innerHTML += myObj.sites["site2"];

myObj.sites.site1 = "www.google.com";

for (i in myObj.sites) {

x += myObj.sites[i] + "<br>";

}

document.getElementById("demo1").innerHTML = myObj.name;

document.getElementById("demo2").innerHTML = myObj.sites.site1;

</script>

</body>

(5)刪除 JSON 對象的屬性

咱們能夠使用 delete 關鍵字來刪除 JSON 對象的屬性：

delete myObj.sites.site1;

或

delete myObj.sites["site1"]

例：

<body>

var myObj, i, x = "";

myObj = {

"name":"hsz",

"alexa":10000,

"sites": {

"site1":"www.hsz.com",

"site2":"one.hsz.com",

"site3":"two.hsz.com"

}

delete myObj.sites.site1;

for (i in myObj.sites) {

x += myObj.sites[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

(6)JavaScript 建立 JSON 對象

例：

<!DOCTYPE html>

<html>

<head>

<title>菜鳥教程(runoob.com)</title>

</head>

<body>

<h2>JavaScript 建立 JSON 對象</h2>

<p>

網站名稱: <span id="jname"></span><br />

網站地址: <span id="jurl"></span><br />

網站 slogan: <span id="jslogan"></span><br />

</p>

var JSONObject= {

"name":"hsz",

"url":"https://home.cnblogs.com/u/hszstudypy/",

"slogan":"學就是了！"

};

document.getElementById("jname").innerHTML=JSONObject.name

document.getElementById("jurl").innerHTML=JSONObject.url

document.getElementById("jslogan").innerHTML=JSONObject.slogan

</script>

</body>

</html>

2.JSON 數組

(1)數組做爲 JSON 對象

[ "Google", "baidu", "taobao" ]

JSON 數組在中括號中書寫。

JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

JavaScript 中，數組值能夠是以上的 JSON 數據類型，也能夠是 JavaScript 的表達式，包括函數，日期，及 undefined。

(2)JSON 對象中的數組

對象屬性的值能夠是一個數組：

var myObj

myObj = {

"person":"人",

"num":3,

"name":[ "zero", "one", "two" ]

}

咱們能夠使用索引值來訪問數組：

myObj.sites[1]

// 值爲one

(3)循環數組

你能夠使用 for-in 來訪問數組：

例：

<body>

var myObj, i, x = "";

myObj = {

"person":"人",

"num":3,

"name":[ "zero", "one", "two" ]

};

for (i in myObj.name) {

x += myObj.name[i] + "<br>";

}

document.getElementById("demo").innerHTML = x;

</script>

</body>

(4)嵌套 JSON 對象中的數組

JSON 對象中數組能夠包含另一個數組，或者另一個 JSON 對象：

例：

<body>

var myObj, i, j, x = "";

myObj = {

"name":"我的數據",

"num":3,

"person": [

{ "name":"one", "info":[ 24, "男", "翻譯官" ] },

{ "name":"two", "info":[ 20, "女", "學生" ] },

{ "name":"three", "info":[ 25, "男" ] }

]

}

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

</script>

(5)修改數組值

你能夠使用索引值來修改數組值：

例：

將（4）中的：

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

改成：

myObj.person[0].info[2] = "軟件開發工程師"

document.getElementById("demo").innerHTML = myObj.person[0].info;

(運行後能夠知道，職業被修改了)

(6)刪除數組元素

咱們能夠使用 delete 關鍵字來刪除數組元素：

將（4）中的：

document.getElementById("demo").innerHTML = myObj.person[0].info[2];

改成：

delete myObj.person[0].info[1];

document.getElementById("demo").innerHTML = myObj.person[0].info;

(運行後能夠知道，性別參數被刪除)

三．JSON 序列化與返序列化

1.序列化 JSON.stringify(序列化數據);

JSON 一般用於與服務端交換數據。

在向服務器發送數據時通常是字符串。

咱們能夠使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。

例：

var xiaoming = {

name: '小明',

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

var s = JSON.stringify(xiaoming);

console.log(s);

輸出結果爲：

{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}

注意這個結果的類型是字符串。