JSON 基本使用

@[toc]

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）用方括号(“

  []

  ”)表示。
• 對象（0bject）用大括号(“

  {}

• 名稱/值對(

  name/value

  ）組合成數組和對象。
• 名稱(

  name

  ）置于雙引号中，值（

  value

  ）有字元串、數值、布爾值、null、對象和數組。
• 并列的資料之間用逗号(“

  ,

  ”）分隔

{
    "name": "xdr630",
    "favorite": "programming"
}           

3. JSON 和 XML

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

• 沒有結束标簽,長度更短,讀寫更快
• 能夠直接被JavaScript解釋器解析
• 可以使用數組

兩者比較

• 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 對象互轉）

• 在JavaScript中，有兩個方法與此相關:

  JSON.parse

  和

  JSON.stringify

  。

  JSON 和 JS 對象互轉

1. 要實作從JSON字元串轉換為JS對象，使用

   JSON.parse()

   方法：

<script>
    var str = '{"name": "兮動人","age":22}';
    var obj = JSON.parse(str);
    console.log(obj);
</script>           

1. 要實作從JS對象轉換為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格式規定

1、對象（0bject)

• 對象用大括号(“

  {}

  ”）括起來，大括号裡是一系列的“

  名稱/值對

  ”，請看概念圖。

• 兩個并列的資料之間用逗号(“

  ,

  ”）隔開，注意兩點:

1. 使用英文的逗号（“

   ,

   ”)，不要用中文的逗号(“

   ，

   ”)
2. 最後一個“

   名稱/值對

   “之後不要加逗号

• JSON線上檢查文法： https://www.json.cn/
• 這裡報錯說明JSON中Key/Value不能使用單引号

• 正确寫法

2、數組（Array）

• 數組表示一系列有序的值，用方括号(“

  []

  ”)包圍起來，并列的值之間用逗号分隔，請看概念圖。

• 例如，以下的數組是合法的:

[1,2,"three","four",true,false,null,[1,2],{"name":"兮動人"}]           

3、名稱/值對（Name/Value）

• 名稱（Name）是一個字元串，要用雙引号括起來，不能用單引号，也不能沒有引号，這一點與JavaScript不同。
• 值的類型隻有七種:

  字元串（string)、數值(number)、對象（object)、數組（array), true、false、null

  。不能有這之外的類型，例如u

  ndefined、函數

  等。請看概念圖。

字元串（

string

）的規則如下:

1. 英文雙引号括起來,不能用單引号，也不能沒有。
2. 字元串中不能單獨出現雙引号（

   ”

   ）和右斜杠（“

   \

   ")。
3. 如果要打雙引号或右斜杠，需要使用“

   右斜杠+字元

   ”的形式，例如

   \”

   \\

   ，其它的轉義字元也是如此字元串的概念圖。

• 轉義字元

{
"string":"\\ \" "
}           

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

{
"number":1e3,
"n1":1e2,
"n2":-100
}           

6. 字元串轉化成對象

• 解析：是指将符合JSON 文法規則的字元串轉換成對象的過程。
• 不同的程式設計語言都提供了解析JSON字元串的方法，在這裡主要講解JavaScript中的解析方法。主要有三種:

1. 使用

   eval()

2. JSON.parse()

3. 使用第三方庫,例如JQuery等

1、

eval()

• eval(）

  函數的參數是一個字元串，其作用是直接執行其中的 JavaScript代碼。
• 案例：eval()解析字元串

<script>
    var str = "console.log('hello')";
    eval(str);
</script>           

• eval 解析字元串的結果：

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

<script>
    var str = '{"name":"兮動人","age":22}';
    var obj = eval("("+str+")");
    console.log(obj)
</script>           

• 但是,現在已經很少直接使用eval()來解析了，如果您的浏覽器版本真的是很舊，可能才需要這個方法。此外，eval()是一個相對危險的函數，因為字元串中可能含有未知因素。在這裡，作為學習，還是要知道這也是一種方法。
• 請注意 eval()的參數，在字元串兩旁加了括号，這是必須的，否則會報錯。
• 因為JSON字元串是被大括号（“

  {}

  ”）包圍的，直接放到

  eval()

  會被當成語句塊來執行，是以要在兩旁加上括号，使其變成表達式。

2、

JSON. parse()

• 現在絕大多數浏覽器都以支援

  JSON.parse()

  ，是推薦使用的方式。
• 如果輸入了不符合規範的字元串,會報錯。

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

<script>
    var str = '{"name":"兮動人","age":22}';
    var obj = JSON.parse(str)
    console.log(obj)
</script>           

• JSON.parse()

  可以有第二個參數，是一個函數。此函數有兩個參數:

  name和value

  ，分别代表名稱和值。當傳入一個JSON字元串後，JSON的每一組

  名稱/值對

  都要調用此函數。該函數有傳回值，傳回值将指派給目前的名稱(name)。
• 利用第二個參數，可以在解析JSON字元串的同時對資料進行一些處理。

案例：

<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 時，設定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對象轉化為字元串

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

• JSON.stringify(）

  能夠将JavaScript值轉換成JSON字元串。

  JSON.stringify()

  生成的字元串可以用

  JSON.parse()

  再還原成JavaScript值。

1、參數的含義

JSON.stringify(value[, replacer[, space]])           

1. value

   :必選參數。被變換的JavaScript值，一般是對象或數組。

2. replace

   :可以省略。有兩種選擇:函數或數組。

• 如果是函數，則每一組名稱/值對都會調用此函數，該函數傳回一個值，作為名稱的值變換到結果字元串中,如果傳回

  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>           

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

<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>           

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

var jsonstr = JSON.stringify(obj,["c","a","b"]);           

1. space

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

2、value的用法

<script>
var obj = {
            name: "兮動人",
            age: 22
        }
    console.log(obj);
    var jsonstr = JSON.stringify(obj);
    console.log(jsonstr)
</script>           

• 當有不符合JSON文法規則時，就不會被轉換成JSON字元串。
• 數組中有函數時會被轉換成

  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的用法

• 案例：在上面的基礎上添加

<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>