你可能不知道的JSON.stringify()詳解

NO IMAGE

前言

JSON已經逐漸替代XML被全世界的開發者廣泛使用。本文深入講解JavaScript中使用JSON.stringify的一些細節問題。首先簡單回顧一下JSON和JavaScript:

不是所有的合法的JSON都是有效的JavaScript;
JSON只是一個文字格式;
JSON中的數字是十進位制。

1. JSON.stringify


let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"

JSON.stringify函式將一個JavaScript物件轉換成文字化的JSON。不能被文字化的屬性會被忽略。foo中屬性b的值是函式定義,沒有被轉換而丟失。

還有哪些屬性也不能轉換?

1. 迴圈引用

如果一個物件的屬性值通過某種間接的方式指回該物件本身,那麼就是一個迴圈引用。比如:


var bar = {
a: {
c: foo
}
};
var foo = {
b: bar
};

屬性c指向自己,如果層層解析,將會進入一個無限迴圈。我們嘗試將其列印出來看看:


let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}

c的屬性指向foo物件,foo物件中的b屬性又指向bar物件而無法處理,整個被忽略而返回空物件。

如下定義(原文中的例子)是無法通過編譯的:


let foo = {b : foo};

錯誤資訊:


ReferenceError: foo is not defined
at repl:1:14

在函式式語言Haskell中,因為有Lazy Evaluation技術,可以使用類似的定義方法。

2. Symbol和undefined


let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}

例外情況

在陣列中,不可被stringify的元素用null填充。


let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"

這樣可以保持陣列本身的“形狀”,也就是每一個元素原本的索引。

為什麼有些屬性無法被stringify呢?

因為JSON是一個通用的文字格式,和語言無關。設想如果將函式定義也stringify的話,如何判斷是哪種語言,並且通過合適的方式將其呈現出來將會變得特別複雜。特別是和語言相關的一些特性,比如JavaScript中的Symbol。

ECMASCript官方也特意強調了這一點:

It does not attempt to impose ECMAScript’s internal data representations on other programming languages. Instead, it shares a small subset of ECMAScript’s textual representations with all other programming languages.

2. 重寫物件toJSON函式

一個繞過物件某些屬性無法stringify的方法就是實現物件的toJSON方法來自定義被stringify的物件。因為幾乎每一個AJAX呼叫都會使用JSON.stringify,掌握該技巧將會對處理伺服器互動有很大幫助。

和toString允許你將物件中的元素以字串(string)的形式返回類似,toJSON提供了一種可以將物件中不能stringify的屬性轉換的方法,使得接下來呼叫的JSON.stringify可以將其轉換成JSON格式。


function Person (first, last) {
this.firstName = first;
this.last = last;
}
Person.prototype.process = function () {
return this.firstName   ' '  
this.lastName;
};
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

Person例項ade的process函式沒有被stringify。假想如果伺服器只想要ade的全稱,而不是分別獲取姓和名,我們可以直接定義toJSON來達到目的:


Person.prototype.toJSON = function () {
return { fullName: this.process(); };
};
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

定義toJSON的優點是複用性和穩定性,你可以將ade配合任何庫使用,傳輸的資料都將是你通過toJSON定義而返回的fullName。


// jQuery
$.post('endpoint', ade);
// Angular 2
this.httpService.post('endpoint', ade)

3. 可選引數

JSON.stringify完整的定義如下:


JSON.stringify(value, replacer?, space?)

replacer和space都是可選引數,接下來我們來分別講解。

Replacer

replacer是一個過濾函式或則一個陣列包含要被stringify的屬性名。如果沒有定義,預設所有屬性都被stringify。

1. 陣列

只有在陣列中的屬性被stringify:


let foo = {
a : 1,
b : "string",
c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"

巢狀屬性也同樣會被過濾:


let bar = {
a : 1,
b : { c : 2 }
};
JSON.stringify(bar, ['a', 'b']);
//"{"a":1,"b":{}}"
JSON.stringify(bar, ['a', 'b', 'c']);
//"{"a":1,"b":{"c":2}}"

定義過濾陣列有時候並不能滿足需求,那麼可以自定義過濾函式。

2. 函式

過濾函式以物件中的每一個屬性和值作為輸入,返回值有以下幾種情況:

返回undefined表示忽略該屬性;
返回字串,布林值或則數字將會被stringify;
返回物件將會觸發遞迴呼叫知道遇到基本型別的屬性;
返回無法stringify的值將會被忽略;


let baz = {
a : 1,
b : { c : 2 }
};
// 返回大於1的值
let replacer = function (key, value) {
if(typeof === 'number') {
return value > 1 ? value: undefined;
}
return value;
};
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

通過改寫上面的函式加入適當的輸出,可以看到具體的執行步驟:


let obj = {
a : 1,
b : { c : 2 }
};
let tracer = function (key, value){
console.log('Key: ', key);
console.log('Value: ', value);
return value;
};
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2

space

你是否意識到呼叫預設的JSON.stringify返回的值只要一行,而且完全沒有空格?如果想要更加美觀的列印出來,那麼就需要使用space這個引數了。

我告訴你一個非常簡單的方法:通過tab(‘\t’)來分割即可。


let space = {
a : 1,
b : { c : 2 }
};
// 使用製表符
JSON.stringify(space, undefined, '\t');
// "{
// "a": 1,
// "b": {
// "c": 2
// }
// }"
JSON.stringify(space, undefined, '');
// {"a":1,"b":{"c":2}}
// 自定義分隔符
JSON.stringify(space, undefined, 'a');
// "{
// a"a": 1,
// a"b": {
// aa"c": 2
// a}
// }"

一道三顆星的思考題:為什麼列印結果的倒數第三行有兩個a呢?

結論

本文介紹了一些使用toJSON的技巧:

無法stringify的幾種型別
使用toJSON來自定義JSON.stringify的屬性
可選引數replacer的兩種定義方法來過濾屬性
可選引數space用來格式化輸出結果
陣列和物件中如果包含無法stringify的元素的時候的區別

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援。

原文: What you didn’t know about JSON.Stringify

譯者: Fundebug

為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。

您可能感興趣的文章:

JSON.stringify 語法例項講解js解析與序列化json資料(一)json.stringify()的基本用法JSON.parse()和JSON.stringify()使用介紹關於JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法列印json物件的內容及JSON.stringify函式應用JSON.stringify轉換JSON時日期時間不準確的解決方法談談JSON物件和字串之間的相互轉換JSON.stringify(obj)和JSON.parse(string)jQuery解決IE6、7、8不能使用 JSON.stringify 函式的問題深入淺析JSON.parse()、JSON.stringify()和eval()的作用詳解淺談JSON.parse()和JSON.stringify()