有意思的JSON.parse（）、JSON.stringify（）

前言

如今JSON格式在web開發中很是重要，特別是在使用ajax開發項目的過程當中，常常須要將後端響應的JSON格式的字符串返回到前端，前端解析成JS對象值（JSON 對象），再對頁面進行渲染。 在數據傳輸過程當中，JSON是以文本，即字符串的形式傳遞的，而JS操做的是JSON對象，因此，JSON對象和JSON字符串之間的相互轉換是關鍵。

1.JSON格式

簡單說一下JSON格式,JSON格式就是一種表示一系列的「值」的方法，這些值包含在數組或對象之中，是它們的成員。

對於這一系列的「值」，有以下幾點格式規定：

• 數組或對象的每一個成員的值，能夠是簡單值，也能夠是複合值。

• 簡單值分爲四種：字符串、數值（必須以十進制表示）、布爾值和null（NaN, Infinity, -Infinity和undefined都會被轉爲null）。

• 複合值分爲兩種：符合JSON格式的對象和符合JSON格式的數組。

• 數組或對象最後一個成員的後面，不能加逗號。

• 數組或對象之中的字符串必須使用雙引號，不能使用單引號。

• 對象的成員名稱必須使用雙引號。

如下是合格的JSON值:

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

複製代碼

如下是不合格的 JSON 值：

{ name: "張三", 'age': 32 }  // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進制值

{ "name": "張三", age: undefined } // 不能使用undefined

{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName": function() {
      return this.name;
  }
} // 不能使用函數和日期對象

複製代碼

注意⚠️：

空數組和空對象都是合格的JSON值，null自己也是一個合格的JSON值。

2. 解析JSON

全部現代瀏覽器都支持 JSON對象，有兩個很是有用的方法來處理 JSON 格式的內容：

JSON.parse(string) ：接受一個 JSON 字符串並將其轉換成一個 JavaScript 對象。 JSON.stringify(obj) ：接受一個 JavaScript 對象並將其轉換爲一個 JSON 字符串。

2.1 JSON.stringify()

在寫JavaScript的時候，咱們用JSON.stringify將某個值序列化爲一個字符串值來表示一個對象。

小栗子：

JSON.stringify({
    name: "Samara",
    country: "Jimbabwe"
});
// 輸出結果:  "{"name":"Samara","country":"Jimbabwe"}"

JSON.stringify("Oh look, a string!");
// 輸出結果： ""Oh look, a string!""

JSON.stringify([1,2,"open","the","door"]);
// 輸出結果： "[1,2,"open","the","door"]"

複製代碼

注意⚠️：

1. undefined 值、函數或者XML值會被忽略
2. 若是你的數組當中含有 undefined值，函數或XML值，該數組中的這些值將會被當成 null

再舉一個栗子：

JSON.stringify({
    doStuff: function() { },
    doThings: [ function() {}, undefined ]
});
// 輸出結果:  "{"doThings":[null,null]}"
複製代碼

分析：

上面代碼中，原始對象的doStuff屬性是一個函數，JSON.stringify方法返回的字符串會將這個屬性省略。而doThings屬性是一個數組，成員分別爲函數和undefined，它們都被轉成了null。

正則對象會被轉成空對象。

JSON.stringify(/foo/) // "{}"
複製代碼

2.1.1 JSON.stringify 方法會忽略對象的不可遍歷屬性

var obj = {};
Object.defineProperties(obj, {
  'foo': {
    value: 1,
    enumerable: true
  },
  'bar': {
    value: 2,
    enumerable: false
  }
});

JSON.stringify(obj); // {"foo":1}
複製代碼

分析： 當對象的屬性設置成不可遍歷，使用JSON.stringify處理該對象時會忽略掉這部分屬性。 上面代碼中，bar是obj對象的不可遍歷屬性，JSON.stringify方法會忽略這個屬性。

