JSON入門

JSON入門

原文鏈接

JSON的全稱是」JavaScript Object Notation」，意思是JavaScript對象表示法，它是一種基於文本，獨立於語言的輕量級數據交換格式，相似 XML但比 XML 更小、更快，更易解析

初識

JSON是Web開發領域最知名的技術權威Douglas Crockford創造

• JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
• JSON 是輕量級的文本數據交換格式
• JSON 獨立於語言
• JSON 具備自我描述性，更易理解

JSON建構於兩種結構：

• 「名稱/值」對的集合（A collection of name/value pairs）。不一樣的語言中，它被理解爲對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表（hash table），有鍵列表（keyed list），或者關聯數組 （associative array）。
• 值的有序列表（An ordered list of values）。在大部分語言中，它被理解爲數組（array）。

這些都是常見的數據結構。事實上大部分現代計算機語言都以某種形式支持它們。這使得一種數據格式在一樣基於這些結構的編程語言之間交換成爲可能。

JSON語法

兩種表示結構

JSON有兩種表示結構，對象和數組。

• 對象是一個無序的「‘名稱/值’對」集合。一個對象以{（左括號）開始，}（右括號）結束。每一個「名稱」後跟一個:（冒號）；「‘名稱/值’ 對」之間使用,（逗號）分隔。

  {
      "name": "xing",
      "age": 999
  }

  ​

• 數組是值（value）的有序集合。一個數組以[（左中括號）開始，]（右中括號）結束。值之間使用,（逗號）分隔。

  [
      {
          key1:value1,
          key2:value2 
      },
      {
           key3:value3,
           key4:value4   
      }
  ]

語法規則

• 數據在名稱/值對中
• 數據由逗號分隔
• 大括號保存對象
• 中括號保存數組

JSON 值能夠是：

• 數字（整數或浮點數）
• 字符串（在雙引號中）
• 邏輯值（true 或 false）
• 數組（在中括號中）
• 對象（在大括號中）
• null

在JavaScript中使用JSON

JSON 一般用於與服務端交換數據。在接收服務器數據時通常是字符串。咱們可使用 JSON.parse() 方法將數據轉換爲 JavaScript 對象，使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串.

• JSON.parse(text[, reviver])

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

• eval()方法 存在性能和安全問題不建議使用

首先咱們定義一個對象,因爲JSON使用用JavaScript編寫的，因此對JSON的操做無異於JavaScript對數組與對象的操做

let Obj = {  
  name: "xing", 
  age: "99", 
  hobby: ["吃", "喝", "玩"]
}

服務器通常返回JSON字符串，咱們用 JSON.stringify() 將這個對象轉換成JSON字符串模擬服務器返回的數據，而後再用JSON.parse()解析成JSON對象來使用

let jsonStr = JSON.stringify(Obj) // string: {"name":"xing","age":"99","hobby":["吃","喝","玩"]}
let jsonObj = JSON.parse(jsonStr) // Obect: { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ] }

JSON增刪改查

// 讀取
let myName = jsonObj.name
console.log(myName) // xing
// 新增
josnObj.sex = "male"
console.log(josnObj) //{ name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ], sex: 'female' }
// 修改
josnObj.sex = "female"
console.log(josnObj) // { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ], sex: 'female' }
// 刪除
delete josnObj.sex
console.log(josnObj) // { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ] }

用for in遍歷JSON數據

for(let x in jsonObj){
  console.log(`${x}:${jsonObj[x]}`)
}
/*
name:xing
age:99
hobby:吃,喝,玩
*/

到此，咱們瞭解JSON的使用，JSON已是JavaScript標準的一部分。目前，主流的瀏覽器對JSON支持都很是完善。應用JSON，咱們能夠從XML的解析中擺脫出來，對那些應用AJAX的Web 2.0網站來講，JSON是目前最靈活的輕量級方案。

參考連接：

• json.org
• 菜鳥教程
• MDN
• JSON在線解析
• 原文鏈接

你們能夠關注個人公衆號，一塊兒玩耍。有技術乾貨也有扯淡亂談，關注回覆[888]領取福利

左手代碼右手磚，拋磚引玉