浅谈 JSON.stringify 方法
用过 json 的应该都知道,把一个对象通过 stringify 之后提交给后台或者存储在 Storage 里是很常用的手段。
但是 IE6-7 下没有 JSON 对象,所以要借助 json2.js 来实现。
今天我们来简单介绍下 stringify 方法的一些正确使用姿势吧。
当然,让高手们贱笑了,本文只是分享一些方法给新手朋友们。
1 2 3 4 5 6 7 | var data = [ {name: "王尼玛" , sex:1, age: 30}, {name: "王尼美" , sex:0, age: 20}, {name: "王大锤" , sex:1, age: 30} ]; var str_json = JSON.stringify(data); console.log(str_json); |
这个是我们日常用法,非常简单,对吧。
比如说,我们的数据非常复杂,还有类似头像,昵称,个人签名之类的信息。
可是我保存在本地,只需要用户名,和性别,肿么破呢?
也许你会说 so easy, 遍历数据重新提取下即可。
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var data = [ {name: "王尼玛" , sex:1, age: 30}, {name: "王尼美" , sex:0, age: 20}, {name: "王大锤" , sex:1, age: 30} ]; for ( var i=0, new_data=[]; i<data.length; i++) { new_data.push({ name: data[i].name, sex: data[i].sex }); } var str_json = JSON.stringify(new_data); console.log(str_json); |
确实分分钟搞定。
其实我们只需要用 stringify 第二个参数即可简单处理这种问题。
1 2 3 4 5 6 7 | 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" ]); console.log(str_json); |
第二个参数只要传入需要的keys数组,就非常轻松的就完成这种处理了。
当然如果我们要更纠结的处理,比如要把 1,0 修改为男女,那么第二个参数可以用回调函数来处理。
1 2 3 4 5 6 7 8 9 10 11 12 | var data = [ {name: "王尼玛" , sex:1, age: 30}, {name: "王尼美" , sex:0, age: 20}, {name: "王大锤" , sex:1, age: 30} ]; var str_json = JSON.stringify(data, function (k, v) { if (k === "sex" ) { return [ "女" , "男" ][v]; } return v; }); console.log(str_json); |
第二个参数如此强悍,为我们省去了不少麻烦。
还有第三个参数,用于格式化字符串用的。
1 2 3 4 5 6 7 8 9 | var data = [ {name: "王尼玛" , sex:1, age: 30}, {name: "王尼美" , sex:0, age: 20}, {name: "王大锤" , sex:1, age: 30} ]; var str_json = JSON.stringify(data, null , "\t" ); console.log(str_json); str_json = JSON.stringify(data, [ "name" , "sex" ], "\t" ); console.log(str_json); |
其实,我觉得这是个非常鸡肋的功能,,一般情况下却是没啥用。
好了,今天的分享就这些了,希望对新手朋友有所帮助。
参考资料:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述