天天看點

JSON 基本使用

1. JSON 是什麼?

JSON,全稱是 JavaScript Object Notation,即 JavaScript對象标記法。

JSON是一種輕量級(Light-Meight)、基于文本的(Text-Based)、可讀的(Human-Readable)格式。

JSON 的名稱中雖然帶有JavaScript,但這是指其文法規則是參考JavaScript對象的,而不是指隻能用于JavaScript 語言。

JSON無論對于人,還是對于機器來說,都是十分便于閱讀和書寫的,而且相比 XML(另一種常見的資料交換格式),檔案更小,是以迅速成為網絡上十分流行的交換格式。

近年來JavaScript已經成為浏覽器上事實上的标準語言,JavaScript 的風靡,與JSON 的流行也有密切的關系。

因為JSON本身就是參考JavaScript 對象的規則定義的,其文法與JavaScript定義對象的文法幾乎完全相同。

JSON格式的創始人聲稱此格式永遠不更新,這就表示這種格式具有長時間的穩定性,10 年前寫的檔案,10年後也能用,沒有任何相容性問題。

2. JSON 的文法規則是怎樣的?

JSON 的文法規則十分簡單,可稱得上“優雅完美”,總結起來有:

數組(Array)用方括号(“<code>[]</code>”)表示。

對象(0bject)用大括号(“<code>{}</code>”)表示。

名稱/值對(<code>name/value</code>)組合成數組和對象。

名稱(<code>name</code>)置于雙引号中,值(<code>value</code>)有字元串、數值、布爾值、null、對象和數組。

并列的資料之間用逗号(“<code>,</code>”)分隔

3. JSON 和 XML

JSON常被拿來與XML做比較,因為JSON 的誕生本來就多多少少要有取代XNL的意思。相比 XML,JSON的優勢如下:

沒有結束标簽,長度更短,讀寫更快

能夠直接被JavaScript解釋器解析

可以使用數組

兩者比較

JSON:

XML:

4. JSON的解析和生成(JSON 和 JS 對象互轉)

在JavaScript中,有兩個方法與此相關: <code>JSON.parse</code>和 <code>JSON.stringify</code> 。

JSON 和 JS 對象互轉

要實作從JSON字元串轉換為JS對象,使用 <code>JSON.parse()</code> 方法:

JSON 基本使用

要實作從JS對象轉換為JSON字元串,使用 <code>JSON.stringify()</code> 方法:

JSON 基本使用

5. JSON格式規定

JSON 基本使用

1、對象(0bject)

對象用大括号(“<code>{}</code>”)括起來,大括号裡是一系列的“<code>名稱/值對</code>”,請看概念圖。 

JSON 基本使用

兩個并列的資料之間用逗号(“<code>,</code>”)隔開,注意兩點:

使用英文的逗号(“<code>,</code>”),不要用中文的逗号(“<code>,</code>”)

最後一個“<code>名稱/值對</code>“之後不要加逗号

JSON線上檢查文法:https://www.json.cn/

這裡報錯說明JSON中Key/Value不能使用單引号 

JSON 基本使用

正确寫法 

JSON 基本使用

 2、數組(Array)

數組表示一系列有序的值,用方括号(“<code>[]</code>”)包圍起來,并列的值之間用逗号分隔,請看概念圖。 

例如,以下的數組是合法的:

JSON 基本使用

3、名稱/值對(Name/Value)

名稱(Name)是一個字元串,要用雙引号括起來,不能用單引号,也不能沒有引号,這一點與JavaScript不同。

值的類型隻有七種:<code>字元串(string)、數值(number)、對象(object)、數組(array), true、false、null</code>。不能有這之外的類型,例如u<code>ndefined、函數</code>等。請看概念圖。 

JSON 基本使用

字元串(<code>string</code>)的規則如下:

英文雙引号括起來,不能用單引号,也不能沒有。

