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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
最新最全的手机号验证正则表达式
Feb 24 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+mysql分页代码详解
2008/03/27 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
基于jquery的表格排序
2010/09/11 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
pytorch permute维度转换方法
2018/12/14 Python
python如何实现视频转代码视频
2019/06/17 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
中班中秋节活动反思
2014/02/18 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
先进班集体事迹材料
2014/12/25 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL