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 放大镜 移动镜片效果代码
May 09 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP多文件上传实例
2015/07/09 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript判断非数字的简单例子
2013/07/18 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python控制台英汉汉英电子词典
2020/04/23 Python
python字符串排序方法
2014/08/29 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python中的函数作用域
2018/05/07 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
五一家具促销方案
2014/01/10 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python