字元串中不能單獨出現雙引号(<code>”</code>)和右斜杠(“<code>\</code>")。

如果要打雙引号或右斜杠,需要使用“<code>右斜杠+字元</code>”的形式,例如<code>\”</code>和<code>\\</code>,其它的轉義字元也是如此字元串的概念圖。 

JSON 基本使用

轉義字元

JSON 基本使用

數值類型,可以使用科學計數法表示 

JSON 基本使用

6. 字元串轉化成對象

解析:是指将符合JSON 文法規則的字元串轉換成對象的過程。

不同的程式設計語言都提供了解析JSON字元串的方法,在這裡主要講解JavaScript中的解析方法。主要有三種:

使用<code>eval()</code>

使用<code>JSON.parse()</code>

使用第三方庫,例如JQuery等

1、 <code>eval()</code>

<code>eval()</code>函數的參數是一個字元串,其作用是直接執行其中的 JavaScript代碼。

案例:eval()解析字元串

eval 解析字元串的結果:

JSON 基本使用

eval()能夠解析JSON字元串。從這裡也可以看得出,JSON 和JavaScript是高度嵌合的。

案例:eval()解析JSON字元串

JSON 基本使用

但是,現在已經很少直接使用eval()來解析了,如果您的浏覽器版本真的是很舊,可能才需要這個方法。此外,eval()是一個相對危險的函數,因為字元串中可能含有未知因素。在這裡,作為學習,還是要知道這也是一種方法。

請注意 eval()的參數,在字元串兩旁加了括号,這是必須的,否則會報錯。

因為JSON字元串是被大括号(“<code>{}</code>”)包圍的,直接放到 <code>eval()</code>會被當成語句塊來執行,是以要在兩旁加上括号,使其變成表達式。

2、<code>JSON. parse()</code>

現在絕大多數浏覽器都以支援<code>JSON.parse()</code>,是推薦使用的方式。

如果輸入了不符合規範的字元串,會報錯。

案例:JSON字元串轉換為JS對象

JSON 基本使用

<code>JSON.parse()</code>可以有第二個參數,是一個函數。此函數有兩個參數:<code>name和value</code>,分别代表名稱和值。當傳入一個JSON字元串後,JSON的每一組<code>名稱/值對</code>都要調用此函數。該函數有傳回值,傳回值将指派給目前的名稱(name)。

利用第二個參數,可以在解析JSON字元串的同時對資料進行一些處理。

案例:

可以做判斷處理,當JSON字元串的 name=age 時,設定age的value=14

JSON 基本使用

7. JS對象轉化為字元串

JSON 基本使用

序列化,指将 JavaScript 值轉化為JSON字元串的過程。

<code>JSON.stringify()</code>能夠将JavaScript值轉換成JSON字元串。<code>JSON.stringify()</code>生成的字元串可以用<code>JSON.parse()</code>再還原成JavaScript值。

1、參數的含義

<code>value</code>:必選參數。被變換的JavaScript值,一般是對象或數組。

<code>replace</code>:可以省略。有兩種選擇:函數或數組。

如果是函數,則每一組名稱/值對都會調用此函數,該函數傳回一個值,作為名稱的值變換到結果字元串中,如果傳回<code>undefined</code>,則該成員被忽略。

如果是數組,則隻有數組中存在名稱才能夠被轉換,且轉換後順序與數組中的值保持一緻。

JSON 基本使用

把順序改下,對應轉換的JSON字元串的數值不變

JSON 基本使用

<code>space</code>:可以省略。這是為了排版、友善閱讀而存在的。可以在JSON字元串中添加空白或制表符等。

2、value的用法

JSON 基本使用

當有不符合JSON文法規則時,就不會被轉換成JSON字元串。

數組中有函數時會被轉換成 <code>null</code>

JSON 基本使用

3、replace的用法

4、space的用法

案例:在上面的基礎上添加

改成制表符:<code>\t</code>

繼續閱讀