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

創(chuàng)新互聯(lián)公司是一家專業(yè)提供巧家企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站建設、成都網(wǎng)站設計、H5高端網(wǎng)站建設、小程序制作等業(yè)務。10年已為巧家眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。

具體如下：

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ù)交換的事實標準。

1 JSON 對象

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

默認情況下，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ù)，屬性名和屬性值。屬性名只能是字符串，如果它所對應的屬性值不是鍵值對結(jié)構(gòu)的值時，那么屬性名可以是空字符串。這個函數(shù)的返回值就是相應屬性名對應的值。如果函數(shù)返回 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 選項，這樣才能保證其他的值都能正常地出現(xiàn)在結(jié)果中。

Firefox 3.5 和 3.6 有一個 bug，在將函數(shù)作為方法的第二個參數(shù)時，只有返回 undefined 有效，而返回其他任何值都會在結(jié)果中包含相應的屬性，F(xiàn)irefox 4 修復了這個 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ù)，就應用這個函數(shù)過濾器，傳入這個過濾器的值是上一步返回的值。
③. 對第二步返回的每個值進行相應的序列化。
④. 如果提供了第三個參數(shù)，就執(zhí)行相應的格式化操作。

3 解析選項

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

如果這個還原函數(shù)返回 undefined，就表示要從結(jié)果中刪除相應的鍵；如果返回其他值，則會將該值插入到結(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>

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

本文名稱：JavaScript解析及序列化JSON的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/article12/ccepdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、App開發(fā)、網(wǎng)站設計公司、建站公司、用戶體驗、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)