JavaScript 中的 JSON.stringify() 是一个强大的函数，用于将 JavaScript 对象转换为 JSON 格式的字符串。
然而，它也带来了一些细微差别和潜在的陷阱，大家需要注意以避免意外的行为。在本文中，我们将探讨与 JSON.stringify() 相关的各种陷阱。
1.处理未定义的、函数和符号值：
一个值得注意的限制是未定义，函数和符号值不是有效的 JSON 值。在转换过程中遇到时，它们要么被省略（在对象中），要么被更改为 null（在数组中）。这可能会导致意外的结果，例如函数被替换为 null。
示例：
const obj = { foo: function() {},
bar: undefined,
baz: Symbol('example') };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"foo":null}'
const obj2 = {arr: [function(){}]};
console.log(JSON.stringify(obj2)); // Output: {"arr":[null]}
2.布尔、数字和字符串对象的原始值：
布尔、数字和字符串对象在字符串化过程中被转换为它们相应的原始值。这与传统的转换语义一致。
示例：
const boolObj = new Boolean(true);
const jsonString = JSON.stringify(boolObj);
console.log(jsonString); // Output: 'true'
3.忽略符号键属性：
符号键控的属性在字符串化过程中被完全忽略，即使使用替换器函数。这意味着与 Symbol 键关联的任何数据都将从生成的 JSON 字符串中排除。
示例：
const obj = { [Symbol('example')]: 'value' };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{}'
const obj2 = {arr: [function(){}]};
console.log(JSON.stringify(obj2)); // Output '{}'
4.处理 Infinity、NaN 和 Null 值：
Infinity、NaN 和 null 值在字符串化期间都被视为 null。
示例：
const obj = { value: Infinity,
error: NaN,
nothing: null };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"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);// Output: '{"customKey":"important information"}'
6.日期对象作为字符串处理：
Date 的实例通过返回一个字符串（与 date.toISOString(） 相同)来实现 toJSON() 函数，从而在字符串化期间将其视为字符串。
示例：
const dateObj = new Date();
const jsonString = JSON.stringify(dateObj);
console.log(jsonString); // Output: '"2023–12–06T12:34:56.789Z"'
7.循环引用异常：
如果 JSON.stringify() 遇到循环引用的对象，它将抛出错误。当一个对象在循环中引用自身时，就会发生循环引用。
示例：
const circularObj = { self: null };
circularObj.self = circularObj;
JSON.stringify(circularObj); // Throws an error
8.可枚举属性的序列化：
对于像 Map、Set、WeakMap 和 WeakSet 这样的 Object 实例，只有它们的可枚举属性才会被序列化。不可枚举的属性被排除在外。
示例：
const mapObj = new Map([['key', 'value']]);
const jsonString = JSON.stringify(mapObj);
console.log(jsonString); // Output: '{}'
9.BigInt 转换时出错：
尝试使用 JSON.stringify() 转换 BigInt 类型的值时，会抛出错误。
示例：
const bigIntValue = BigInt(42);
JSON.stringify(bigIntValue); // Throws an error
结论：
了解 JSON.stringify() 的细微差别对于防止 JavaScript 代码中出现意外问题至关重要。通过了解这些陷阱，大家可以更有效地使用此函数并避免项目中的常见错误。
（如有侵权，请联系删除）
关于 OpenTiny
OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design/
OpenTiny 代码仓库：github.com/opentiny/
TinyVue 源码：github.com/opentiny/ti…
TinyEngine 源码： github.com/opentiny/ti…
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
原文链接：https://juejin.cn/post/7346043872009961513 作者：OpenTiny社区
