你所不知道的JSON.stringify

譯者按: 老司機們，你知道JSON.stringify還有第二個和第三個可選參數嗎？它們是什麼呢？

• 原文: What you didn’t know about JSON.Stringify
• 譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

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的元素的時候的區別

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了6億+錯誤事件，獲得了Google、360、金山軟件等衆多知名用戶的承認。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：
https://blog.fundebug.com/2017/08/17/what-you-didnt-knowabout-json-stringify/