前段时间勾股有提到stringify是支持三个参数,刷新的了我的认知,后来查到文档才发现还真的是支持三个参数的。

参考资料:

  • stringify

stringify方法顾名思义,就是把JSON序列换,其语法如下:

JSON.stringify(value[, replacer [, space]])

注意到它接收三个参数,后面2个参数是可选的。

只传一个参数

1 var data = {name:"niuzai",info:{age:18,sex:"male"}};
2
3 JSON.stringify(data); //{"name":"niuzai","info":{"age":18,"sex":"male"}}

这里要注意:stringily对data里的数据类型有一些要求:

  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
  • 就是不能保证hash结构的顺序是按照定义输出
1 JSON.stringify({x: 5, y: 6});
2 // '{"x":5,"y":6}' 或者 '{"y":6,"x":5}' 都可能

  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。
1 var obj = {"undefined":undefined,"func":function(){},"symbol":Symbol("")};
2 JSON.stringify(data); //"{}"
3
4 var arr = [undefined,Symbol(""),function(){}];
5 JSON.stringify(arr); //[null,null,null]

  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。
JSON.stringify({[Symbol("foo")]: "foo"});   //'{}'

  • 不可枚举的属性会被忽略
1 JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y:{value: 'y', enumerable: true } }) );
2 // '{"y":"y"}'

两个参数

第二个参数很有意思,可以为一个过滤函数,也可以是一个数组。

当为数组时被序列化的值的每个属性都会经过该函数的转换和处理,当为数组时则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中。

过滤函数

过滤函数还是比较有意思的,你可以控制输出,比如之前提到的会被忽略的类型,可以在这里人工的处理,强制输出(当然是别的类型)。

 1 var data = {
 2   name:"niuzai",
 3   info:{
 4     age:18,
 5     sex:"male"
 6   }
 7 };
 8
 9 JSON.stringify(data, function(key, val){
10   console.log("key is %s", key);
11   console.log("val is %s", typeof(val));
12   return val;
13 });
14 //key is
15 //key is
16 //val is object
17 //key is name
18 //val is string
19 //key is info
20 //val is object
21 //key is age
22 //val is number
23 //key is sex
24 //val is string
25 "{"name":"niuzai","info":{"age":18,"sex":"male"}}"

注意:这里一定要return一个值给下一个遍历函数作为参数传入,如果不return的话,后面的遍历就没法玩下去了。

数组

1 JSON.stringify(data, ["name", "info", "sex"]);
2
3 //age由于不在列表里,所以没被序列化
4 //"{"name":"niuzai","info":{"sex":"male"}}"

三个参数

第三参数space用来控制结果字符串里面的间距。如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);如果是一个字符串,则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)。

 1 JSON.stringify(data,null,10);
 2 //每一个层级比上一个多10个空格
 3 "{
 4           "name": "niuzai",
 5           "info": {
 6                     "age": 18,
 7                     "sex": "male"
 8           }
 9 }"
10
11 JSON.stringify(data,null,'\t');
12 //每一个层级比上一个多一个制表符
13 "{
14   "name": "niuzai",
15   "info": {
16     "age": 18,
17     "sex": "male"
18   }
19 }"

toJSON 方法

如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为

 1 var data = {
 2   name:"niuzai",
 3   info:{
 4     age:18,
 5     sex:"male"
 6   },
 7   toJSON:function(){
 8     return "by toJSON";
 9   }
10 };
11
12 JSON.stringify(data);
13 //""by toJSON"";

注意:这里的toJSON必须是一个function,如果是别的类型就不行了,比如之前提到的数组。

转载于:https://www.cnblogs.com/JQstronger/p/9052435.html

