解锁 JSON.stringify() 7 个鲜为人知的坑
在本文中,我们将探讨与JSON.stringify()
相关的各种坑。
1. 处理undefined、Function和Symbol值
在前端中 undefined
、Function
和Symbol
值不是有效的JSON
值。在转换过程中遇到它们时,它们会被省略(在对象中),或者被更改为null(在数组中)。
例如:
const obj = { foo: function() {}, bar: undefined, baz: Symbol('example') };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{}'
const obj2 = {arr: [function(){}]};
console.log(JSON.stringify(obj2)); // 输出: {"arr":[null]}
2. 布尔、数字和字符串对象
布尔、数字和字符串对象在字符串化过程中会被转换为它们对应的原始值。
const boolObj = new Boolean(true);
const jsonString = JSON.stringify(boolObj);
console.log(jsonString); // 输出: 'true'
3. 忽略Symbol键的属性
Symbol键属性在字符串化过程中完全被忽略,即使使用替换函数也是如此。这意味着与Symbol键关联的任何数据都将在生成的JSON字符串中被排除。
const obj = { [Symbol('example')]: 'value' };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{}'
const obj2 = {[Symbol('example')]: [function(){}]};
console.log(JSON.stringify(obj2)); // 输出 '{}'
4. 处理无穷大(Infinity)、NaN和Null值
Infinity、NaN 和 null 值在字符串化过程中都被视为 null。
const obj = { value: Infinity, error: NaN, nothing: null };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"value":null,"error":null,"nothing":null}'
5. Date对象被视为字符串
Date实例通过实现toJSON()函数来返回一个字符串(与date.toISOString()相同),因此在字符串化过程中被视为字符串。
const dateObj = new Date();
const jsonString = JSON.stringify(dateObj);
console.log(jsonString); // 输出:"2024-01-31T09:42:00.179Z"
6. 循环引用异常
如果 JSON.stringify() 遇到具有循环引用的对象,它会抛出一个错误。循环引用发生在一个对象在循环中引用自身的情况下。
const circularObj = { self: null };
circularObj.self = circularObj;
JSON.stringify(circularObj); // Uncaught TypeError: Converting circular structure to JSON
7. BigInt转换错误
使用JSON.stringify()转换BigInt类型的值时引发错误。
const bigIntValue = BigInt(42);
JSON.stringify(bigIntValue); // Uncaught TypeError: Do not know how to serialize a BigInt
各位同学如果在开发中还遇到过不一样的坑,还请评论区补充互相讨论
作者:StriveToY
来源:juejin.cn/post/7330289404731047936
来源:juejin.cn/post/7330289404731047936