譯者按: 老司機(jī)們，你知道JSON.stringify還有第二個(gè)和第三個(gè)可選參數(shù)嗎？它們是什么呢？
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。
JSON已經(jīng)逐漸替代XML被全世界的開(kāi)發(fā)者廣泛使用。本文深入講解JavaScript中使用JSON.stringify的一些細(xì)節(jié)問(wèn)題。首先簡(jiǎn)單回顧一下JSON和JavaScript：
重慶分公司
重慶分公司
let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"JSON.stringify函數(shù)將一個(gè)JavaScript對(duì)象轉(zhuǎn)換成文本化的JSON。不能被文本化的屬性會(huì)被忽略。foo中屬性b的值是函數(shù)定義，沒(méi)有被轉(zhuǎn)換而丟失。
如果一個(gè)對(duì)象的屬性值通過(guò)某種間接的方式指回該對(duì)象本身，那么就是一個(gè)循環(huán)引用。比如：
var bar = {
a: {
c: foo
}
};
var foo = {
b: bar
};屬性c指向自己，如果層層解析，將會(huì)進(jìn)入一個(gè)無(wú)限循環(huán)。我們嘗試將其打印出來(lái)看看：
let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}c的屬性指向foo對(duì)象，foo對(duì)象中的b屬性又指向bar對(duì)象而無(wú)法處理，整個(gè)被忽略而返回空對(duì)象。
如下定義(原文中的例子)是無(wú)法通過(guò)編譯的：
let foo = {b : foo};錯(cuò)誤信息：
ReferenceError: foo is not defined
at repl:1:14在函數(shù)式語(yǔ)言Haskell中，因?yàn)橛蠰azy Evaluation技術(shù)，可以使用類似的定義方法。
備注：原文中的例子不正確，感謝SegmentFault用戶xueshen1106指出，現(xiàn)在將他的評(píng)論貼在下方，供大家學(xué)習(xí)。
評(píng)論網(wǎng)址：你所不知道的JSON.stringify-Segmentfault
let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}在數(shù)組中，不可被stringify的元素用null填充。
let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"這樣可以保持?jǐn)?shù)組本身的“形狀”，也就是每一個(gè)元素原本的索引。
因?yàn)镴SON是一個(gè)通用的文本格式，和語(yǔ)言無(wú)關(guān)。設(shè)想如果將函數(shù)定義也stringify的話，如何判斷是哪種語(yǔ)言，并且通過(guò)合適的方式將其呈現(xiàn)出來(lái)將會(huì)變得特別復(fù)雜。特別是和語(yǔ)言相關(guān)的一些特性，比如JavaScript中的Symbol。
ECMASCript官方也特意強(qiáng)調(diào)了這一點(diǎn)：
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.
一個(gè)繞過(guò)對(duì)象某些屬性無(wú)法stringify的方法就是實(shí)現(xiàn)對(duì)象的toJSON方法來(lái)自定義被stringify的對(duì)象。因?yàn)閹缀趺恳粋€(gè)AJAX調(diào)用都會(huì)使用JSON.stringify，掌握該技巧將會(huì)對(duì)處理服務(wù)器交互有很大幫助。
和toString允許你將對(duì)象中的元素以字符串(string)的形式返回類似，toJSON提供了一種可以將對(duì)象中不能stringify的屬性轉(zhuǎn)換的方法，使得接下來(lái)調(diào)用的JSON.stringify可以將其轉(zhuǎn)換成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實(shí)例ade的process函數(shù)沒(méi)有被stringify。假想如果服務(wù)器只想要ade的全稱，而不是分別獲取姓和名，我們可以直接定義toJSON來(lái)達(dá)到目的：
Person.prototype.toJSON = function () {
return { fullName: this.process(); };
};
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"定義toJSON的優(yōu)點(diǎn)是復(fù)用性和穩(wěn)定性，你可以將ade配合任何庫(kù)使用，傳輸?shù)臄?shù)據(jù)都將是你通過(guò)toJSON定義而返回的fullName。
// jQuery
$.post('endpoint', ade);
// Angular 2
this.httpService.post('endpoint', ade)JSON.stringify完整的定義如下：
JSON.stringify(value, replacer?, space?)replacer和space都是可選參數(shù)，接下來(lái)我們來(lái)分別講解。
replacer是一個(gè)過(guò)濾函數(shù)或則一個(gè)數(shù)組包含要被stringify的屬性名。如果沒(méi)有定義，默認(rèn)所有屬性都被stringify。
只有在數(shù)組中的屬性被stringify：
let foo = {
a : 1,
b : "string",
c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"嵌套屬性也同樣會(huì)被過(guò)濾：
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}}"定義過(guò)濾數(shù)組有時(shí)候并不能滿足需求，那么可以自定義過(guò)濾函數(shù)。
過(guò)濾函數(shù)以對(duì)象中的每一個(gè)屬性和值作為輸入，返回值有以下幾種情況：
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}}"通過(guò)改寫(xiě)上面的函數(shù)加入適當(dāng)?shù)妮敵觯梢钥吹骄唧w的執(zhí)行步驟：
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你是否意識(shí)到調(diào)用默認(rèn)的JSON.stringify返回的值只要一行，而且完全沒(méi)有空格？如果想要更加美觀的打印出來(lái)，那么就需要使用space這個(gè)參數(shù)了。
我告訴你一個(gè)非常簡(jiǎn)單的方法：通過(guò)tab('\t')來(lái)分割即可。
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}
// }"一道三顆星的思考題：為什么打印結(jié)果的倒數(shù)第三行有兩個(gè)a呢？
本文介紹了一些使用toJSON的技巧：
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/17/what-you-didnt-know%20about-json-stringify/
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
