JSON stringify方法原理及实例解析


Posted in Javascript onOctober 23, 2020

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明:

value:

必需, 要转换的 JavaScript 值(通常为对象或数组)。

replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。

如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

space:

可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。

返回值:
返回包含 JSON 文本的字符串。

实例

var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
 
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
document.write( "使用参数情况:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出

但是 IE6-7 下没有 JSON 对象,所以要借助json2.js来实现。

今天我们来简单介绍下stringify方法的一些正确使用姿势吧。

当然,让高手们贱笑了,本文只是分享一些方法给新手朋友们。

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, 遍历数据重新提取下即可。
例如:

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第二个参数即可简单处理这种问题。

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 修改为男女,那么第二个参数可以用回调函数来处理。

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);

第二个参数如此强悍,为我们省去了不少麻烦。

还有第三个参数,用于格式化字符串用的。

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);

其实,我觉得这是个非常鸡肋的功能,,一般情况下却是没啥用。

好了,今天的分享就这些了,希望对新手朋友有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 #Javascript
vuejs实现下拉框菜单选择
Oct 23 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP求最大子序列和的算法实现
2011/06/24 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
Django 中 cookie的使用
2017/08/17 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现电子词典
2020/04/23 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Numpy的简单用法小结
2019/08/28 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
个人总结与自我评价
2015/02/14 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python