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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
Node 自动化部署的方法
Oct 17 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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
在字符串中把网址改成超级链接
2006/10/09 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php文件上传类的分享
2017/07/06 PHP
脚本收藏iframe
2006/07/21 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
django 多数据库及分库实现方式
2020/04/01 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
在校学生职业规划范文
2014/01/08 职场文书
部门年终奖分配方案
2014/05/07 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL