你所不知道的JSON.stringify
译者按: 老司机们,你知道JSON.stringify
还有第二个和第三个可选参数吗?它们是什么呢?
原文: What you didn’t know about JSON.Stringify
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
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
是一个过滤函数或则一个数组包含要被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的元素的时候的区别
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。
自从2016年双十一正式上线,Fundebug累计处理了6亿+错误事件,得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用!
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/08/17/what-you-didnt-know about-json-stringify/
你所不知道的JSON.stringify的更多相关文章
- 你所不知道的JSON
译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? JSON已经逐渐替代XML被全世界的开发者广泛使用.本文深入讲解JavaScript中使用JSON. ...
- js值----你所不知道的JavaScript系列(6)
1.数组 在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串.数字.对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的) .----<你所不知道的JavaS ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 一些你所不知道的VS Code插件
摘要: 你所不知道的系列. 原文:提高 JavaScript 开发效率的高级 VSCode 扩展之二! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 作为一名业余爱好者.专业人员,甚 ...
- 你所不知道的setInterval
在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval:作为拥有广泛应用场景(定时器,轮播图,动画效果,自动滚动等等),而又充满各种不确定性的这set ...
- 你所不知道的setTimeout
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
- 你真的会玩SQL吗?你所不知道的 数据聚合
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- 你所不知道的linq(二)
上一篇说了from in select的本质,具体参见你所不知道的linq.本篇说下from...in... from... in... select 首先上一段代码,猜猜结果是什么? class P ...
- 你所不知道的SQL Server数据库启动过程,以及启动不起来的各种问题的分析及解决技巧
目前SQL Server数据库作为微软一款优秀的RDBMS,其本身启动的时候是很少出问题的,我们在平时用的时候,很少关注起启动过程,或者很少了解其底层运行过程,大部分的过程只关注其内部的表.存储过程. ...
随机推荐
- package-lock.json,我们应该了解
原谅我占2017年12月31日一个坑,后续补上
- weexpack打包weex项目运行/打包记录
构建weex项目 安装weex-toolkit cnpm install -g weex-toolkit 初始化一个项目只需新建文件夹并在目录下执行 weex init 即可 安装依赖:cnpm in ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- [node.js] fs.renameSync()报错
初学node.js,跟着node入门,操作了一遍.在最后一步,上传图片并显示时遇到报错 fs.js: throw err; ^ Error: ENOENT: no such file or direc ...
- odoo开发笔记--from视图隐藏顶部&tree视图保留
场景描述: 开发过程中,有时候我们需要去除odoo自带的一些样式, 比如,form视图,要集成自定义的界面时,就希望把顶部的服务动作 和 分页按钮 隐藏掉. 处理方式: 分两种情况: 1. 保留顶部区 ...
- VP9 vs H.265——下一代视频编码标准的王道之争
目前下一代主流的视频编码标准有 ITU-T VCEG 推出来的 H.265 和 Google 推出 VP9 . H.265 在 H.264 的基础上保留其中的部分技术,并对相关技术加以改进研发而成.新 ...
- html标签详解(1)
http标签详解及讲解 1.基础标签 <!DOCTYPE html> <!--表示文本类型--> <html> <!--<html> ...
- Android--UI之ImageSwitcher
前言 这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用.ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可 ...
- 数据结构(一) 单链表的实现-JAVA
数据结构还是很重要的,就算不是那种很牛逼的,但起码得知道基础的东西,这一系列就算是复习一下以前学过的数据结构和填补自己在这一块的知识的空缺.加油.珍惜校园中自由学习的时光.按照链表.栈.队列.排序.数 ...
- python元组类型
元组类型简介 使用括号包围的数据结构是元组(tuple).例如: >>> (1,2,3) (1, 2, 3) >>> T = (1,2,3,) >>&g ...