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插件开发详细教程
Jun 06 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue项目支付功能代码详解
Feb 18 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
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
javascript动态加载三
2012/08/22 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python Pygame的具体使用讲解
2017/11/03 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python 处理图片像素点的实例
2019/01/08 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
毕业证丢失证明
2014/01/15 职场文书
家长对小学生的评语
2014/01/28 职场文书
广播体操比赛口号
2014/06/10 职场文书
社区服务标语
2014/07/01 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
追悼会答谢词
2015/01/05 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
opencv检测动态物体的实现
2021/07/21 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
python如何将mat文件转为png
2022/07/15 Python