解密JSON.stringify()的參數使用

基本使用

通常狀況下，咱們使用JSON.stringify序列化對象，即將一個對象的屬性和值轉化爲字符串

let obj = { name:「ken」 };
JSON.stringify(obj ); //{'name':'ken'}

第二個參數

實際上並非全部的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(secondItem, ['title']);
// { 'title':'Transformers' }

將一個數組傳遞到第二個參數中，以數組中的元素做爲鍵值返回一個新的JSON對象

咱們也能夠傳遞一個函數到第二個參數中

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

傳入的這個函數，接收兩個值，即JSON對象中對應的鍵值對。經過這個方式能夠解決上述的部分數據不能被序列化的問題

第三個參數

JSON.stringify的第三個參數，用於控制序列比字符的間距（參數類型爲數字，縮進的字符寬度）

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

若是傳遞的是一個字符串，就會用字符串的內容替換掉空白的字符

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

toJSON方法

自定義stringify返回的內容

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"]}