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

参考资料:

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

  1. 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 参数中强制指定包含了它们。
  1. 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,如果是别的类型就不行了,比如之前提到的数组。

JSON.stringify的三个参数(转载)的更多相关文章

  1. JSON.stringify的三个参数

    前段时间勾股有提到stringify是支持三个参数,刷新的了我的认知,后来查到文档才发现还真的是支持三个参数的. 参考资料: stringify stringify方法顾名思义,就是把JSON序列换, ...

  2. JSON.stringify()的深度使用

    在使用JSON.stringify()对JSON数据进行序列化时 1> 如果里面的属性是function,则会被忽略 const data = { a: 'a', fn: funciton() ...

  3. JSON.stringify()的用法

    **JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串,而我们一般只是用了第一个参数,没有在意过第二个以及第三个参数的妙用** **1.最常用的方式:** ...

  4. 你所不知道的JSON.stringify

    译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? 原文: What you didn’t know about JSON.Stringify 译者: ...

  5. JSON.stringify()

    概述 JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串. 语法 JSON.stringify(value[, replacer [, space] ...

  6. Js中JSON.stringify()与JSON.parse()与eval()详解及使用案例

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...

  7. 浅谈 JSON.stringify 方法

    一.前言 最近项目中,遇到需要将对象转换成字符串进行传递,上次写过一篇文章关于json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值.当时主要是用在有时候处理字符串和 ...

  8. $tojson和json.stringify的区别

    JSON.stringify(),将value(Object,Array,String,Number...)序列化为JSON字符串 JSON.parse(), 将JSON数据解析为js原生值 toJS ...

  9. JSON.stringify() 的深入理解

    目录 序言 语法 深入理解 序言 最近在看<你所不知道的javascript>[中卷]一书,第一部分是类型和语法.本文是基于这部分的产物.在强制类型转换->抽象值操作-> to ...

随机推荐

  1. relief中visio图出现问题处理

    需安装visio2010版本, 安装DsoFramer_KB311765_x86.exe 管理员权限打开cmd,运行regsvr32 dsoframer.ocx

  2. 【译】《C# Tips -- Write Better C#》

    [译]<C# Tips -- Write Better C#> <C# 奇淫巧技 -- 编写更优雅的 C#> 目录 介绍(Introduction) 第一部分:各种奇淫巧技(P ...

  3. 获取元素CSS样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Express NodeJs Web框架 入门笔记

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速地搭建一个完整功能的网 ...

  5. simulink创建简单模型

    创建简单模型 您可以使用 Simulink® 对系统建模,然后仿真该系统的动态行为.Simulink 允许您创建模块图,图中的各个连接模块代表系统的各个部分,信号代表这些模块之间的输入/输出关系.Si ...

  6. ASP.NET没有魔法——目录(完结)

    ASP.NET没有魔法——开篇-用VS创建一个ASP.NET Web程序 ASP.NET没有魔法——为什么使用ASP.NET ASP.NET没有魔法——第一个ASP.NET应用<MyBlog&g ...

  7. Java设计模式视频讲解

    设计模式(JAVA) 视频网址: http://www.qghkt.com/ 设计模式(JAVA)视频地址: https://ke.qq.com/course/318643?tuin=a508ea62 ...

  8. Linux学习历程——SUID、SGID、SBIT简介

    一.SUID.SGID.SBIT简介 SUID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件的属主身份来执行.SGID:对一个可执行文件,不是以发起者身份来获取资源,而是以可执行文件 ...

  9. vue笔记未整理

    全局组件 局部组件 子组件传值到父组件 父子组件传值 watch跟计算属性差不多,都会有缓存,计算属性优先 计算属性get set 对象 数组 对象 数组 不复用 改变数组 直接修改数组,页面没变化 ...

  10. Python爬虫爬取网页图片

    没想到python是如此强大,令人着迷,以前看见图片总是一张一张复制粘贴,现在好了,学会python就可以用程序将一张张图片,保存下来. 今天逛贴吧看见好多美图,可是图片有点多,不想一张一张地复制粘贴 ...