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将相对地址转换为绝对地址示例代码
Jul 19 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Vuex提升学习篇
2018/01/11 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
python 文件与目录操作
2008/12/24 Python
Python实现批量压缩图片
2018/01/25 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
python实现网页录音效果
2020/10/26 Python
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
中职生自荐信
2013/10/13 职场文书
小学教师的自我评价范例
2013/10/31 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
教师自我鉴定范文
2014/03/20 职场文书
保护环境倡议书500字
2014/05/19 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
实习生辞职信范文
2015/03/02 职场文书
2015年公务员工作总结
2015/04/24 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
尊师重教主题班会
2015/08/14 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
关于vue中如何监听数组变化
2021/04/28 Vue.js