隱藏實力的 JSON.stringify，原來還能夠這麼用！

JavaScript 有許多各司其職的函數。咱們天天都在用，但不知道他們的額外功能。直到有一天看了文檔以後才發現，它們原來有許多超出咱們想象的功能。JSON.stringify  就是其中一個。今天咱們就來聊聊這個隱藏實力的選手。

基本用法

JSON.stringify 方法接受一個參數並將其轉換成JSON 字符串形式。

const firstItem = { 
  title: 'Transformers', 
  year: 2007 
};

JSON.stringify(firstItem);
// {'title':'Transformers','year':2007}

複製代碼

當出現一個不能序列化成 JSON 字符串的元素時就會出現問題 。

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 
};

JSON.stringify(secondItem);
// {'title':'Transformers','year':2007,'starring':{}}

複製代碼

第二個參數

JSON.stringify 還有第二個參數，叫替換器參數。

你能夠傳一個字符串數組，做爲對象屬性白名單，這些屬性將會包含在輸出結果裏。

JSON.stringify(secondItem, ['title']);
// {'title':'Transformers'}

複製代碼

咱們能夠篩掉一些不想要的值。這些值要麼太大（好比 Error 對象），要麼沒法轉成可讀的JSON形式。

替換器參數也能夠是一個函數。該函數接受 JSON.stringify 方法遍歷對象時當前的屬性和值做爲參數。若是函數不返回任何值或者返回 undefined，當前節點就不會出如今結果裏。

JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()];
  }
  return value;
});
// {'title':'Transformers','year':2007,'starring':['Shia LaBeouf','Megan Fox']}

複製代碼

經過讓函數返回 undefined，能夠在結果裏刪除這些屬性。

JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
});
// {"year":2007,"starring":{}}

複製代碼

第二個參數還能夠用來建立簡單的對象哈希函數。但有一點要注意，JSON.stringify(obj)不能保證屬性的輸出順序，當序列化的結果用於哈希/校驗和的時，這點相當重要。爲此，咱們能夠把第二個參數設置爲Object.keys(obj).sort()，對象將會以這個順序序列化。

function objectHash(obj: object): string {
  const str = JSON.stringify(obj, Object.keys(obj).sort());
  return createHash('sha1').update(str).digest('hex');
}
複製代碼

第三個參數。

第三個參數設置最終字符串裏的空白縮進。若是參數是一個數字，那麼序列化的每一個層級都會用這個數量的空格符縮進。

JSON.stringify(secondItem, null, 2);
//{
//  "title": "Transformers",
//  "year": 2007,
//  "starring": {}
//}

複製代碼

若是第三個參數是字符串，就會替代空格符。

JSON.stringify(secondItem, null, '🦄');
//{
//🦄"title": "Transformers",
//🦄"year": 2007,
//🦄"starring": {}
//}

複製代碼

toJSON 方法

若是咱們序列化的對象有一個toJSON方法，它將會採用自定義的序列化過程。你能夠在方法裏返回一個新的值，這個值將會替換原始對象被序列化。

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 
    };
  }
};

console.log(JSON.stringify(thirdItem));
// {"name":"Transformers (2007)","actors":["Shia LaBeouf","Megan Fox"]}

複製代碼

最後

查看咱們平常使用的函數的文檔，有時候會有很多收穫。可能會有驚喜，咱們也能學到很多東西。保持對知識的渴求，常常讀讀文檔吧！

微信公衆號：1024譯站