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

遼源網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

具體如下：

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

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

1 JSON 對(duì)象

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

JSON 對(duì)象有兩個(gè)方法：

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

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

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

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

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

2 序列化選項(xiàng)

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

2.1 過濾結(jié)果

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

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}

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

  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}

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

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

2.2 字符串縮進(jìn)

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

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

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

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

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

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

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

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

2.3 toJSON() 方法

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

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

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

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

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

3 解析選項(xiàng)

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

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

  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());

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