JSON.stringify

不是所有的合法的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.
  1. 重寫對象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)
  1. 可選參數

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
https://blog.fundebug.com/2017/08/17/what-you-didnt-know about-json-stringify/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章