JSON.parse()與JSON.stringify()高級用法

    JSON.parse()與JSON.stringify是將JSON對象與字元串互相轉換的方法，它們還有一些參數可以讓我們在實際應用中更加方便，現在介紹一下它們的高級用法

    JSON.parse()

         JSON.parse(jsonString, (key, value) => {}) 可以接受兩個參數，第一個就是我們已經熟悉的json字元串，第二個是一個回調函數，我們可以對返回的每一個value做處理，然後返回對應的value

const testJSON = {
   name: 'test',
   value:  7,
};

const jsonStr = JSON.stringify(testJSON);

JSON.parse(jsonStr, (key, value) => {
   if (typeof value === 'string') {
       return value.toUpperCase();
   }
   return value;
});

// {
       name: 'TEST',
       value: 7,
    }

   JSON.stringify()

         JSON.stringify(jsonObject, replace, space) 可以接受三個參數，第一個是json對象，第二個在轉成字元串前處理屬性值，第三個在字元串中插入空白符增強可讀性

    replace： 傳入的參數可以是一個數組，也可以是一個回調函數，作用都是用於處理屬性值；當是一個數組時，只有在數組中存在的屬性，才會出現在最終轉成的字元串中；當是一個回調函數時，可以處理每一個屬性值，然後返回經過處理的值，若返回值是undefined ，則該屬性值會被忽略，將不會出現在最終的字元串中。

   （註意： 當relace為數組，過濾屬性時，嵌套屬性同樣會被過濾掉）   

const testJSON = {
   name: 'test',
   cities: {
      shanghai: 1,
   },
};

JSON.stringify(testJSON, ['name']);

// "{"name": 'test'}"

JSON.stringify(testJSON, ['name', 'cities']);
 
//  "{"name": 'test', "cities": {}}"

JSON.stringify(testJSON, ['name', 'cities', 'shanghai']);

// "{"name": 'test', "cities": {"shanghai": 1}}"

JSON.stringify(testJSON, (key, value) => {
    if (key === 'cities') {
       return  'cities';
    } 
    return value;
});

// "{"name": 'test', "cities": 'cities'}"

JSON.stringify(testJSON, (key, value) => {
    if (key === 'shanghai') {
       return 9;
   }
   return value;
});

// "{"name": 'test', "cities": {"shanghai": 9}}"

   space: 傳入的參數可以是String或Number的值，如果是String值，則該字元串會作為空白符，字元串最長可為10個字元，如果超過了10個字元，那麼會截取前10個字元，若是undefined或null，則會被忽略，不會顯示空白符；如果是Number的值，表示會有多少個空格作為空白符，最大數值為10，超過10也會被當做10來處理，最小為1，小於1則無效，不會顯示空格

const testJSON = {
   name: 'test',
   city: 'shanghai',
};

JSON.stringify(testJSON, undefined, ' ');

// "{
       "name": 'test',
       "city": 'shanghai',
     }"

JSON.stringify(testJSON, undefined, '     ');

// "{
           "name": 'test',
           "city": 'shanghai',
     }"

JSON.stringify(testJSON, undefined, '\t');

// "{
        "name": 'test',
        "city": 'shanghai',
     }"

JSON.stringify(testJSON, undefined, '...');

// "{
      ..."name": 'test',
      ..."city": 'shanghai',
     }"

JSON.stringify(testJSON, undefined, 7);

// "{
             "name": 'test',
             "city": 'shanghai',   // 縮進7個空格
     }"

    toJSON方法

       如果一個被序列化的json對象擁有toJSON方法，那麼真正被序列化的值是toJSON方法返回的值，而不是本身的對象

const testJSON = {
   name: 'test',
   toJSON: () => {
      return { toJson: 'testJson' },
   },
};

JSON.stringify(testJSON);

// "{"toJson": 'testJson'}"

  JSON.stringify()序列化複雜的json對象

     有的json對象中包含函數，那麼序列化是會忽略掉函數，當我們想保留函數時，可以通過replace（回調函數）來處理

const testJSON = {
   name: 'test',
   getName: () => {
     return 'test';
   },
};

JSON.stringify(kTextJson, (key, value) => {
      if (typeof value === 'function') {
        return Function.prototype.toString.call(value);
      }
      return value;
    }, '\t'));

//  {
      "name": "test",
      "getName": "function getName() {\n    return 'test';\n  }"
    }

     參考文章：https://www.css88.com/archives/8735