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版DateAdd和DateDiff函数代码
Mar 01 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
es6函数之尾递归用法实例分析
Apr 25 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错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
python实现将元祖转换成数组的方法
2015/05/04 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
中学生自我评价范文
2014/02/08 职场文书
自荐书范文范例
2014/02/13 职场文书
颁奖典礼主持词
2014/03/25 职场文书
个人公开承诺书
2014/03/28 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
总经理聘用协议书
2015/09/21 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
使用Redis做预定库存缓存功能
2022/04/02 Redis