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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
javascript流程控制语句集合
Sep 18 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
自己的js工具 Event封装
2009/08/21 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
Python功能键的读取方法
2015/05/28 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python实现自动访问网页的例子
2020/02/21 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
理想演讲稿范文
2014/05/21 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
公司授权委托书
2014/10/17 职场文书
试用期辞职信范文
2015/03/02 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
入党积极分子群众意见
2015/06/01 职场文书
集结号观后感
2015/06/08 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers