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无缝滚动代码
Jan 03 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
原生JS实现幻灯片
Feb 22 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
原生js无缝轮播插件使用详解
Mar 09 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
用PHP实现小型站点广告管理
2006/10/09 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
考博自荐信
2013/10/25 职场文书
土木工程应届生求职信
2013/10/31 职场文书
大学生校园创业计划书
2014/02/08 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
小班教师个人总结
2015/02/05 职场文书
产品调价通知函
2015/04/20 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
酒店员工手册范本
2015/05/14 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