JSON.stringify的三个参数(转载)相关推荐

  1. 浅谈 JSON.stringify 方法

    原文:浅谈 JSON.stringify 方法 一.前言 最近项目中,遇到需要将对象转换成字符串进行传递,上次写过一篇文章关于json字符串转换成json对象,json对象转换成字符串,值转换成字符串 ...

  2. JSON.parse()、JSON.stringify()和eval()的作用

    浅谈JSON.parse().JSON.stringify()和eval()的作用 相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: "JSON(JavaScript Obje ...

  3. JSON.stringify的作用

    是一个用于序列化对象的方法 接受三个参数:json.stringify(value,replacer,space) 第一个参数:value表示要被序列化的对象(接受对象或数组类型) 第二个参数:rep ...

  4. 学透JSON.stringify

    场景介绍 项目中用到JSON.stringify的机会特别多,但是稍不注意就会出现问题 eg : public singInfo = [{fieldId: 539,value: undefined}, ...

  5. 隐藏实力的 JSON.stringify,原来还可以这么用!

    作者简介: 李中凯老师,8年前端开发,前端负责人,擅长JavaScript/Vue. 公众号:1024译站 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b5800 ...

  6. JSON.parse和JSON.stringify方法

    JSON.parse() JSON.parse()方法将json字符串转化为Javascript值或对象. 语法 JSON.parse(text[,reviver]) 参数 text:要被解析成Jav ...

  7. php json.parse,JSON.parse()与JSON.stringify()和eval()使用方法详解

    这次给大家带来JSON.parse()与JSON.stringify()和eval()使用方法详解,JSON.parse()与JSON.stringify()和eval()使用的注意事项有哪些,下面就 ...

  8. JSON.stringify() 方法

    JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以替换值,或者如果指定了replacer是一个 ...

  9. ajax 传字符串到后台,JSON.stringify()将JSON对象转换为字符串通过Ajax传入到后台处理...

    搜索热词 最近在做一个小小的功能模块,前台有很多的数据需要传入到后台,前台页面设计如下: 看起来不是很清楚,总之表单中的数据都要提交到后台进行处理,然后插入到数据库,而且是一起提交到后台的,实现的方法 ...

最新文章

  1. pytorch使用horovod多gpu训练
  2. 基于pygame的射击小游戏制作(二)射击子弹
  3. 【白话机器学习】算法理论+实战之EM聚类
  4. 【LeetCode】191. Number of 1 Bits
  5. 截至11日14时37分,“11.11京东全球好物节”累计下单金额突破1794亿元
  6. ARM处理器系统初始化过程
  7. oracle一步一步01
  8. 真倒霉,前不久分區表錯誤把我數據全部搞沒了
  9. 最懂基金经理的第三方机构猫头鹰,到底是谁?
  10. 泛型方法,java map按照value值来比较大小并且返回最终结果
  11. Vue删除表格数据-调用逻辑
  12. 基于PHP的留言板毕业论文,网络留言板
  13. 学习记录 内存频率 内存通道 内存带宽 对计算的影响
  14. 瞬变抑制二极管TVS原理简介
  15. e470c拆机图解全拆 thinkpad_e470c拆机图解全拆 thinkpad_THINKPAD e470硬盘拆解教程是?...
  16. 计算机专业个税,税后工资个税计算器
  17. python的十句名言_洗脑最厉害的10句名言名句
  18. 服务器网口显示感叹号,业务服务器或更新服务器连接失败(认证失败,黄色感叹号)怎么回事?...
  19. 公共数据库挖掘第一步-GEO数据库下载表达谱数据和生存数据
  20. 【金融大脑-一支优秀的队伍】比赛经验分享

热门文章

  1. profibus 主站软件_PROFIBUS网络的DP主站与DP从站
  2. SQL Server高级查询之子查询(子查询非典型应用)
  3. php微信转跳浏览器代码,通用微信QQ跳转浏览器打开代码
  4. 二叉树 中序遍历 python_leetcode No.105 从前序与中序遍历序列构造二叉树
  5. c#生成静态库_在 Blazor WebAssembly 静态网站中部署ML.NET机器学习模型
  6. [leetcode]476. 数字的补数
  7. 2013蓝桥杯C++B:错误票据
  8. hduoj 6000 2016CCPC-final B. Wash(贪心)
  9. Region proposal学习笔记
  10. Matlab 小波变换dwt和wavedec