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下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
js的写法基础分析
Jan 17 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
IDEA安装vue插件图文详解
Sep 26 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/07/28 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
python代码xml转txt实例
2020/03/10 Python
基于python实现地址和经纬度转换
2020/05/19 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
置业顾问岗位职责
2014/03/02 职场文书
小学教师评语大全
2014/04/23 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python