淺談 JSON.stringify 方法

一、前言

最近項目中，遇到需要将對象轉換成字元串進行傳遞，上次寫過一篇文章關于json字元串轉換成json對象，json對象轉換成字元串，值轉換成字元串，字元串轉成值。當時主要是用在有時候處理字元串和json對象之間的轉換，寫的主要是怎麼用，涉及到JSONstringify具體用法沒有涉及到，有時候對于一個JSON.stringify自帶的方法掌握一下，可能會對于一個問題有更快的解決方案。

文章同步的社群：http://www.mwcxs.top/page/426.html 

二、用法執行個體

1、方法的定義

2、JSON.stringify提供了參數分離出自己需要的那部分資料

3、JSON.stringify提供了參數回調函數做一個映射關系

4、JSON.stringify提供了參數格式化字元串

用過JSON都知道，把一個對象通過stringify之後變成字元串，再送出給背景或者存儲在storage是很常用的手段（storage是存的key，value；value隻能存字元串，而不能是json對象）。

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
console.log(data,'數組');
var str_json = JSON.stringify(data);
console.log(str_json,'字元串');      

這個是日常的用法，非常簡單。

JSON.stringify ( value [, replacer] [ , space] )      

參數：

（1）value：必選，要轉換的值（包括所有的資料類型，通常是對象或者數組）

（2）replace：可選，用于要轉換結果的函數或者數組；如果replace是數組，僅僅是轉換具有該鍵值的成員，成員的轉換順序和鍵在數組中的順序一緻；如果replace是函數，會傳入每一個成員的鍵和值，使用的是傳回值而不是原始值，如果函數傳回的是undefined，則排除該成員。檢視了JSON2的源碼，

rx_escapable.lastIndex = 0;
        return rx_escapable.test(string)
            ? "\"" + string.replace(rx_escapable, function (a) {
                var c = meta[a];
                return typeof c === "string"
                    ? c
                    : "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
            }) + "\""
            : "\"" + string + "\"";
    }      

确認并不會傳入每個成員的鍵和值，而僅僅以空字元串形式調用replacer函數。該函數的實質是自定義的用于轉化為JSON字元串的函數。

 （3）space：可選， 向傳回值JSON 文本添加縮進、空格和換行符以使其更易于讀取。

　如果省略space，則将生成傳回值文本，而沒有任何額外空格。

　如果 space是一個數字，則傳回值文本在每個級别縮進指定數目的空格。 如果 space 大于 10，則文本縮進 10 個空格。

　如果 space是一個非空字元串（例如“\t”），則傳回值文本在每個級别中縮進字元串中的字元。

　如果 space 是長度大于 10個字元的字元串，則使用前 10 個字元。

2、JSON.stringify提供了分離出自己需要的那部分資料

比如說這個場景，我們的資料非常的複雜，有類似頭像，昵稱，個人簽名等，可是我儲存在本地，隻需要使用者名，性别，怎麼搞？

方法一：可以用周遊數組重新提取一下

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
/*日常用法*/
//console.log(data,'數組');
//var str_json = JSON.stringify(data);
//console.log(str_json,'字元串');

/*提取使用者名和性别*/
for(var i=0,new_data=[];i<data.length;i++){
    new_data.push({
        name: data[i].name,
        sex: data[i].sex
    });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);      

方法二：的确可以這麼幹，但是JSON.stringify提供了參數分離出自己需要的那部分資料

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
/*日常用法*/
//console.log(data,'數組');
//var str_json = JSON.stringify(data);
//console.log(str_json,'字元串');

/*提取使用者名和性别-方法1*/
//for(var i=0,new_data=[];i<data.length;i++){
//    new_data.push({
//        name: data[i].name,
//        sex: data[i].sex
//    });
//}
//var str_json = JSON.stringify(new_data);
//console.log(str_json);
/*提取使用者名和性别-方法2*/
var str_json = JSON.stringify(data,["name","sex"]);
console.log(str_json);      

