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的目的分析
Jan 05 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js获取form的方法
May 06 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
angular2使用简单介绍
Mar 01 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
javascript中递归的两种写法
Jan 17 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue 解决IOS10低版本白屏的问题
Nov 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
美国批发供应商:Kole Imports
2019/04/10 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
教师个人自我评价范文
2014/04/13 职场文书
投资合作协议书范本
2014/04/17 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
事业单位考核材料
2014/05/21 职场文书
新书发布会策划方案
2014/06/09 职场文书
鼋头渚导游词
2015/02/05 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python