譯者按: 老司機(jī)們，你知道JSON.stringify還有第二個(gè)和第三個(gè)可選參數(shù)嗎？它們是什么呢？

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

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

JSON已經(jīng)逐漸替代XML被全世界的開(kāi)發(fā)者廣泛使用。本文深入講解JavaScript中使用JSON.stringify的一些細(xì)節(jié)問(wèn)題。首先簡(jiǎn)單回顧一下JSON和JavaScript：

• 不是所有的合法的JSON都是有效的JavaScript；
• JSON只是一個(gè)文本格式；
• JSON中的數(shù)字是十進(jìn)制。

1. JSON.stringify

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)換而丟失。

還有哪些屬性也不能轉(zhuǎn)換？

1. 循環(huá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ù)，可以使用類(lèi)似的定義方法。

2. Symbol和undefined

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è)元素原本的索引。

為什么有些屬性無(wú)法被stringify呢？

因?yàn)镴SON是一個(gè)通用的文本格式，和語(yǔ)言無(wú)關(guān)。設(shè)想如果將函數(shù)定義也stringify的話(huà)，如何判斷是哪種語(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.

2. 重寫(xiě)對(duì)象toJSON函數(shù)

一個(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)的形式返回類(lèi)似，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的全稱(chēng)，而不是分別獲取姓和名，我們可以直接定義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)

3. 可選參數(shù)

JSON.stringify完整的定義如下：

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

replacer和space都是可選參數(shù)，接下來(lái)我們來(lái)分別講解。

Replacer

replacer是一個(gè)過(guò)濾函數(shù)或則一個(gè)數(shù)組包含要被stringify的屬性名。如果沒(méi)有定義，默認(rèn)所有屬性都被stringify。

1. 數(shù)組

只有在數(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í)候并不能滿(mǎn)足需求，那么可以自定義過(guò)濾函數(shù)。

2. 函數(shù)

過(guò)濾函數(shù)以對(duì)象中的每一個(gè)屬性和值作為輸入，返回值有以下幾種情況：

• 返回undefined表示忽略該屬性；
• 返回字符串，布爾值或則數(shù)字將會(huì)被stringify；
• 返回對(duì)象將會(huì)觸發(fā)遞歸調(diào)用知道遇到基本類(lèi)型的屬性；
• 返回?zé)o法stringify的值將會(huì)被忽略；

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ù)妮敵?，可以看到具體的執(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

space

你是否意識(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呢？

結(jié)論

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

• 無(wú)法stringify的幾種類(lèi)型
• 使用toJSON來(lái)自定義JSON.stringify的屬性
• 可選參數(shù)replacer的兩種定義方法來(lái)過(guò)濾屬性
• 可選參數(shù)space用來(lái)格式化輸出結(jié)果
• 數(shù)組和對(duì)象中如果包含無(wú)法stringify的元素的時(shí)候的區(qū)別

關(guān)于Fundebug

Fundebug專(zhuān)注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線(xiàn)，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶(hù)的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明:

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/17/what-you-didnt-know about-json-stringify/