当前位置:首页 > 日记 > 正文

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

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

前言

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);// {}// Symbolsfoo.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 2this.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实现滑动解锁功能

javascript实现滑动解锁功能

解锁,功能,电脑软件,javascript,效果图:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } #slider-box { width: 300px; height: 50px; border-radius: …

如何在WPS文字中给照片刻上名字

如何在WPS文字中给照片刻上名字

文字,照片,刻上,名字,如何在,  在WPS文字中也可以给照片刻上名字,刻上名字的照片不仅精美,而且更加有专属的意义。以下是小编为您带来的关于在WPS文字中给照片刻上名字,希望对您有所帮助。在WPS文字中给照片刻上名字操作步骤1、在我们的WPS…

excel2013调出日历控件的方法excel

excel2013调出日历控件的方法excel

日历控件,方法,电脑软件,strong,  在Excel中2013中,日历控件跟其他版本的不一样,需要设置一下才可以看得到日历控件,下面是小编带来的关于excel2013调出日历控件的方法,欢迎阅读!excel2013调出日历控件的方法需要加载&ldquo;Microsoft Date A…

word页眉怎么设置距离

word页眉怎么设置距离

设置,页眉,教程,边距,距离,  有时候发现页眉的边距想要调整一下,但是新手不会,上网找怕麻烦,而且教程太乱没有统一的答案怎么办,哪里有设置页眉更好的方法??下面小编为大家介绍wps中的word怎样设置页眉边距的方法,希望能帮到大家。WPS中word…

彻底搞懂JavaScript中的apply和cal

彻底搞懂JavaScript中的apply和cal

方法,必看,电脑软件,JavaScript,apply,call和apply都是为了改变某个函数运行的context上下文而存在的,即为了改变函数体内部this的指向。因为JavaScript的函数存在定义上下文和运行时上下文以及上下文是可以改变的概念。回到目录定义fun.app…

详解vue-cil和webpack中本地静态的

详解vue-cil和webpack中本地静态的

问题解决方案,路径,静态,详解,电脑软件,本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下:1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的我们将图…

关于javascript sort | 排序你可能

关于javascript sort | 排序你可能

排序,电脑软件,javascript,sort,前言在Javascript数组排序中有一个sort()方法,sort()方法可以说分为两种,一种是文字数组排序,一种是数字数组排序。下面这篇文章主要和大家分享了关于最近学习javascript sort()排序发现了一点理解,下面话不多说了…

excel 用公式设置预警函数的方法

excel 用公式设置预警函数的方法

函数,方法,设置,公式,电脑软件,  在Excel中录入数据的时候可能会用到预警函数,或许有很多朋友不知道预警函数怎么用,下面是由小编分享的excel 用公式设置预警函数的方法,以供大家阅读和学习。excel 用公式设置预警函数的方法1条件格式,操作如…

Chrome调试折腾记之JS断点调试技巧

Chrome调试折腾记之JS断点调试技巧

断点调试,调试,技巧,电脑软件,Chrome,JS调试技巧技巧一:格式化压缩代码技巧二:快速跳转到某个断点的位置右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该…

jQuery实现在新增加的元素上添加事

jQuery实现在新增加的元素上添加事

方法,元素,事件,案例分析,电脑软件,本文实例讲述了jQuery实现在新增加的元素上添加事件方法。分享给大家供大家参考,具体如下:最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为o…

js判断数组是否包含某个字符串变量

js判断数组是否包含某个字符串变量

数组,字符串,实例变量,变量,电脑软件,最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值。举个例子,比如后台返回的例子是这样的:  var arr=[ { "status":"success", "activerUserData": [ {"ac…

Word中文档由横版变为竖版的操作技

Word中文档由横版变为竖版的操作技

文档,操作技巧,操作步骤,电脑软件,Word,  在word文档编辑排版过程中,有时需要把已经排好的横版改为竖版格式,以适应纸张大小要求。今天,小编就教大家在Word中文档由横版变为竖版的操作技巧。Word中文档由横版变为竖版的操作步骤横版的文档,大…