JSON.stringify/parse有什么缺点?

JSON 在 JavaScript 中是最为常见的 API 通常用 HTTP 获取 JSON 数据,简单类型数据结构深拷贝等等。这篇文章主要讲解 JSON 的API 和其主要的缺点,以及 JSON5 部分内容。

一、JSON 支持的数据类型

  • 🥇String: 双引号
  • 🥇Number: 整数和浮点型
  • 🥇Boolean: 布尔值
  • 🥇Array:数组
  • 🥇Object: 对象
  • 🥇Null: 空值

二、JSON API

ts 复制代码
JSON.parse(text)
JSON.parse(text, reviver)

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

JSON API 可以被用作深拷贝,但是也有很多的缺点。下面会说明 JSON 的缺点:

三、JSON 的缺点

  • 🥇不能序列化:函数(如果是函数,直接忽略这属性)
  • 🥇无法处理循环引用
  • 🥇限制数据类型,不支持的有
    • 💕RegExp: 结果: 字符串
    • 💕Map: 错误结果:
      • 💨传递不可迭代的对象: xxx is not iterable (cannot read property Symbol(Symbol.iterator))
      • 💨传递可迭代对象(嵌套页需要可迭代):序列化之后是 {}
    • 💕Set
      • 💨可迭代对象:序列化后空对象: {}
      • 💨不得迭代对象:XXX is not iterable (cannot read property Symbol(Symbol.iterator))
    • ...
  • 🥇无法处理某些特殊的值(会被转换成 null)
    • 💕undefined: 字段亏被直接 忽略
    • 💕Symbol: 字段亏被直接 忽略

基本示例

ts 复制代码
let json = {
  date: new Date(),
  b: new Date("1992-05-15"),
  c: function () {},
  r: new RegExp("\\d+"),
  // m: new Map({}), //  object is not iterable (cannot read property Symbol(Symbol.iterator))
  // s: new Set(1) //  object is not iterable (cannot read property Symbol(Symbol.iterator))
  s: Symbol(),
  u: undefined,
};

console.log(JSON.stringify(json));

循环引用

ts 复制代码
// 创建循环引用的对象
const objA = {};
const objB = { a: objA };
objA.b = objB;

// 尝试序列化包含循环引用的对象
try {
  const jsonString = JSON.stringify(objA);
  console.log(jsonString); // 这行代码不会执行,因为在序列化时会抛出错误
} catch (error) {
  console.error('Error:', error.message); // 捕获到错误并打印错误信息
}

在 node.js 中会包出如下的循环引用的错误:

ts 复制代码
Error: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'b' -> object with constructor 'Object'
    --- property 'a' closes the circle

四、JSON5支持的数据类型

  • 🥇多行字符串
  • 🥇注释
  • 🥇数据类型
    • 💕Infinity/-Infinity
    • 💕NaN
    • 💕undefined
  • 🥇末尾逗号
  • 🥇可以省略对象和数组的大括号与方括号
  • 🥇没有使用引号的属性名和字符串

五、认识并 JSON5

💛 json5.org/ json5 的全部

使用 JSON5

ts 复制代码
npm install json5

JSON5 语法

ts 复制代码
JSON5.parse(text[, reviver])

// api
JSON5.stringify(value[, replacer[, space]])
JSON5.stringify(value[, options])

// cli
json5 [options] <file>

六、小结

本文主要讲解 JSON 相关的 API,和 JSON 的缺点。JSON 中的函数在序列化与反序列化的时候会被忽略等等其他的规则。

相关推荐
fruge11 小时前
前端文档自动化:用 VitePress 搭建团队技术文档(含自动部署)
运维·前端·自动化
v***885611 小时前
Springboot项目:使用MockMvc测试get和post接口(含单个和多个请求参数场景)
java·spring boot·后端
IMPYLH11 小时前
Lua 的 require 函数
java·开发语言·笔记·后端·junit·lua
CoolerWu11 小时前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
爱找乐子的李寻欢11 小时前
线上批量导出 1000 个文件触发 OOM?扒开代码看本质,我是这样根治的
后端
Cassie燁11 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js
vx_bscxy32211 小时前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于web的图书管理系统74010 (上万套实战教程,赠送源码)
java·前端·课程设计
北极糊的狐11 小时前
Vue3 子组件修改父组件传递的对象并同步的方法汇总
前端·javascript·vue.js
spionbo11 小时前
Vue3 前端分页功能实现的技术方案及应用实例解析
前端
AI绘画小3312 小时前
Web 安全核心真相:别太相信任何人!40 个漏洞挖掘实战清单,直接套用!
前端·数据库·测试工具·安全·web安全·网络安全·黑客