你知道JSON.stringify()的陷阱么？

JS中JSON对象字符串化的细微差别

Javascript中JSON.stringify()是个强大的函数,可以把Javascript对象转换成JSON格式的字符串。

然而,它也有一些微妙的差别和潜在的陷阱,开发者需要注意以避免意外的行为。本文将探讨JSON.stringify()相关的各种缺陷。

1. 处理Undefined、Function和Symbol值:

一个显著的限制是undefined、Function和Symbol值都是无效的JSON值。在转换过程中,如果在对象中遇到这些值,它们会被省略;如果在数组中遇到这些值,会被改成null。这可能导致意外的结果,比如函数被替换成null。

例子:

const obj = { foo: function() {}, bar: undefined, baz: Symbol('example') };  
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出:'{"foo":null}'

const obj2 = {arr: [function(){}]};  
console.log(JSON.stringify(obj2)); // 输出:{"arr":[null]}

2. Boolean、Number和String对象的原始值:

在字符串化过程中,Boolean、Number和String对象会被转换成对应的原始值。这与传统的转换语义一致。

例子:

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 = {arr: [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. toJSON()方法责任:

如果一个对象有toJSON()方法,它负责定义序列化的数据。这允许对象进行自定义序列化逻辑。

例子:

const obj = {
  data: 'important information',
  toJSON: function() {
    return { customKey: this.data };
  }, 
};
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出:'{"customKey":"important information"}'

6. 日期对象被视为字符串:

Date实例实现了toJSON()函数,返回一个字符串(与date.toISOString()相同),在字符串化过程中它们会被视为字符串。

例子:

const dateObj = new Date();
const jsonString = JSON.stringify(dateObj);
console.log(jsonString); // 输出:'"2023–12–06T12:34:56.789Z"'  

7. 循环引用异常:

如果JSON.stringify()遇到循环引用的对象,它会抛出错误。当一个对象引用自身形成一个循环时,就会产生循环引用。

例子:

const circularObj = { self: null };  
circularObj.self = circularObj;
JSON.stringify(circularObj); // 抛出错误  

8. 可枚举属性的序列化:

对于Map、Set、WeakMap和WeakSet等Object实例,只有它们的可枚举属性会被序列化。不可枚举的属性会被排除。

例子:

const mapObj = new Map([['key', 'value']]);
const jsonString = JSON.stringify(mapObj);  
console.log(jsonString); // 输出:'{}'

9. BigInt转换错误:

尝试使用JSON.stringify()转换BigInt类型的值会抛出错误。

例子:

const bigIntValue = BigInt(42);
JSON.stringify(bigIntValue); // 抛出错误

结论:

理解JSON.stringify()的微妙差别是防止JavaScript代码中出现意外问题的关键。通过意识到这些陷阱,开发者可以更有效地使用这个函数,并避免项目中的常见陷阱。