原文 | https://abdulapopoola.com/2017/02/27/what-you-didnt-know-about-json-stringify/

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

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

1. JSON.stringify

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

還有哪些屬性也不能轉(zhuǎn)換？JSON.stringify函數(shù)將一個JavaScript對象轉(zhuǎn)換成文本化的JSON。不能被文本化的屬性會被忽略。foo中屬性b的值是函數(shù)定義，沒有被轉(zhuǎn)換而丟失。

1. 循環(huán)引用

如果一個對象的屬性值通過某種間接的方式指回該對象本身，那么就是一個循環(huán)引用。比如：

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

屬性c指向自己，如果層層解析，將會進入一個無限循環(huán)。我們嘗試將其打印出來看看：

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

在函數(shù)式語言Haskell中，因為有Lazy Evaluation技術(shù)，可以使用類似的定義方法。

2. Symbol和undefined

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

在數(shù)組中，不可被stringify的元素用null填充。例外情況

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

為什么有些屬性無法被stringify呢？這樣可以保持數(shù)組本身的“形狀”，也就是每一個元素原本的索引。

因為JSON是一個通用的文本格式，和語言無關(guān)。設想如果將函數(shù)定義也stringify的話，如何判斷是哪種語言，并且通過合適的方式將其呈現(xiàn)出來將會變得特別復雜。特別是和語言相關(guān)的一些特性，比如JavaScript中的Symbol。

ECMASCript官方也特意強調(diào)了這一點：

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函數(shù)

一個繞過對象某些屬性無法stringify的方法就是實現(xiàn)對象的toJSON方法來自定義被stringify的對象。因為幾乎每一個AJAX調(diào)用都會使用JSON.stringify，掌握該技巧將會對處理服務器交互有很大幫助。

和toString允許你將對象中的元素以字符串(string)的形式返回類似，toJSON提供了一種可以將對象中不能stringify的屬性轉(zhuǎn)換的方法，使得接下來調(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實例ade的process函數(shù)沒有被stringify。假想如果服務器只想要ade的全稱，而不是分別獲取姓和名，我們可以直接定義toJSON來達到目的：

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

定義toJSON的優(yōu)點是復用性和穩(wěn)定性，你可以將ade配合任何庫使用，傳輸?shù)臄?shù)據(jù)都將是你通過toJSON定義而返回的fullName。

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

3. 可選參數(shù)

JSON.stringify完整的定義如下：

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

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

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

1. 數(shù)組

只有在數(shù)組中的屬性被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}}"

定義過濾數(shù)組有時候并不能滿足需求，那么可以自定義過濾函數(shù)。

2. 函數(shù)

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

• 返回undefined表示忽略該屬性；

• 返回字符串，布爾值或則數(shù)字將會被stringify；

• 返回對象將會觸發(fā)遞歸調(diào)用知道遇到基本類型的屬性；

• 返回無法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}}"

通過改寫上面的函數(shù)加入適當?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

space

你是否意識到調(diào)用默認的JSON.stringify返回的值只要一行，而且完全沒有空格？如果想要更加美觀的打印出來，那么就需要使用space這個參數(shù)了。

我告訴你一個非常簡單的方法：通過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}// }"

一道三顆星的思考題：為什么打印結(jié)果的倒數(shù)第三行有兩個a呢？

結(jié)論

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

• 無法stringify的幾種類型

• 使用toJSON來自定義JSON.stringify的屬性

• 可選參數(shù)replacer的兩種定義方法來過濾屬性

• 可選參數(shù)space用來格式化輸出結(jié)果

• 數(shù)組和對象中如果包含無法stringify的元素的時候的區(qū)別

學習更多技能

請點擊下方公眾號