JavaScript解析及序列化JSON的示例分析

這篇文章將為大家詳細講解有關JavaScript解析及序列化JSON的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

具體如下：

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

所以 JSON 就成為 web 開發中，用于數據交換的事實標準。

1 JSON 對象

早期的 JSON 解析器是使用 JavaScript 的 eval() 函數。因為 JSON 是 JavaScript 語法的子集，所以 eval() 函數可以解析并返回 JavaScript 對象。但使用這個函數存在風險，因為有可能會被執行一些惡意的代碼！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>

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

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

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

2 序列化選項

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

2.1 過濾結果

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

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

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

<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 選項，這樣才能保證其他的值都能正常地出現在結果中。

Firefox 3.5 和 3.6 有一個 bug，在將函數作為方法的第二個參數時，只有返回 undefined 有效，而返回其他任何值都會在結果中包含相應的屬性，Firefox 4 修復了這個 bug。

2.2 字符串縮進

JSON.stringify() 的第三個參數可以控制結果中的縮進和空白符。如果這個參數是數值，那么就表示是縮進的空格數，比如這里要縮進 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測試上述代碼，運行結果如下：

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

如果縮進參數是一個字符串，那么它會作為 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測試上述代碼，運行結果如下：

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

2.3 toJSON() 方法

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

可以為任何對象添加 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() 方法而且能通過它取得有效值時，就調用該方法。
②. 如果提供了第二個參數，就應用這個函數過濾器，傳入這個過濾器的值是上一步返回的值。
③. 對第二步返回的每個值進行相應的序列化。
④. 如果提供了第三個參數，就執行相應的格式化操作。

3 解析選項

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

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

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

關于“JavaScript解析及序列化JSON的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。