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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 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学习之PHP变量
2006/10/09 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
Python os模块学习笔记
2015/06/21 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python3转换code128条形码的方法
2019/04/17 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
初任培训自我鉴定
2013/10/07 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
新闻稿标题
2015/07/18 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书