2.1.2 JSON.stringify 方法的第二個參數

1. JSON.stringify方法還能夠接受一個數組參數，指定須要轉成字符串的屬性。

JSON.stringify({ a:1, b:2 }, ['a'])
// '{"a":1}'
複製代碼

分析：

上面代碼中，JSON.stringify方法的第二個參數指定，只轉a屬性。

2. JSON.stringify 方法還能夠接受一個函數做爲參數，用來更改默認的字符串化的行爲。

function f(key, value) {
  if (typeof value === "number") {
    value = 2 * value;
  }
  return value;
}

JSON.stringify({ a:1, b:2 }, f)
// '{"a":2,"b":4}'
複製代碼

上面代碼中的f函數，接受兩個參數，分別是被轉化對象的鍵和值。

若是一個鍵的值是數值，就將它乘以2，不然就原樣返回。

若是是多級嵌套的對象它會怎麼處理呢？

要點一 ：其實這個處理函數是遞歸處理全部的鍵。

接下來看一個比較有意思的栗子：

var o = {a: {b:1}};

function f(key, value) {
  console.log("["+ key +"]:" + value);
  return value;
}

JSON.stringify(o, f)
// []:[object Object] 
// [a]:[object Object]
// [b]:1
// '{"a":{"b":1}}'

複製代碼

分析：

上面的代碼中，對象 o 一共會被 f 函數處理三次。第一次鍵名爲空，鍵值是整個對象o；第二次鍵名爲a，鍵值是{b:1}；第三次鍵名爲b，鍵值爲1。

要點二： 遞歸處理中，每一次處理的對象，都是前一次返回的值。

var o = {a: 1};

function f(key, value){
  if (typeof value === "object"){
    return {b: 2};
  }
  return value*2;
}

JSON.stringify(o,f)
// '{"b":4}'
複製代碼

上面代碼中，f 函數修改了對象o,接着 JSON.stringify方法就遞歸處理修改後的對象o。

要點三： 若是處理函數返回undefined或沒有返回值，則該屬性會被忽略。

function f(key, value) {
  if (typeof(value) == "string") {
    return undefined;
  }
  return value;
}

JSON.stringify({ a:"abc", b:123 }, f)
// '{"b":123}'
複製代碼

分析：

上面代碼中，a屬性通過處理後，返回undefined，因而該屬性被忽略了。

2.1.3 JSON.stringify 方法的第三個參數

JSON.stringify還能夠接受第三個參數，用於增長返回的JSON字符串的可讀性。

若是是數字，表示每一個屬性前面添加的空格（最多不超過10個）；若是是字符串（不超過10個字符），則該字符串會添加在每行前面。

（1）當第三個參數爲數字的時候

下面的案例是當第三個參數爲數字的時候：

// 這是一段應用程序中的調試標記日誌
var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};

JSON.stringify(person)

// 咱們獲得的數據
'{"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"}'

// 咱們指望的格式
"{ "name": "Jim Cowart", "location": { "city": { "name": "Chattanooga", "population": 167674 }, "state": { "name": "Tennessee", "abbreviation": "TN", "population": 6403000 } }, "company": "appendTo" }"
複製代碼

若是咱們獲得一段數據可是它的可讀性不是很好，咱們指望它變成咱們想要的可讀性更棒的格式，這個時候就運用到了JSON.stringify的第三個參數了。

var person = {
    name: "Jim Cowart",
    location: {
        city: {
            name: "Chattanooga",
            population: 167674
        },
        state: {
            name: "Tennessee",
            abbreviation: "TN",
            population: 6403000
        }
    },
    company: "appendTo"
};
//若是你但願縮進量爲2 個空格，
// 你能夠這麼幹：
JSON.stringify(person, null, 2);
/* produces:
"{ "name": "Jim Cowart", "location": { "city": { "name": "Chattanooga", "population": 167674 }, "state": { "name": "Tennessee", "abbreviation": "TN", "population": 6403000 } }, "company": "appendTo" }"
*/
// 若是你但願使用 tab 縮進，那麼
// 你能夠傳入 \t 做爲第三個參數
// 以此來告別空格縮進
JSON.stringify(person, null, "\t");
/*輸出結果:
"{ "name": "Jim Cowart", "location": { "city": { "name": "Chattanooga", "population": 167674 }, "state": { "name": "Tennessee", "abbreviation": "TN", "population": 6403000 } }, "company": "appendTo" }"
*/
複製代碼

