【重溫基礎】16.JSON物件介紹

pingan8787發表於2019-01-17
JSON物件

本文是 重溫基礎 系列文章的第十六篇。今日感受：靜。

系列目錄：

本章節複習的是JS中的關於JSON物件相關知識。

前置知識：
JSON是一種按照JavaScript物件語法的資料格式。

1.概念

概念有三點：

JSON全稱JavaScript 物件表示法（JavaScript Object Notation）。
JSON 是儲存和交換文字資訊的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
———— 摘自 W3school JSON教程

JSON 使用 JavaScript 語法來描述資料物件，但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支援許多不同的程式語言。

2.語法

JSON在使用過程中可作為一個物件或者字串存在，當作為物件時，用於獲取JSON中的資料，而作為字串時常用於網路資料傳輸。

JSON語法規則：

  1. 資料在名稱/值對中
  2. 資料由逗號分隔
  3. 花括號儲存物件
  4. 方括號儲存陣列

通常，JSON資料書寫格式是名稱/鍵值：

"name" : "pingan"複製程式碼

而JSON的值可以是 ：

  1. 數字（整數或浮點數）
  2. 字串（在雙引號中）
  3. 邏輯值（true 或 false）
  4. 陣列（在方括號中）
  5. 物件（在花括號中）
  6. null

JSON常常有三種型別：
三種型別：簡單值，物件和陣列。
必須注意：JSON字串必須是雙引號，單引號會語法錯誤。

2.1 簡單值

簡單值可以是字串:

"hello leo!"複製程式碼

也可以是數字,邏輯值：

1複製程式碼

2.2 物件型別

內容放在花括號內，是多個鍵值對。
JSON物件 與 js 物件的三個區別：

  1. JSON物件 必須加雙引號，而 js 物件屬性名可以不加雙引號。
  2. JSON物件 沒有變數宣告，而 js 物件有。
  3. JSON物件 沒有分號，而 js 物件有。
// js 物件var obj = { 
   name : "pingan",    age  : "25",
  };
// json 物件{ 
   "name" : "pingan",    "age"  : "25",    "box"  : [        "a","b","c"    ]
  }複製程式碼

2.3 陣列型別

內容放在方括號內。
JSON陣列也沒有分號和變數，常常可以把JSON陣列和物件結合使用，構成更復雜的資料集合。

[    { 
       "name" : "leo",        "age"  : 25,        "box"  : ["a","b","c"]    
  },    { 
       "name" : "pingan",        "age"  : 25,        "box"  : ["a","b","c"]    
  }]複製程式碼

3. 使用

JSON最常見的用法就是，從服務端獲取JSON資料，再將JSON資料轉成JavaScrip物件使用。
JSON物件有兩個方法：

  • JSON.stringify()： 序列化操作，將JavaScript物件轉換成JSON字串。
  • JSON.prase()：反序列化操作，將JSON字串解析成JavaScript值。

3.1 序列化操作

序列化操作常常使用JSON.stringify()。
簡單例子:

let leo =  { 
   name : "leo",    age  : 25,    box  : ["a","b","c"]
  }let pingan = JSON.stringify(leo);
console.log(pingan);
 // "{"name":"leo","age":25,"box":["a","b","c"]
  }"複製程式碼

注意：

  1. 預設情況下，JSON.stringify()輸出的JSON字串不包含任何空格字元或縮排，因此結果就像上面那樣。
  2. 序列化JavaScript物件時，所有函式及原型成員都會被忽略，不體現在結果上。
  3. 值為undefined的任何屬性都會被跳過。

因此，最終的值都是有效的JSON資料型別的例項屬性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()。
簡單例子：

let copyPingan = JSON.parse(pingan);
copyPingan;
 // {name: "leo", age: 25, box: Array(3)
  }複製程式碼

如果傳入JSON.parse()的字串不是有效的JSON，則會丟擲錯誤。
注意：
雖然pingan和copyPingan屬性相同，但兩者獨立，沒有任何關係。

4.序列化選項

JSON.stringify()除了要傳入序列化物件作為引數，還可以接收其他兩個引數，用來指定序列化JavaScript物件的方式：

  1. 過濾器：可以是個陣列，也可以是個函式。
  2. 選項：表示是否在JSON字串中保留縮排。

單獨或組合使用兩者，可以更加全面深入的控制JSON的序列化。

4.1 過濾器

若過濾器的引數是陣列，則JSON.stringify()返回的結果將只包含陣列中的屬性：

var leo =  { 
   name : "leo",    age  : 25,    box  : ["a","b","c"]
  }var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan);
 // "{"name":"leo","age":25
  }"複製程式碼

若過濾器的引數是函式，則情況就不一樣了，傳入的函式需有兩個引數（屬性名和屬性值）：

var leo =  { 
   "name" : "leo",    "age"  : 25,    "box"  : ["a","b","c"]
  }var pingan = JSON.stringify(leo,function(key, value){ 
   switch(key){ 
       case "name":            return "我叫" + value        case "age":            return value + "歲"        default:   return value    
  }
  });
console.log(pingan);
 // "{"name":"我叫leo","age":"25歲","box":["a","b","c"]
  }"複製程式碼

注意：使用switch的時候，必須指定default否則會返回undefined。

4.2 選項

JSON.stringify()第三個引數是個選項，控制結果中的縮排和空白符。

  1. 若選項只有一個值，則表示每個級別縮排的空格數，最大值為10，超過10則只會是10。
var leo =  { 
   "name" : "leo",    "age"  : 25,    "box"  : ["a","b","c"]
  }var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*"{ 
   "name": "leo",    "age": 25,    "box": [        "a",        "b",        "c"    ]
  }"*/複製程式碼

5.解析選項

JSON.parse()可以接收一個函式作為引數，對每個鍵值對呼叫，為了跟JSON.stringify()的過濾函式區別，這個函式成為還原函式。

  • 若還原函式返回undefined，則表示要從結果中刪除對應的鍵。
  • 若還原函式返回其他值，則將該值插入結果中。

還原函式接收兩個引數：屬性名和屬性值。

舉例，在日期字串轉換為Date物件中，經常要用到還原函式：

var leo =  { 
   "name" : "leo",    "age"  : 25,    "date" : new Date(1993, 9, 9)
  }var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){ 
   // return key == "date" ? new Date(value) : value;
    if(key == "date"){ 
       return new Date(value);
    
  }else{ 
       return value;
     
  }
  })console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"
  }"複製程式碼

參考文章：

  1. W3school JSON教程
  2. 《JavaScrip高階程式設計》

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 github.com/pingan8787/…
JS小冊 js.pingan8787.com

來源：https://juejin.im/post/5c40a223f265da6151150079

相關文章