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 dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
JavaScript文档对象模型DOM
Nov 20 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
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
类之Prototype.js学习
2007/06/13 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
小学岗位竞聘方案
2014/01/22 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
语文教研活动总结
2014/07/02 职场文书
信息合作协议书
2014/10/09 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python