失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 一文搞懂JSON.stringify和JSON.parse(五)JSON.parse使用说明

一文搞懂JSON.stringify和JSON.parse(五)JSON.parse使用说明

时间:2020-06-12 19:20:14

相关推荐

一文搞懂JSON.stringify和JSON.parse(五)JSON.parse使用说明

一 JSON.parse特性

JSON.parse()就是将JSON字符串解析成字符串描述的JavaScript值或对象(将JSON数据解析为js原生值),例如:

JSON.parse('{}'); // {}JSON.parse('true'); // trueJSON.parse('"foo"'); // "foo"JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]JSON.parse('null'); // null

1.1写法 JSON.parse(text[, reviver])

text将要反序列化的字符串

reviver 可选函数转换器,用于修改解析生成的原始值,调用时机在parse函数返回之前

2.2 标签:json规范

JSON.parse() json需符合规范,不允许用逗号作为结尾

JSON.parse("[1, 2, ]");// 异常,逗号结尾JSON.parse('{"a" : 1, }');// 异常,逗号结尾

2.3 使用说明

后端返回的数据中有数组或对象的结构,却仍然以字符串的形式返回给前端;

let data = {records: [{"idid": "1","infoinfo": '[{"name":"张","age":60},{"name":"李","age":80}]'},{"idid": "2","infoinfo": '[{"name":"王","age":90},{"name":"郑","age":100}]'}]}

data.records.forEach(element => {element.infoinfo = JSON.parse(element.info)for(let i = 0, len = element.infoinfo.length; i < len; i++) {console.log(element.infoinfo[i].name) //张 李 王 郑}})

如果字符串外层使用双引号,内层也使用双引号,可以使用\转义一下;这个大家注意一下

let data = {records: [{"id": "1","info": "[{\"name\":\"张三\",\"age\":60},{\"name\":\"李四\",\"age\":80}]"},{"id": "2","info": “[{\"name\":\"王五\",\"age\":90},{\"name\":\"郑六\",\"age\":90}]”}]}

2.4参数使用说明

参数说明:

text:必需, 一个有效的 JSON 字符串。

reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

//注意解析顺序从里往外的顺序

created() {let JSONparse1 = '{"p": 5}';let JSONparse2 = '{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}';let JSONparse11 = JSON.parse(JSONparse1, function (k, v) {if (k === "") {return v;}return v * 2;});let JSONparse22 = JSON.parse(JSONparse2, function (k, v) {console.log(k); // 输出当前属性,最后一个为 ""//'1','2','4','6','5','3',''//注意解析顺序从里往外的顺序return v; // 返回修改的值});console.log(JSONparse11); //{p: 10}console.log(JSONparse22);},

关于序列化和反序列化导致返回顺序不一致问题,这个后端有jar包可以处理,前端可以不用考虑

一文搞懂JSON.stringify和JSON.parse(四)JSON.stringify九大特性_前端小云儿的博客-CSDN博客

如果觉得《一文搞懂JSON.stringify和JSON.parse(五)JSON.parse使用说明》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。