本文實例講述了JavaScript解析及序列化JSON的方法。分享給大家供大家參考，具體如下：

JSON 之所以這么流行，是因為 JSON 數(shù)據(jù)結(jié)構(gòu)可以被解析為 JavaScript 對象。JSON 之前的 XML 數(shù)據(jù)結(jié)構(gòu)要被解析，需要先解析成 DOM 文檔，然后再從中提取出數(shù)據(jù)。相比之下，JSON 數(shù)據(jù)結(jié)構(gòu)方便多咯O(∩_∩)O~

所以 JSON 就成為 web 開發(fā)中，用于數(shù)據(jù)交換的事實標(biāo)準(zhǔn)。

1 JSON 對象

早期的 JSON 解析器是使用 JavaScript 的 eval() 函數(shù)。因為 JSON 是 JavaScript 語法的子集，所以 eval() 函數(shù)可以解析并返回 JavaScript 對象。但使用這個函數(shù)存在風(fēng)險，因為有可能會被執(zhí)行一些惡意的代碼！ECMAScript 5 定義了全局對象 JSON。支持這個對象的瀏覽器有 IE8+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10.5+。而舊版的瀏覽器建議使用 JSON-js 庫。

JSON 對象有兩個方法：

1. stringify()，會把 JavaScript 對象序列化為 JSON 字符串。
2. parse()，會把 JSON 字符串解析為原生的 JavaScript 對象。

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
var jsonText = JSON.stringify(book);
console.log(jsonText);
var bookCopy = JSON.parse(jsonText);
console.log(bookCopy);
</script>

默認(rèn)情況下，JSON.stringify() 輸出的字符串不包含任何空格字符以及縮進。而且所有的函數(shù)以及原型成員都會被有意忽略。此外，值為 undefined 的屬性也會被跳過。所以結(jié)果中都是值為有效的屬性。

注意：上面代碼中的 book 與 bookCopy 雖然具有相同的屬性，但它們是兩個獨立的、沒有任何關(guān)系的對象。

如果傳給 JSON.parse() 的字符串不是有效的 JSON 字符串，就會拋出錯誤。

2 序列化選項

JSON.stringify() 還可以接收另外兩個參數(shù)。第二個參數(shù)是過濾器，可以是數(shù)組，也可以是函數(shù)；第三個參數(shù)表示是否在 JSON 字符串中保留縮進。

2.1 過濾結(jié)果

如果過濾器的參數(shù)是數(shù)組，那么結(jié)果中將只會包含這個數(shù)組所列出的屬性：

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
//過濾結(jié)果
var jsonTextAfterFilter=JSON.stringify(book,["title","edition"]);
console.log(jsonTextAfterFilter);//{"title":"music","edition":1}
</script>

如果過濾器的參數(shù)是函數(shù)，那么這個函數(shù)會接收兩個參數(shù)，屬性名和屬性值。屬性名只能是字符串，如果它所對應(yīng)的屬性值不是鍵值對結(jié)構(gòu)的值時，那么屬性名可以是空字符串。這個函數(shù)的返回值就是相應(yīng)屬性名對應(yīng)的值。如果函數(shù)返回 undefined，那么相應(yīng)的屬性就會被忽略：

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017
  };
  var jsonText = JSON.stringify(book, function (key, value) {
    switch (key) {
      case "authors":
        return value.join(",");
      case "year":
        return 10000;
      case "edition":
        return undefined;
      default :
        return value;
    }
  });
  console.log(jsonText);//{"title":"music","authors":"deniro","year":10000}
</script>

注意：一定要提供 default 選項，這樣才能保證其他的值都能正常地出現(xiàn)在結(jié)果中。

Firefox 3.5 和 3.6 有一個 bug，在將函數(shù)作為方法的第二個參數(shù)時，只有返回 undefined 有效，而返回其他任何值都會在結(jié)果中包含相應(yīng)的屬性，F(xiàn)irefox 4 修復(fù)了這個 bug。

2.2 字符串縮進

JSON.stringify() 的第三個參數(shù)可以控制結(jié)果中的縮進和空白符。如果這個參數(shù)是數(shù)值，那么就表示是縮進的空格數(shù)，比如這里要縮進 4 個空格：

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017
  };
  var jsonText = JSON.stringify(book, null, 4);
  console.log(jsonText);
</script>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，運行結(jié)果如下：

除了縮進，JSON.stringify() 也在結(jié)果中添加了換行符，這提高了 JSON 字符串的可讀性。最大縮進空格數(shù)為 10，超過這個值都會被自動轉(zhuǎn)為 10。

如果縮進參數(shù)是一個字符串，那么它會作為 JSON 字符串的縮進字符：

<script type="text/javascript">
var book = {
  title: "music",
  authors: ["deniro"],
  edition: 1,
  year: 2017
};
var jsonTextWithIndent=JSON.stringify(book,null,"--");//傳入縮進字符
console.log(jsonTextWithIndent);
</script>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，運行結(jié)果如下：

縮進字符串最長不能超過 10，如果超過了這個值，結(jié)果中就只會出現(xiàn)前 10 個字符。

2.3 toJSON() 方法

有時候，JSON.stringify() 不能滿足某些對象的自定義序列化的要求。這時，我們可以使用對象上的 toJSON() 方法，返回其自身的 JSON 數(shù)據(jù)格式。

可以為任何對象添加 toJSON() 方法：

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017,
    toJSON: function () {
      return this.title;
    }
  };
  var jsonText = JSON.stringify(book);
  console.log(jsonText);//"music"
</script>

可以讓 toJSON() 方法返回任何序列化的值；也可以返回 undefined，這時如果包含它的對象嵌入在另一個對象中，那么這個對象的值就會變成 null，如果包含的它的對象是頂級對象，那么這個對象就是 undefined。

一個對象傳入 JSON.stringify() 時，序列化該對象的順序是這樣的：
①. 如果存在 toJSON() 方法而且能通過它取得有效值時，就調(diào)用該方法。
②. 如果提供了第二個參數(shù)，就應(yīng)用這個函數(shù)過濾器，傳入這個過濾器的值是上一步返回的值。
③. 對第二步返回的每個值進行相應(yīng)的序列化。
④. 如果提供了第三個參數(shù)，就執(zhí)行相應(yīng)的格式化操作。

3 解析選項

JSON.parse() 也可以接收第二個參數(shù)，它是一個函數(shù)，這個函數(shù)會在每個鍵值對上調(diào)用，這個函數(shù)被稱為還原函數(shù)，它接收一個鍵和一個值，需要一個返回值。

如果這個還原函數(shù)返回 undefined，就表示要從結(jié)果中刪除相應(yīng)的鍵；如果返回其他值，則會將該值插入到結(jié)果中。在將日期字符串轉(zhuǎn)換為 Date 對象時，經(jīng)常要用到這個函數(shù)：

<script type="text/javascript">
  var book = {
    title: "music",
    authors: ["deniro"],
    edition: 1,
    year: 2017,
    releaseDate: new Date(2017, 6, 2)
  };
  var jsonText = JSON.stringify(book);
  var bookCopy = JSON.parse(jsonText, function (key, value) {
    if (key == "releaseDate") {
      return new Date(value);
    } else {
      return value;
    }
  });
  console.log(bookCopy.releaseDate.getFullYear());
</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

PS：這里再為大家推薦幾款相關(guān)的json在線工具供大家參考：

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論