JSON與js對(duì)象序列化的示例分析

這篇文章主要介紹了JSON與js對(duì)象序列化的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體如下：

JavaScript對(duì)象表示法（JavaScript Object Notation，簡(jiǎn)稱JSON）是一種輕量級(jí)的數(shù)據(jù)交換格式，它基于js字面量表示法，是js的一個(gè)子集。雖然是一個(gè)js的子集但是他與語(yǔ)言無(wú)關(guān)，它可以用于在現(xiàn)在所有的編程語(yǔ)言編寫(xiě)的應(yīng)用程序之間進(jìn)行數(shù)據(jù)交換。是一種文本格式，比較容易讀寫(xiě)。

JSON是一個(gè)容納“名/值”對(duì)的無(wú)序集合，名字可以是任意字符串，值可以使任意的JSON類型的值。大多數(shù)編程語(yǔ)言都有被映射為JSON的數(shù)據(jù)類型，比 如對(duì)象（object），字典（dictionary）,哈希表（hash map），關(guān)聯(lián)數(shù)組（associative array）等。

JSON有六種類型的值：對(duì)象，數(shù)組，字符串，數(shù)字，布爾值和特殊值null。

console.log(JSON.parse('5')); // 5
console.log(JSON.parse(5)); // 5
console.log(JSON.parse('true')); // true
console.log(JSON.parse(true)); // true
console.log(JSON.parse('"hello"')); // "hello"
console.log(JSON.parse("hello")); // 報(bào)錯(cuò) 因?yàn)閔ello不是JSON字符串
console.log(JSON.parse('null')); // null
console.log(JSON.parse(null)); // null
console.log(JSON.parse(undefined)); // 報(bào)錯(cuò) 因?yàn)镴SON不能表示undefined換用null代替

JSON的結(jié)構(gòu)

JSON具有兩種結(jié)構(gòu)：對(duì)象，數(shù)組

對(duì)象結(jié)構(gòu)以”{”大括號(hào)開(kāi)始，以”}”大括號(hào)結(jié)束。中間部分由0或多個(gè)以”，”分隔的”key(關(guān)鍵字)/value(值)”對(duì)構(gòu)成，關(guān)鍵字字符串和值之間以”：”分隔，語(yǔ)法結(jié)構(gòu)如代碼。

{
  key1:value1,
  key2:value2,
  ...
}

例如：

{
  "name": "hum",
  "age": 26,
  "sex": 1,
  "love": [
    "swing",
    "jump"
  ],
  "birthday": "1988-01-12"
}

NOTE：

在js中表示JSON字符串時(shí)最好在外面加上單引號(hào)。

如下：

復(fù)制代碼 代碼如下:

console.log(JSON.parse('{"num":5,"stop":true,"str":"hello","empty":null}'));// object{num:5,stop:true,str:"hello",empty: null}

與js對(duì)象字面量相比，JSON對(duì)象沒(méi)有變量聲明也沒(méi)有末尾的分號(hào)。
數(shù)組結(jié)構(gòu)以”[”開(kāi)始，”]”結(jié)束。中間由0或多個(gè)以”，”分隔的值列表組成，語(yǔ)法結(jié)構(gòu)如代碼。

[
  {
    key1:value1,
    key2:value2,
   ...
  }
]

例如：

[
 {
   "Id": 7,
  "Mentions": [
    {
     "Id": 5,
     "StatusId": 34,
     "CreatedDateTime":"\/Date(1310051914617+0100)\/",
     "Text":"Text",
     "UserName":"Username",
    "UserLocation":"UK",
    "UserLanguage":"en-GB",
     "IsCheckIn":"true"
   }
  ],
   "Checkins": 0,
   "HereNow": 0,
   "TimeStamp":"\/Date(1310051914639+0100)\/",
   "Venue": {
    "Id": 7,
    "FoursquareId":"cacbf3bd-f0aa-403d-9f9b-2056b4985ba1",
    "Name":"Venue Name"
   }
  },
  {
    "name":"hahahhahah",
    "port":[
     {
       "port": 8080,
       "protocol":"HTTP",
       "IP":"123.12.06.456"
     }
    ]
  }
]

JSON數(shù)組采用的是javascript數(shù)組字面量的形式。

JSON的解析與序列化

js的JSON的解析與序列化與AS3是相同的。我們常用的也就是JSON對(duì)象（ECMAScript 5中添加的， 早期JSON解析基本都使用javascript的eval()函數(shù)。但是eval有一些性能和安全上的缺點(diǎn)，ECMAScript對(duì)解析JSON對(duì)象進(jìn) 行了規(guī)范，定義了全局對(duì)象JSON，支持的瀏覽器有標(biāo)準(zhǔn)瀏覽器和IE8+。對(duì)于不支持的瀏覽器可以引入json2.js文件。）的stringify與parse這兩個(gè)方法。

接下來(lái)我們來(lái)一一說(shuō)明。

JSON.stringify

JSON.stringify()將javascript對(duì)象序列化為JSON格式的字符串
JSON.stringify(ob,filter,indent)包含三個(gè)參數(shù)，通常我們?cè)谑褂玫臅r(shí)候只帶第一個(gè)參數(shù)，來(lái)返回字符串。