第二個參數隻要傳入需要的keys數組，就非常輕松的處理這個

 3、JSON.stringify提供了回調函數做一個映射關系

比如說，我們把sex裡的1,0修改為男，女 ，那麼第二個參數可以通過回調函數來處理這個映射關系。

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
/*日常用法*/
//console.log(data,'數組');
//var str_json = JSON.stringify(data);
//console.log(str_json,'字元串');

/*提取使用者名和性别-方法1*/
//for(var i=0,new_data=[];i<data.length;i++){
//    new_data.push({
//        name: data[i].name,
//        sex: data[i].sex
//    });
//}
//var str_json = JSON.stringify(new_data);
//console.log(str_json);
/*提取使用者名和性别-方法2*/
//var str_json = JSON.stringify(data,["name","sex"]);
//console.log(str_json);

/*回調函數做一個映射關系*/
var str_json = JSON.stringify(data,function(key,value){
    if(key == 'sex'){
        return ["女",'男'][value];
    }
    return value;
});
console.log(str_json);      

第二個參數很厲害，省去了不少的麻煩

第三個參數，用于格式化字元串 

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
/*日常用法*/
//console.log(data,'數組');
//var str_json = JSON.stringify(data);
//console.log(str_json,'字元串');

/*提取使用者名和性别-方法1*/
//for(var i=0,new_data=[];i<data.length;i++){
//    new_data.push({
//        name: data[i].name,
//        sex: data[i].sex
//    });
//}
//var str_json = JSON.stringify(new_data);
//console.log(str_json);
/*提取使用者名和性别-方法2*/
//var str_json = JSON.stringify(data,["name","sex"]);
//console.log(str_json);

/*回調函數做一個映射關系*/
//var str_json = JSON.stringify(data,function(key,value){
//    if(key == 'sex'){
//        return ["女",'男'][value];
//    }
//    return value;
//});
//console.log(str_json);

/*格式化字元串*/
var str_json = JSON.stringify(data,null,'\t');
console.log(str_json);
var str_json = JSON.stringify(data,['name','sex'],'\t');
console.log(str_json);      

一般情況下用不上，除了可以用于導出這些資料，儲存本地檢視友善。

最後附上js的代碼，使用node就可以運作這個js

var data =[
{
    name: "程咬金",sex:"1",age:26    
},
{
    name: "程才",sex:"0",age:20
},
{
    name: "程新松",sex:"1",age:22    
},
{
    name: "程功",sex:"1",age:18    
}
];
/*日常用法*/
//console.log(data,'數組');
//var str_json = JSON.stringify(data);
//console.log(str_json,'字元串');

/*提取使用者名和性别-方法1*/
//for(var i=0,new_data=[];i<data.length;i++){
//    new_data.push({
//        name: data[i].name,
//        sex: data[i].sex
//    });
//}
//var str_json = JSON.stringify(new_data);
//console.log(str_json);
/*提取使用者名和性别-方法2*/
//var str_json = JSON.stringify(data,["name","sex"]);
//console.log(str_json);

/*回調函數做一個映射關系*/
var str_json = JSON.stringify(data,function(key,value){
    if(key == 'sex'){
        return ['女','男'][value];
        /*該處注釋等價于return ['女','男'][value];*/
//        if(value == 0 ){
//            value = '女';
//        }else{
//            value = '男';
//        }
    }
    return value;
});
console.log(str_json);

/*格式化字元串*/
//var str_json = JSON.stringify(data,null,'\t');
//console.log(str_json);
//var str_json = JSON.stringify(data,['name','sex'],'\t');
//console.log(str_json);      

注意：

1、JSON.stringify會自動把所要轉換内容中的漢字轉換為Unicode編碼

2、浏覽器間有差别，個别浏覽器會把将要送出表單内容中的Unicode編碼自動轉為漢字（Chrome自動轉換，IE不轉）

文中有錯誤的地方希望指出，共同進步