JSON.stringify() / JSON.parse()
Posted 大厨的笔记
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JSON.stringify() / JSON.parse()相关的知识,希望对你有一定的参考价值。
JSON.stringify() 这个方法可以把javascript对象转换成json字符串。
JSON.parse() 这个方法可以把 json 字符串转换成 javascript对象。
【下面来看一下这两个方法的详细解答】
json数据中没有变量和结尾的分号,并且数据必须是用双引号引起来的,单引号会报语法错误。
json的数据格式:
{ "name":"chef", "child":{ "name1":"children", "age1":[ "one", "two", "three" ], "hello":"world" }, "age":33 }
JSON.stringify()
把一段 javascript 对象序列化为 json 字符串忽略缩进与空格,并可以把单引号给你改成双引号,此方法还可以传入第二个参数,这第二个参数可以是一个数组,也可以是一个函数。如果是数组,那么数组元素一定要与javascript对象中的键相匹配(键值对的键)
如果是一个数组,那么表示序列化这个数组元素相对应的javascript对象的键值对
// 此对象贯穿全文 var js = { "name":"chef", "child":{ "name1":"children", "age1":[ "one", "two", "three" ], "hello":"world" }, "age":33 } // 把 javascript对象序列化为 json 字符串忽略缩进与空格 var js_json = JSON.stringify(js); console.log(js_json); //{"name":"chef","child":{"name":"children","age":["one","two","three"],"hello":"world"},"age":33} //序列化选项传入数组 var js_option = JSON.stringify(js,["child","age"]); //只序列化了指定的 键 :child age console.log(js_option); //{"child":{"age":["one","two","three"]},"age":33}
还可以传入一个函数,这个函数有两个参数,即(key,value)被序列化的json字符串的键值对,可以在函数的内部改变这些value
//序列化选项 传入一个函数 var js_fn = JSON.stringify(js,function(key,value){ switch(key){ case "age1": //把age1的值用逗号分隔成字符串 return value.join(","); case "name1": //把原来的值替换掉 return "直接把原来的值修改了"; case "hello": //删除该键值对 return undefined; //没有default这句获取不到数据 default: return value; } }); console.log("传入函数的结果:"+js_fn); //传入函数的结果:{"name":"chef","child":{"name1":"直接把原来的值修改了","age1":"one,two,three"},"age":33}
还可以传入第三个参数,(第二个参数不传可以写null) 第三个参数是控制json字符串缩进的,它是个数字或字符串,数字最多缩进10,如果传入的大于10则自动转化为10,如果传入的是字符串,则用这个字符串当做缩进符来代替空格
//传入第三个参数控制字符串缩进 var js_indent = JSON.stringify(js,null,4); console.log("缩进后的json字符串:"+js_indent); /* 浏览器执行效果: 缩进后的json字符串:{ "name": "chef", "child": { "name1": "children", "age1": [ "one", "two", "three" ], "hello": "world" }, "age": 33 } */
toJSON()
定义在javascript对象中,当序列化javascript对象的时候,会先调用toJSON方法然后序列化toJSON返回的值,如果toJSON方法return undefined,那么这个javascript对象的值就是undefined,如果包含toJSON方法的对象被嵌入在其他的对象里,那么包含toJSON方法的对象的值会变为null
var js_tojson = { name:‘chef‘, age:‘22‘, //在javascript对象中这样定义 toJSON 方法 toJSON:function(){ return {name:this.name,age:this.age}; } }; //调用stringify()方法序列化对象 var tojsonText = JSON.stringify(js_tojson); console.log("调用 toJSON 的结果:"+tojsonText) //调用 toJSON 的结果:{"name":"chef","age":"22"}
【序列化的顺序是先检查 javascript对象中是否有 toJSON方法,如果有那么先执行toJSON方法,返回什么就序列化什么】
stringify()参数的执行顺序:
1,第一个参数
2,检查toJSON并执行
3,第二个参数
4,第三个参数
JSON.parse()
把一段json字符串解析为原生javascript值 如果传给parse()的不是有效的json字符串,这个方法会抛出错误
// 把 json 字符串解析为原生javascript值 var json_js = JSON.parse(js_json); console.log(json_js); // Object {name: "chef", child: Object, age: 33}
parse()方法也有第二个参数,可以给它传一个函数,这个函数同样有两个值,(key,value)这个函数的功能跟 stringify()的第二个函数的功能一样
//==== perse() 的第二个参数 var perse_fn = { name:"chef", age:66, newDate: new Date() } //先把perse_fn对象转换成json字符串 var perse_json = JSON.stringify(perse_fn); //再把json字符串转为javascript对象 var perse_js = JSON.parse(perse_json,function(key,value){ switch(key){ case "name": //可以改变 value return value+"大厨的笔记"; case "newDate": //返回时间对象 return new Date(); // 这个 default 必须有,不然就 undefined 了, default: return value; } }); console.log(perse_js);//Object {name: "chef大厨的笔记", age: 66, newDate: Thu Nov 10 2016 22:52:20 GMT+0800 (中国标准时间)}
以上就是本人对 json 的总结。
以上是关于JSON.stringify() / JSON.parse()的主要内容,如果未能解决你的问题,请参考以下文章
json.stringify()与json.parse()的区别以及JSON.stringify()与toString()的区别
Json.stringify() 有啥用,没有 stringify [重复]
使用fast-json-stringify代替JSON.stringify