ob:要轉(zhuǎn)化成JSON字符串的對(duì)象，數(shù)組，原始值。
filter：是一個(gè)可選的參數(shù)，通常是一個(gè)函數(shù)，用來(lái)在字符串化前對(duì)值做一些替換。也可以是一個(gè)數(shù)組，包含哪些需要字符串化的屬性名。就是用來(lái)過(guò)濾的。
indent：也是一個(gè)可選參數(shù)，在需要輸出格式化的可閱讀的代碼時(shí)，使用indent參數(shù)來(lái)指定用來(lái)縮進(jìn)的字符串或空格。如果省略該參數(shù)，返回的字符串將不帶任何的額外的空格，這樣輸出的值很難閱讀。就是用來(lái)格式化的。

下面是幾個(gè)對(duì)應(yīng)的例子：

首先是第二個(gè)參數(shù)是數(shù)組過(guò)濾器的時(shí)候：

var oJson = { name: 'hum', age: 20, sex: 1};
console.log(JSON.stringify(oJson, ['age', 'sex'])); // {"age":20,"sex":1}

如果第二個(gè)參數(shù)是字符串的時(shí)候，該數(shù)組會(huì)作為對(duì)象的屬性名，屬性名不在這個(gè)數(shù)組中的任何對(duì)象的屬性在序列化的時(shí)候都會(huì)被忽略掉。此外，返回的字符串中的屬性的順序，會(huì)與該數(shù)組中的屬性名一致。

函數(shù)過(guò)濾器的時(shí)候：

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, function(k, v){
    switch (k){
      case 'age':
        return v > 20 ? '成年': '未成年';
      case 'love':
        return v.join(',');
      case 'sex':
        return undefined;
      default :
        return v;
    }
  })); // {"name":"hum","age":"成年","love":"swing,jump"}

如果該參數(shù)是函數(shù)，則它是一個(gè)替換函數(shù)，該函數(shù)會(huì)在每一個(gè)需要字符串化的對(duì)象上調(diào)用。這個(gè)函數(shù)的第一個(gè)參數(shù)是該對(duì)象中的屬性名或數(shù)組的序號(hào)，第二個(gè)則是值本身。函數(shù)的返回值會(huì)替換掉需要字符串化的值，如果函數(shù)返回undefined或沒(méi)有任何的返回值，則會(huì)在字符串化的時(shí)候忽略這個(gè)值。

stringify的第三個(gè)參數(shù)的實(shí)例：

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, null, 4));
  /*
   {
     "name": "hum",
     "age": 26,
     "sex": 1,
     "love": [
       "swing",
       "jump"
     ]
   }
  */

通常這個(gè)方法的返回值是一個(gè)不帶任何空格或換行符的給機(jī)器閱讀的字符串，如果想輸出更易于閱讀的代碼，就需要設(shè)置第三個(gè)參數(shù)了。

再來(lái)看一個(gè)例子：

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump']};
  console.log(JSON.stringify(oJson, null, '--'));
  /*
   {
   --"name": "hum",
   --"age": 26,
   --"sex": 1,
   --"love": [
   ----"swing",
   ----"jump"
   --]
   }
  */

這樣就很容易理解了。。。

JSON.parse

JSON.parse用來(lái)解析json格式的字符串（返回一個(gè)對(duì)象，數(shù)組或原始值）

JSON.parse(s,reviver)包含兩個(gè)方法.

s：要解析的字符串
reviver：用來(lái)轉(zhuǎn)換解析值得可選函數(shù)

我們通常使用只使用第一個(gè)參數(shù)，可選參數(shù)reviver,主要是在返回解析值之前，對(duì)其進(jìn)行過(guò)濾或后期處理。reviver函數(shù)會(huì)在從s中解析的每個(gè)原始值調(diào)用一次。調(diào)用reviver函數(shù)是帶有兩個(gè)參數(shù)，第一個(gè)屬性名（對(duì)象的屬性名或是轉(zhuǎn)換成字符串的數(shù)組序號(hào)），第二個(gè)參數(shù)是對(duì)象的屬性或是數(shù)組的元素值。reviver函數(shù)會(huì)作為包含原始值的對(duì)象/數(shù)組的方法來(lái)調(diào)用。reviver函數(shù)的返回值會(huì)成為屬性的新值，如果reviver返回第二個(gè)參數(shù)，則屬性不變。如果reviver返回undefined或不凡會(huì)任何值，則會(huì)從對(duì)象或是數(shù)組中刪除屬性。
下面是一個(gè)實(shí)例：

var oJson = { name: 'hum', age: 26, sex: 1, love: ['swing', 'jump'], birthday: '1988-01-12'};
  var sJson = JSON.stringify(oJson);
  console.log(sJson);//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"}
  console.log(JSON.parse(sJson));
  console.log(JSON.parse(sJson, function (k, v) {
    if(k == 'birthday'){ // 返回日期對(duì)象
      return new Date(v);
    }else if(k == 'sex'){ // sex不在了
      return undefined;
    }else{
      return v;
    }
  }));

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JSON與js對(duì)象序列化的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!