前言
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"htmlcode">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 "{"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
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]