你所不知道的JSON.stringify

更新日期: 2021-10-11阅读: 1k标签: json

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

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


1. JSON.stringify

et 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的元素的时候的区别
原文: What you didn’t know about JSON.Stringify


链接: https://www.fly63.com/article/detial/10714

web数据格式中关于:XML/HTML/JSON学习总汇

这篇文章讲解关于XML/HTML/JSON的学习,大家都知道服务器端可以返回的数据格式,主要就是:XML、HTML、JSON,当我们做数据抓取,ajax请求的时候都需要熟悉它们的使用。

解决IE8下JSON.stringify()自动将中文转译成unicode的方法

在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即u****的形式。查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况。

js实现json格式化,以及json校验工具的简单实现

这篇文章主要讲解:json结构及形式、json字符串转化为json对象【通过eval( ) 方法,new Function形式,使用全局的JSON对象】、json校验格式化工具简单实现

解析Json字符串的三种方法

在很多时候,我们的需要将类似 json 格式的字符串数据转为json,下面将介绍日常中使用的三种解析json字符串的方法

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

js 将json字符串转换为json对象的方法解析

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

聊聊JSON Schema

json现在已经成为比较通用灵活的数据交换格式,尤其是在web方面,总是少不了它的身影,js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中,特别是在前后端分离的开发中,后端提供接口,前端通过接口拿取数据;

百度JSON LD结构化数据代码分享

百度JSON LD结构化数据代码分享,搞外贸网站,企业网站这么就,对谷歌的 schema 结构化数据比较熟悉,但是对百度的结构化数据就了解太少了

什么是JWT(JSON WEB TOKEN)

Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!