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

JSON · 發表 2018-11-12 11:01:01

摘要：前言現在 JSON 格式在web開發中非常重要，特別是在使用ajax開發專案的過程中，經常需要將後端響應的 JSON 格式的字串返回到前端，前端解析成JS物件值（ JSON 物件），再對頁面進行渲染。在資料傳輸過程中， JSON 是以文字，即字串的形式傳遞的，而J...

前言

現在 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;
}
} // 不能使用函式和日期物件

複製程式碼

注意:warning:：

空陣列和空物件都是合格的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"]"

複製程式碼

注意:warning:：

undefined 值、函式或者XML值會被忽略
如果你的陣列當中含有 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}
複製程式碼

分析：

上面程式碼中， 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
複製程式碼

收。。。

看完是不是覺得我們還可以用這兩個方法做很多事情呢？