JSON.stringify 新手入門

JSON.stringify 入門

用過 json 的應該都知道，把一個對象經過 stringify 以後提交給後臺是很經常使用的手段。可是 IE6-7 下沒有 JSON 對象，因此要藉助 json2.js 來實現。

1.經典用法

var data = [
     {name: "悟空", sex:1, age: 30},
     {name: "八戒", sex:0, age: 20},
     {name: "唐僧", sex:1, age: 30}
 ];//JavaScript數組中包含對象
//將JavaScript對象轉換爲JSON格式的字符串
var str_json = JSON.stringify(data);
console.log(str_json);
//運行結果爲:
//[{"name":"悟空","sex":1,"age":30},{"name":"八戒","sex":0,"age":20},{"name":"唐僧","sex":1,"age":30}]
複製代碼

So easy! 這個也是咱們最經常使用的方式

2.複雜數據的提取

好比說，咱們的數據很是複雜，還有相似頭像，暱稱，我的簽名之類的信息。但是我保存在本地，只須要用戶名和性別,若是操做呢？咱們能夠經過提供的第二參數搞定,遍歷數據從新提取下便可。

a.傳統方式提取數據思路

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];
//傳統方式提取數據
var new_data = [];
for (var i=0, new_data=[]; i<data.length; i++) {
    //構建行的數組
    new_data.push({
        name: data[i].name,
        sex:  data[i].age
    });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);
複製代碼

b.使用stringify的第二參數搞定提取數據

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","age"]);
console.log(str_json);
//運行結果 
//[{"name":"悟空","age":30},{"name":"八戒","age":20},{"name":"唐僧","age":30}]
複製代碼

第二個參數只要傳入須要的keys數組，就很是輕鬆的就完成這種處理了。

固然若是咱們要更糾結的處理，好比要把 1,0 修改成男女，那麼第二個參數能夠用回調函數來處理。

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,function (key, value) {
    if(key==="sex"){
        return ["男生","女生"][value];
    }
    return value;
});
console.log(str_json);
// [{"name":"悟空","sex":"女生","age":30},{"name":"八戒","sex":"男生","age":20},{"name":"唐僧","sex":"女生","age":30}]
複製代碼

3.第三個參數"吳用"

很是雞肋的一個參數,基本沒有用過,看本身的狀況!

var data = [
    {name: "悟空", sex:1, age: 30},
    {name: "八戒", sex:0, age: 20},
    {name: "唐僧", sex:1, age: 30}
];

var str_json = JSON.stringify(data,["name","sex"],"\t");
console.log(str_json);
/* [ { "name": "悟空", "sex": 1 }, { "name": "八戒", "sex": 0 }, { "name": "唐僧", "sex": 1 } ] */
複製代碼

不懂請查看api

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify