1. 首页
  2. 前端基础

带你深入理解JSON.stringify()

image

就我目前4年(实习了1年,965了1年,996了2年,算3年感觉少了,说是4年老司机也不为过吧。)的工作经验来看,JSON.stringify一般有以下用途:

  • 深拷贝:深拷贝引用类型的数据
  • 序列化:服务端存储重依赖前端的数据,localStorage/sessionStorage存储的数据

但其实除了上面两种常用的用法之外,JSON.stringify还有许多更加强大的特性,值得系统性学习。
关键是这些特性可能是你开发过程中经常用到的,只是你不知道而已

也许你觉得这是一篇枯燥的长篇大论的讲用法的博文,那么我就说几个有趣的场景吧:

  • 为什么这个对象明明有foo属性,序列化后在数据库持久化存储之后,这个属性咋就没了呢?
  • 为什么axios发送post请求时,如果req的body包含undefined值的参数,在发给服务端的请求中会消失?
  • 打印出的JSON字符串就这么不易读么?除了store成一个variable然后parse之外,能不能不parse就清晰看到它的数据结构呢?
  • 为什么序列化一个对象,它还报错呢?报的还是那种自己引用自己的错误?

如果这几个问题看了之后是一脸懵逼,那么一定要细细阅读一下这篇博文,答案就在文中。聪明的你一定会找到答案的。

  • 工作中常用JSON.stringify()
    • 深拷贝:深拷贝引用类型的数据(JSON.parse(JSON.stringify(obj/arr)))
    • 序列化:服务端存储重依赖前端的数据, localStorage/sessionStorage存储的数据(例如fabric.js的canvas模板数据,vue-amap的svg路径信息等等
      • 存储重前端功能的数据
      • localStorage/sessionStorage存储的数据
      • 查询JSON数据做解析
  • 初识JSON.stringify()
    • 序列化数据
    • 过滤数据
    • 格式化数据
  • JSON.stringify(value, [ ,replacer[ ,space]]) 语法
    • 参数
      • value
      • replacer(可选)
      • space(可选)
    • 返回值
    • 异常
      • TypeError “cyclic object value”
      • TypeError “BigInt value can’t be serialized in JSON”
  • JSON.stringify()描述
    • 常见使用须知
    • replacer 参数
      • 参数为函数
      • 参数为数组
    • space 参数
      • 参数为number
      • 参数为string
    • toJSON()的表现
  • JSON.stringify()序列化循环引用时的问题
    • 自引用对象抛出TypeError
    • JSON.stringify高德地图vue-amap中的自引用对象
    • 如何序列化自引用对象?
  • JSON.stringify()序列化具有相同属性相同值但属性顺序不同的对象,结果相等吗?
  • JOSN.stringify()与localStorage的使用示例
  • 回答一下文章开头的问题

工作中常用JSON.stringify()

深拷贝:深拷贝引用类型的数据(JSON.parse(JSON.stringify(obj/arr)))


const obj = { foo: 'hi', bar: { name: 'bar', age: 3 }, baz: ['hello','javascript'] } const arr = ['hi', { name: 'bar', age: 3 }, ['hello','javascript']]; const deepCopy = JSON.parse(JSON.stringify(obj/arr))

深拷贝之后,deepCopy会生成一个内存独立的obj或者arr。
也就是说obj/arr与deepCopy存储在不同的堆内存,修改obj/arr不会影响deepCopy,修改deepCopy也不会影响obj或者arr。

若是对于深浅拷贝不理解,建议先找资料系统性学习一下。

序列化:服务端存储重依赖前端的数据,localStorage/sessionStorage存储的数据

服务端存储重依赖前端的数据:例如fabric.js的canvas模板数据,vue-amap的svg路径信息等等。
localStorage/sessionStorage存储的数据: LocalStorage/SessionStorage The keys and the values are always strings。

存储重前端功能的数据

例如Canvas,SVG信息,服务端做持久化。


const complexFabricJSCanvasTemplate = { ... }; const complexVueAMapSVGObject = { ... }; const JSONStr = JSON.stringify(complexFabricJSCanvasTemplate/complexVueAMapSVGObject); axios.post('/create', { name: 'fabric.js', // "vue-amap" data: JSONStr, }) .then((res)=>{ console.log(res); }) .catch((err)=>{ console.log(err); });
localStorage/sessionStorage存储的数据

const testObj = {foo: 1, bar: 'hi', baz: { name: 'frankkai', age: 25 }} localStorage.setItem('testObj', JSON.stringify(testObj ));

若不转化,也不会报错,会导致存储失效:localStorage.getItem('testObj');// "[object Object]"
image

查询JSON数据做解析

从服务端接口查询到存储好的Canvas或SVG数据,做解析后传入到fabric.js,vue-amap等进行绘制。


return new Promise((resolve)=>{ axios.get('/retrive', { name: 'fabric.js', // "vue-amap" }) .then((res)=>{ const complexFabricJSCanvasTemplate = JSON.parse(res.result); const complexVueAMapSVGObject = JSON.parse(res.result); resolve(complexFabricJSCanvasTemplate/complexVueAMapSVGObject); }) .catch((err)=>{ console.log(err); }); })

初识JSON.stringify()

  • 序列化数据 JSON.stringify()方法将一个js对象或者值转换为JSON string类型。
  • 过滤数据 如果指定replacer为数组或函数,可以对数据进行过滤。
  • 格式化数据 如果指定space可以对JSON的string进行格式化。

序列化数据


console.log(JSON.stringify({ x: 5, y: 6 })); // expected output: "{"x":5,"y":6}" console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)])); // expected output: "[3,"false",false]" console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] })); // expected output: "{"x":[10,null,null,null]}" console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))); // expected output: ""2006-01-02T15:04:05.000Z""

过滤数据


var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; // replacer为数组 JSON.stringify(foo, ['week', 'month']); // '{"week":45,"month":7}', 只返回week"和"month" // replacer为函数 function replacer(key, value) { if (typeof value === 'string') return undefined; return value; } JSON.stringify(foo, replacer); // '{"week":45,"month":7}',返回callback不为undefined的。

格式化数据

首行缩进两个空格。

    • “ ” 两个空格
  • 数字2


JSON.stringify({ a: 2 }, null, ' '); // JSON.stringify({a:2}, null, 2)

\=>


"{ "a": 2 }"

JSON.stringify(value, [ ,replacer[ ,space]]);语法


JSON.stringify(value, [ ,replacer[ ,space]]);

参数

value

转化为JSON string的值。

replacer

过滤数据。

函数:replacer可以是函数,返回undefined时不输出数据,非undefined的数据被输出。
字符串数组:replacer可以是数组,一般是string,也可以是number。指定输出JSON的属性白名单。['week', 'month']
null或不写:replacer为null或者不写时,所有属性都被输出。null的话一般用于不过滤数据仅设置space的情况。

疑惑:replacer的数组中是数字?[1,2,3,4,5] ?


const arr = { 999: 'hi', foo: 'js', bar:' java' }; JSON.stringify(arr, [999, 'foo']); // 打印出"{"999":"hi","foo":"js"}"。 这里的999是number类型。
space

增强可读性的缩进空格或填充字符串。

  • 空格锁进数 string或number 指明需要插入几个空格。
  • number最大最小值 空白数。number最大值为10,大于10时也取10。小于1时则代表不需要缩进。
  • string最大最小值 空白数。string的前10个字符,大于10只取前10个。
  • null或不写时不缩进 值为null或不写,则默认不锁进。

返回值

JSON string。

异常

TypeError “cyclic object value”

序列化自引用的对象时会报这个错。高德地图的segments就是自引用对象。如何序列化自引用的对象可见下文。
image

TypeError “BigInt value can’t be serialized in JSON”

包含突破Number存储上线的BitInt类型的obj,不能被序列化。


JSON.stringify({foo: 1n}) // TypeError “BigInt value can't be serialized in JSON”

JSON.stringify()描述

常见使用须知

如果想更好的使用JSON.stringify(),下面这些使用须知一定要掌握。

  • toJSON方法 如果被序列化的value有toJSON()方法,可以在其中定义数据是如何序列化的。
  • 数据格式保持 序列化后,Boolean,Number,String的数据类型会保留,这种转换是符合传统语义的。
  • 不支持转化undefined,function,Symbol 这些类型不是有效的JSON值。如果是普通的,直接被忽略;如果在数组中找到时,直接被转成null。 JSON.stringify(function(){}) 或JSON.stringify(undefined)返回undefined。JSON.stringify({ foo: Symbol('foo') });// "{}"
  • Symbol类型作为key时,会被完全忽略。 即使在replacer中明确指明。JSON.stringify({ [Symbol('foo')]: 'foo' });// '{}' JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);// '{}'
  • Date类型作为值时。 Date的toJSON方法等同于date.toISOString()。
  • 特殊的类型:Infinity,NaN, undefined, null Infinity,NaN, undefined, null都被当作null。
  • 特殊的类型:Map,Set, WeakMap,WeakSet 所有其他的Object实例(包括Map,Set,WeakMap,WeakSet)都仅有enumerable属性能被序列化。这些值默认是enumerable为false的。var foo = [['foo',1]];var mp = new Map(foo);JSON.stringify(mp); // "{}"
  • 数组的string类型属性是不可被enumerable(列举)的。 let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]; JSON.stringify(a); // '["foo","bar"]'
  • TypedArray类型可以序列化。 JSON.stringify([new Float32Array([1]), new Float64Array([1])]);// '[{"0":1},{"0":1}]'

究极使用示例:


JSON.stringify({}); // '{}' JSON.stringify(true); // 'true' JSON.stringify('foo'); // '"foo"' JSON.stringify([1, 'false', false]); // '[1,"false",false]' JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) // '"2006-01-02T15:04:05.000Z"' JSON.stringify({ x: 5, y: 6 }); // '{"x":5,"y":6}' JSON.stringify([new Number(3), new String('false'), new Boolean(false)]); // '[3,"false",false]' // String-keyed array elements are not enumerable and make no sense in JSON let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] JSON.stringify(a); // '["foo","bar"]' JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); // '{"x":[10,null,null,null]}' // Standard data structures JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); // '[{},{},{},{}]' // TypedArray JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); // '[{"0":1},{"0":1},{"0":1}]' JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' JSON.stringify([new Float32Array([1]), new Float64Array([1])]); // '[{"0":1},{"0":1}]' // toJSON() JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); // '11' // Symbols: JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); // '{}' JSON.stringify({ [Symbol('foo')]: 'foo' }); // '{}' JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); // '{}' JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { if (typeof k === 'symbol') { return 'a symbol'; } }); // undefined // Non-enumerable properties: JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); // '{"y":"y"}' // BigInt values throw JSON.stringify({x: 2n}); // TypeError: BigInt value can't be serialized in JSON

replacer 参数

replacer可以是function,也可以是array。

function

function replacer(key="", value) { return value; }

作为function,有两个参数key 和 value。
默认情况下replacer函数的key为“”,对于对象中的每个值,都会call一次这个函数。

`function replacer(key,value){
    return value;
}
JSON.stringify({foo: false,bar:123},replacer);`

返回值有以下几种情况:

  • number number相关联的string属性被添加。 return 123; // "123"
  • string 相关联的string属性被添加。return "foo"; // "foo"
  • boolean “true”或”false“被添加。return true; // "true"
  • null “null”被添加。 return null; //"null"
  • value 如果是正常的value对象,那么会递归它的属性序列化成JSON string。// return value;"{"foo":false,"bar":123}"
  • undefined 不返回这个属性。// JSON.stringify({foo: false,bar:undefined},replacer);"{"foo":false}"。

使用强大的undefined是需要注意:

  1. undefined 用过axios的同学这里破案了:当我们的post请求的reqBody包含以undefined为值的参数时,根本不会发到服务端的接口,而null可以。这就是JSON.stringify()的功劳。

v = JSON.stringify(v)时,会将undefined类型的值自动过滤掉。


// axios源码 buildURL.js 37~56行: utils.forEach(params, function serialize(val, key) { if (utils.isArray(val)) { key = key + '[]'; } else { val = [val]; } utils.forEach(val, function parseValue(v) { if (utils.isDate(v)) { v = v.toISOString(); } else if (utils.isObject(v)) { v = JSON.stringify(v); // 注意这里 } parts.push(encode(key) + '=' + encode(v)); }); });
  1. 不能用replacer去移除array的值。若返回undefined,会返回null。

function replacer(key,value){ if(typeof value ==='boolean'){return undefined} return value; } JSON.stringify([1, 'false', false],replacer); // "[1,"false",null]"
常用方式

function replacer(key, value) { // 返回undefined过滤属性 if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; JSON.stringify(foo, replacer); // '{"week":45,"month":7}'

JSON.stringify(foo, ['week', 'month']); // '{"week":45,"month":7}',

space 参数

  • 可以是number 最大10,10个缩进
  • 可以是string 最长取前10个,10个char缩进

JSON.stringify({ a: 2 }, null, ' '); // '{ // "a": 2 // JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); // returns the string: // '{ // "uno": 1, // "dos": 2 // }'

toJSON()的表现

如果要被字符串化的对象具有一个名为toJSON的属性,其值是一个函数,则该toJSON()方法将自定义JSON字符串化行为:代替被序列化的对象,该toJSON()方法返回的值将被序列化,而不是被序列化的对象。JSON.stringify()调用toJSON一个参数:

  • 如果此对象是属性值,则返回属性名称
  • 如果它在数组中,则返回数组中的索引(作为字符串)
  • 如果JSON.stringify()直接在此对象上调用,则返回一个空字符串

var obj = { data: 'data', toJSON (key) { return key; } }; JSON.stringify(obj); // '"""" JSON.stringify({ obj }) // '{"obj":"'obj'"}' JSON.stringify([ obj ]) // '["'0'"]'

JSON.stringify()序列化循环引用时的问题

自引用对象抛出TypeError

TypeError: Converting circular structure to JSON


const circularReference = {}; circularReference.myself = circularReference; // Serializing circular references throws "TypeError: cyclic object value" JSON.stringify(circularReference);

image

JSON.stringify高德地图vue-amap中的自引用对象

路径规划plans的路径SVG信息segments对象。

需求是这样的,前端需要将路线的信息传递给后端,其中包括经纬度数组和SVG数组。
用JSON.stringify()序列化经纬度数组是ok的,但是序列化的SVG数组是自引用的,会报错。(是后来才知道这个SVG数组可以不往服务端存的,不过当时序列化报错是真的懵逼了)

image

如何序列化自引用对象?

使用Douglas Crockford的cycle.js

它在全局JSON对象上新增了2个方法:

  • JSON.decycle(将自引用的属性myself:obj 替换为myself:{$ref: "$"}
  • JSON.retrocycle

使用示例:


var circularReference = {}; circularReference.myself = circularReference; JSON.decycle(circularReference); // { "$ref": "$" }

JSON.stringify()序列化具有相同属性相同值但属性顺序不同的对象,结果相等吗?

不相等。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,Flutter 中文教程
专注分享前端/Flutter知识,你想要的,在这里都能找到


var a = JSON.stringify({ foo: "bar", baz: "quux" }) //'{"foo":"bar","baz":"quux"}' var b = JSON.stringify({ baz: "quux", foo: "bar" }) //'{"baz":"quux","foo":"bar"}' console.log(a === b) // false

JOSN.stringify()与localStorage的使用示例

localStorage只能存储string类型的数据,因此需要使用JSON.stringify()将对象序列化为JSON string。


var session = { 'screens': [], 'state': true }; session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); localStorage.setItem('session', JSON.stringify(session)); var restoredSession = JSON.parse(localStorage.getItem('session')); console.log(restoredSession);

回答一下文章开头的问题

为什么这个对象明明有foo属性,序列化后在数据库持久化存储之后,这个属性咋就没了呢?

值为undefined?
replacer对它做过滤了?
toJSON方法中做过滤了?
属性的enumerable值为false?
Symbol?
Map?Set?WeakMap?WeakSet?
找原因吧。

为什么axios发送post请求时,如果req的body包含undefined值的参数,在发给服务端的请求中会消失?


v = JSON.stringify(v); // v = {foo: undefined} =>"{}"

源码在buildURL.js 37~56行

打印出的JSON字符串就这么不易读么?除了store成一个variable然后parse之外,能不能不parse就清晰看到它的数据结构呢?


const testObj = {foo: 1, bar: 'hi', baz: { name: 'frankkai', age: 25 }} JSON.stringify(testObj, null, 4);

\=>


"{ "foo": 1, "bar": "hi", "baz": { "name": "frankkai", "age": 25 } }"

为什么序列化一个对象,它还报错呢?报的还是那种自己引用自己的错误?这种对象不能序列化了吗?

这是因为自引用之后,会限制死循环。
引擎应该是做了特殊的处理,发现这种无限循环时自动抛出异常。
这种对象不能序列化了吗?可以使用cycle.js的decycle(序列化。


var circularReference = {}; circularReference.myself = circularReference; JSON.decycle(circularReference); // { "$ref": "$" }

参考资料:

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

带你深入理解JSON.stringify()

努力成为优秀前端工程师!

作者:趁你还年轻
链接:https://segmentfault.com/a/1190000022294002

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:带你深入理解JSON.stringify()

链接:https://www.javascriptc.com/4006.html

« 一起深度解锁Webpack系列(进阶篇)
104道 CSS 面试题,助你查漏补缺»
Flutter 中文教程资源

相关推荐

QR code