为了账号安全,请及时绑定邮箱和手机立即绑定

【ES5】给JSON对象提供的方法

标签:
JavaScript

JSON在JS中,是一个关于键值对的对象。

很多人会这样写

var json = {    a: 10};console.log(json);

会输出一下内容


https://img1.sycdn.imooc.com//5d31c5800001ae3602070080.jpg



但真正正确的写法是“键”要加双引号

var json = {    "a": 10};console.log(json);

但最后输出表面上是一模一样的。


https://img1.sycdn.imooc.com//5d31c5820001edc501580066.jpg


如果能坚持,最好还是加上双引号。

上面的写法是JSON的一个缩写形式。
真正写全的话是这样写

var json = new Object();
json.a = 10;console.log(json);

输出的东西也是没有任何区别的。



JS发展到ES5时,JSON就变成了一个专门的对象。

console.log(JSON);

输出一下内容


https://img1.sycdn.imooc.com//5d31c58700016ede05230113.jpg


这就是ES5提供的对象。

这里面有2个最常用的方法,一个是parse,一个是stringify。

parse:把字符串转换成JSON

var string = '{a:10}';console.log(JSON.parse(string));

会发现输出的东西报错了。


https://img1.sycdn.imooc.com//5d31c58b0001d39405110082.jpg


原因很简单,因为上面写的字符串,没有按JSON的严格模式来写。


var string = "{'a':10}";
console.log(JSON.parse(string));

这样写同样会报错,因为这里的 键 是用单引号包起来的。




正确写法:

var string = '{"a":10}';console.log(JSON.parse(string));

只有写法正确才能正确转换。


https://img1.sycdn.imooc.com//5d31c58f0001f76702380072.jpg





parse的第二个参数:函数

var string = '{"a":10, "b":20, "c":30}';JSON.parse(string, function(key,vlaue){    console.log(key, vlaue);
})

会输出一下内容


https://img1.sycdn.imooc.com//5d31c5930001e6ef01070062.jpg


键 和 值 都被输出出来了。

parse参数

第一个参数:必须是一个正确格式的字符串(key必须是双引号包着)。

第二个参数:可以放一个function。这个function里可以放2个参数,分别是key和value。
key对应的就是要解析的json的key
value对应的就是要解析的json的value

stringify
把json转换成字符串

var json = {a:20};console.log(JSON.stringify(json));

需要注意,我这里的json没有按严格模式来写(并没有加双引号包着键)。


https://img1.sycdn.imooc.com//5d31c597000131d401310044.jpg


用 stringify 输出的结果是以严格模式来返回给我们的。

说白了,不管我们写的json是不是按照严格模式来写,用stringify转换后返回给我们的都是按照严格模式来返回。

stringify的第二个参数也是一个函数。
不过stringify的第二个参数,主要是过滤作用。

var json = {a:20, b:30, c:50};console.log(JSON.stringify(json, function(key, value) {    if(value == 30) {            return undefined;
    } else {                    return value;
    }
}));

输出


https://img1.sycdn.imooc.com//5d31c59a000119a501510037.jpg


上面代码的意思是,如果value是30,就返回undefined,其他的返回自身value。
所以输出的时候,b就没了。

stringify 还有第三个参数,作用是推进。

var json = {a:20, b:30, c:50};console.log(JSON.stringify(json, function(key, value) {    if(value == 30) {            return undefined;
    } else {            return value;
    }
}, 1));

输出结果会更好看


https://img1.sycdn.imooc.com//5d31c59d0001e92901050083.jpg


第三个参数最多是10。效果自己试试。

stringify 参数

第一个参数:就是一个json。

第二个参数:一个过滤用的函数。

第三个参数:推进。

通常parse和stringify都只用第一个参数。后面的2-3个参数在实战的时候可能用得没那么多。



作者:滑滑兔
链接:https://www.jianshu.com/p/02e2b6110260


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消