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

CNZPH 發(fā)布于2019-08-20 17:06 / 1054人閱讀

摘要：它基于制定的規(guī)范的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得成為理想的數(shù)據(jù)交換語(yǔ)言。用于把一個(gè)對(duì)象恩，中萬(wàn)物皆對(duì)象，轉(zhuǎn)化為一個(gè)字符串。可以查看到來(lái)自于。

JSON

JSON(JavaScript Object Notation, JS 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于 ECMAScript (w3c制定的js規(guī)范)的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語(yǔ)言。 易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。

JSON.stringify()

用于把一個(gè)JSON對(duì)象（恩，javascript中萬(wàn)物皆對(duì)象），轉(zhuǎn)化為一個(gè)字符串。

JSON._proto_可以查看到JSON來(lái)自于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);

可以看到，通過(guò)該操作就可以把obj轉(zhuǎn)化為字符串啦。

第二個(gè)參數(shù)replacer

JSON.stringify呢不僅僅可以直接轉(zhuǎn)化字符串，還能有條件的轉(zhuǎn)化字符串，這個(gè)時(shí)候就要用到第二個(gè)參數(shù)了.

當(dāng)參數(shù)為一個(gè)數(shù)組的時(shí)候，可以通過(guò)key來(lái)篩選最終要轉(zhuǎn)化的字符串JSON.stringify(obj,["name","age"])

當(dāng)參數(shù)為一個(gè)函數(shù)的時(shí)候，轉(zhuǎn)化的結(jié)果，全依賴于函數(shù)的返回值。處理順序是如果是個(gè)數(shù)組，處理到數(shù)組第一號(hào)元素發(fā)現(xiàn)還是數(shù)組或是對(duì)象的時(shí)候就進(jìn)去循環(huán)，直到所有的能遍歷的都被處理到再進(jìn)行下一個(gè)運(yùn)算。JSON.stringify(obj,(key,val)=>{if(key!="sex")return val})

第三個(gè)參數(shù)-space格式化參數(shù)

文本添加縮進(jìn)、空格和換行符,如果space是個(gè)數(shù)字的化，最大值是10，過(guò)10為10

JSON.stringify(obj,null,4)

可以看到，在控制臺(tái)輸出的代碼變的很規(guī)整了。

JSON.parse()

JSON.parse只擁有兩個(gè)參數(shù)，第一個(gè)就是把這個(gè)字符串轉(zhuǎn)換為JSON對(duì)象，第二個(gè)就是篩選對(duì)象
那么現(xiàn)在如果再有這樣的需求，把一個(gè)JSON對(duì)象下的所有屬性為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))

是不是很容易呢

兼容性

這兩個(gè)方法在IE8級(jí)以上都能夠?qū)嵱茫枰嫒莸桶姹镜臑g覽器，可以在代碼里引用json2.js

鏈接里的代碼就是自己實(shí)現(xiàn)的一個(gè)JSON，當(dāng)瀏覽器能檢測(cè)到有JSON的時(shí)候，就會(huì)用現(xiàn)在的，如果檢測(cè)不到，才會(huì)執(zhí)行代碼。
有興趣的可以先想想不帶參數(shù)的JSON.stringify如何實(shí)現(xiàn)再去看看這個(gè)鏈接里的寫(xiě)法