欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-17 16:51:22
前言 json已经逐渐替代xml被全世界的开发者广泛使用。本文深入讲解javascript中使用json.stringify的一些细节问题。首先简单回顾一下json和ja...

前言

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

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

上一篇: node中koa中间件机制详解

下一篇: