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中将Object转换为String函数代码 (json str)
Apr 29 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
多文件上传的例子
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
团结演讲稿范文
2014/05/23 职场文书
中学生逃课检讨书
2015/02/17 职场文书
党员承诺书格式范文
2015/04/28 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
PHP中多字节字符串操作实例详解
2021/08/23 PHP
一文搞懂Java中的注解和反射
2022/06/21 Java/Android