JSON.stringify 新手入門

胖先森發表於2018-03-29
JSON

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

相關文章