分析： 咱們看到它的第二個參數咱們傳的null,上面已經說過了第二個參數能夠爲數組也能夠爲函數。

若是第二個參數是一個數組，它將只輸出你在該數組中所想要包含的keys。

// 假定 person對象是上一例子中的那個，
JSON.stringify(person, ["name", "company"], 4);
/* 輸出結果:
"{ "name": "Jim Cowart", "company": "appendTo" }"
*/

複製代碼

若是第二個參數是函數，那麼這個函數須要有兩個參數：key 和 value ：

// a bit contrived, but it shows what's possible // FYI - 被序列化的值是第一個傳給replacerFn的東西, 也便是這個對象的每個key，所以須要檢查key的真假。 var replacerFn = function(key, value) { if(!key || key === 'name' || key === 'company') { return value; } return; //返回 undefined 並忽略 } JSON.stringify(person, replacerFn, 4); /* produces: "{ "name": "Jim Cowart", "company": "appendTo" }" */ 複製代碼

（2）當第三個參數爲字符串的時候

那麼還有一種狀況是第三個參數是字符串的時候：

JSON.stringify({ p1:1, p2:2 }, null, "|-");
// "{ |-"p1": 1, |-"p2": 2 }"

複製代碼

2.1.4 JSON.stringify 方法處理的對象，包含一個 toJSON 方法

若是JSON.stringify方法處理的對象，包含一個toJSON方法，則它會使用這個方法獲得一個值，而後再將這個值轉成字符串，而忽略其餘成員。

JSON.stringify({
  toJSON: function() {
    return "Cool"
  }
})
// "Cool"" var o = { foo: 'foo', toJSON: function() { return 'bar'; } }; var json = JSON.stringify({x: o}); // '{"x":"bar"}' 複製代碼

Date對象就部署了一個本身的toJSON方法。

JSON.stringify(new Date("2011-07-29"))
// "2011-07-29T00:00:00.000Z"

複製代碼

toJSON方法的一個應用是，能夠將正則對象自動轉爲字符串。

RegExp.prototype.toJSON = RegExp.prototype.toString;

JSON.stringify(/foo/)
// "/foo/"

複製代碼

分析： 上面代碼，在正則對象的原型上面部署了toJSON方法，將其指向toString方法，所以遇到轉換成JSON時，就正則對象就先調用toJSON方法轉爲字符串，而後再被JSON.stingify方法處理。

2.2 JSON.parse()

JSON.parse方法用於將JSON字符串轉化成對象。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name":"張三"}');
o.name // 張三

複製代碼

若是傳入的字符串不是有效的JSON格式，JSON.parse方法將報錯。

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

複製代碼

上面代碼中，雙引號字符串中是一個單引號字符串，由於單引號字符串不符合JSON格式，因此報錯。

爲了處理解析錯誤，能夠將JSON.parse方法放在try...catch代碼塊中。

2.2.1 JSON.parse()的第二個參數

JSON.parse方法能夠接受一個處理函數，用法與JSON.stringify方法相似。

function f(key, value) {
  if ( key === ""){
      return value;
  }
  if ( key === "a" ) {
    return value + 10;
  }
}

var o = JSON.parse('{"a":1,"b":2}', f);
o.a // 11
o.b // undefined
複製代碼

收。。。

看完是否是以爲咱們還能夠用這兩個方法作不少事情呢？