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

JSON

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

JSON.stringify()

用於把一個JSON對象(恩,javascript中萬物皆對象),轉化爲一個字符串。

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

直接使用

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);

clipboard.png

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

第二個參數replacer

JSON.stringify呢不單單能夠直接轉化字符串,還能有條件的轉化字符串,這個時候就要用到第二個參數了.
  • 當參數爲一個數組的時候,能夠經過key來篩選最終要轉化的字符串JSON.stringify(obj,['name','age'])github

clipboard.png

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

clipboard.png

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

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

JSON.stringify(obj,null,4)json

clipboard.png

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

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))

clipboard.png

是否是很容易呢網絡

兼容性

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

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