你可能不知道的JSON.stringify()详解


Posted in Javascript onAugust 17, 2017

前言

JSON已经逐渐替代XML被全世界的开发者广泛使用。本文深入讲解JavaScript中使用JSON.stringify的一些细节问题。首先简单回顾一下JSON和JavaScript:

  • 不是所有的合法的JSON都是有效的JavaScript;
  • JSON只是一个文本格式;
  • JSON中的数字是十进制。

1. JSON.stringify

let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"

JSON.stringify函数将一个JavaScript对象转换成文本化的JSON。不能被文本化的属性会被忽略。foo中属性b的值是函数定义,没有被转换而丢失。

还有哪些属性也不能转换?

1. 循环引用

如果一个对象的属性值通过某种间接的方式指回该对象本身,那么就是一个循环引用。比如:

var bar = {
 a: {
  c: foo
 }
};
var foo = {
 b: bar
};

属性c指向自己,如果层层解析,将会进入一个无限循环。我们尝试将其打印出来看看:

let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}

c的属性指向foo对象,foo对象中的b属性又指向bar对象而无法处理,整个被忽略而返回空对象。

如下定义(原文中的例子)是无法通过编译的:

let foo = {b : foo};

错误信息:

ReferenceError: foo is not defined
 at repl:1:14

在函数式语言Haskell中,因为有Lazy Evaluation技术,可以使用类似的定义方法。

2. Symbol和undefined

let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}

例外情况

在数组中,不可被stringify的元素用null填充。

let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"

这样可以保持数组本身的“形状”,也就是每一个元素原本的索引。

为什么有些属性无法被stringify呢?

因为JSON是一个通用的文本格式,和语言无关。设想如果将函数定义也stringify的话,如何判断是哪种语言,并且通过合适的方式将其呈现出来将会变得特别复杂。特别是和语言相关的一些特性,比如JavaScript中的Symbol。

ECMASCript官方也特意强调了这一点:

It does not attempt to impose ECMAScript's internal data representations on other programming languages. Instead, it shares a small subset of ECMAScript's textual representations with all other programming languages.

2. 重写对象toJSON函数

一个绕过对象某些属性无法stringify的方法就是实现对象的toJSON方法来自定义被stringify的对象。因为几乎每一个AJAX调用都会使用JSON.stringify,掌握该技巧将会对处理服务器交互有很大帮助。

和toString允许你将对象中的元素以字符串(string)的形式返回类似,toJSON提供了一种可以将对象中不能stringify的属性转换的方法,使得接下来调用的JSON.stringify可以将其转换成JSON格式。

function Person (first, last) {
 this.firstName = first;
 this.last = last;
}
 
Person.prototype.process = function () {
 return this.firstName + ' ' +
   this.lastName;
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

Person实例ade的process函数没有被stringify。假想如果服务器只想要ade的全称,而不是分别获取姓和名,我们可以直接定义toJSON来达到目的:

Person.prototype.toJSON = function () {
 return { fullName: this.process(); };
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

定义toJSON的优点是复用性和稳定性,你可以将ade配合任何库使用,传输的数据都将是你通过toJSON定义而返回的fullName。

// jQuery
$.post('endpoint', ade);
 
// Angular 2
this.httpService.post('endpoint', ade)

3. 可选参数

JSON.stringify完整的定义如下:

JSON.stringify(value, replacer?, space?)

replacer和space都是可选参数,接下来我们来分别讲解。

Replacer

replacer是一个过滤函数或则一个数组包含要被stringify的属性名。如果没有定义,默认所有属性都被stringify。

1. 数组

只有在数组中的属性被stringify:

let foo = {
 a : 1,
 b : "string",
 c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"

嵌套属性也同样会被过滤:

let bar = {
 a : 1,
 b : { c : 2 }
};
JSON.stringify(bar, ['a', 'b']);
//"{"a":1,"b":{}}"
 
JSON.stringify(bar, ['a', 'b', 'c']);
//"{"a":1,"b":{"c":2}}"

定义过滤数组有时候并不能满足需求,那么可以自定义过滤函数。

2. 函数

过滤函数以对象中的每一个属性和值作为输入,返回值有以下几种情况:

  • 返回undefined表示忽略该属性;
  • 返回字符串,布尔值或则数字将会被stringify;
  • 返回对象将会触发递归调用知道遇到基本类型的属性;
  • 返回无法stringify的值将会被忽略;
let baz = {
 a : 1,
 b : { c : 2 }
};
 
// 返回大于1的值
let replacer = function (key, value) {
 if(typeof === 'number') {
  return value > 1 ? value: undefined;
 }
 return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

通过改写上面的函数加入适当的输出,可以看到具体的执行步骤:

let obj = {
 a : 1,
 b : { c : 2 }
};
 
let tracer = function (key, value){
 console.log('Key: ', key);
 console.log('Value: ', value);
 return value;
};
 
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2

space

你是否意识到调用默认的JSON.stringify返回的值只要一行,而且完全没有空格?如果想要更加美观的打印出来,那么就需要使用space这个参数了。

我告诉你一个非常简单的方法:通过tab(‘\t')来分割即可。

let space = {
 a : 1,
 b : { c : 2 }
};
 
// 使用制表符
JSON.stringify(space, undefined, '\t');
// "{
// "a": 1,
// "b": {
// "c": 2
// }
// }"
 
JSON.stringify(space, undefined, '');
// {"a":1,"b":{"c":2}}
 
// 自定义分隔符
JSON.stringify(space, undefined, 'a');
// "{
// a"a": 1,
// a"b": {
// aa"c": 2
// a}
// }"

一道三颗星的思考题:为什么打印结果的倒数第三行有两个a呢?

结论

本文介绍了一些使用toJSON的技巧:

  • 无法stringify的几种类型
  • 使用toJSON来自定义JSON.stringify的属性
  • 可选参数replacer的两种定义方法来过滤属性
  • 可选参数space用来格式化输出结果
  • 数组和对象中如果包含无法stringify的元素的时候的区别

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

原文: What you didn't know about JSON.Stringify

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
vue组件Prop传递数据的实现示例
Aug 17 #Javascript
js实现随机点名小功能
Aug 17 #Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
You might like
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
phpstorm编辑器乱码问题解决
2014/12/01 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
json的使用小结
2016/06/08 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python机器学习之神经网络(三)
2017/12/20 Python
Django自定义manage命令实例代码
2018/02/11 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python selenium自动化测试模型图解
2020/04/15 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python压包的概念及实例详解
2021/02/17 Python
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
入党介绍人评语
2014/05/06 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
运动会闭幕词
2015/01/28 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
python图像处理 PIL Image操作实例
2022/04/09 Python