小技巧之JSON.stringify()/parse()

JSON

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。它基於 ECMAScript (w3c制定的js規範)的一個子集，採用徹底獨立於編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成爲理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提高網絡傳輸效率。

JSON.stringify()

用於把一個JSON對象（恩，javascript中萬物皆對象），轉化爲一個字符串。

JSON._proto_能夠查看到JSON來自於Object。

直接使用

var obj = [
        {
            name:'Jansen1',
            age:18,
            sex:'boy'
        },
        {
            name:'Jansen2',
            age:18,
            sex:'boy'
        },
        {
            name:'Jansen3',
            age:18,
            sex:'boy'
        },
        {
            name:'Jansen4',
            age:18,
            sex:'boy'
        }
    ];
   var myStringObj = JSON.stringify(obj);

能夠看到，經過該操做就能夠把obj轉化爲字符串啦。

第二個參數replacer

JSON.stringify呢不單單能夠直接轉化字符串，還能有條件的轉化字符串，這個時候就要用到第二個參數了.

• 當參數爲一個數組的時候，能夠經過key來篩選最終要轉化的字符串JSON.stringify(obj,['name','age'])

• 當參數爲一個函數的時候，轉化的結果，全依賴於函數的返回值。處理順序是若是是個數組，處理到數組第一號元素髮現仍是數組或是對象的時候就進去循環，直到全部的能遍歷的都被處理到再進行下一個運算。JSON.stringify(obj,(key,val)=>{if(key!='sex')return val})

第三個參數-space格式化參數

文本添加縮進、空格和換行符,若是space是個數字的化，最大值是10，過10爲10

JSON.stringify(obj,null,4)

能夠看到，在控制檯輸出的代碼變的很規整了。

JSON.parse()

JSON.parse只擁有兩個參數，第一個就是把這個字符串轉換爲JSON對象，第二個就是篩選對象
那麼如今若是再有這樣的需求，把一個JSON對象下的全部屬性爲sex中的boy，替換爲male，girl替換爲female，age大於20的age條目不顯示，只要20如下的小鮮肉，那麼就很好處理啦

var testJSON = [
    {
        "name": "Jansen1",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "Jansen2",
        "age": 2,
        "sex": "girl"
    },
    {
        "name": "Jansen3",
        "age": 19,
        "sex": "girl"
    },
    {
        "name": "Jansen4",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen5",
        "age": 22,
        "sex": "boy"
    },
    {
        "name": "Jansen6",
        "age": 22,
        "sex": "girl"
    },
    {
        "name": "Jansen7",
        "age": 19,
        "sex": "boy"
    },
    {
        "name": "Jansen8",
        "age": 19,
        "sex": "boy"
    }
];

var newJSON = JSON.parse(JSON.stringify(testJSON,(key,val)=>{
  if(key === 'sex'){
    return val === 'boy' ? 'male' : 'female';
  }
  if(key === 'age' && val < 20){
    return val
  }
  else if(key !== 'age'){
    return val;
  }
},4))

是否是很容易呢

兼容性

這兩個方法在IE8級以上都可以實用，須要兼容低版本的瀏覽器，能夠在代碼裏引用json2.js

連接裏的代碼就是本身實現的一個JSON，當瀏覽器能檢測到有JSON的時候，就會用如今的，若是檢測不到，纔會執行代碼。
有興趣的能夠先想一想不帶參數的JSON.stringify如何實現再去看看這個連接裏的寫法