1. 什么是 json-cycle？
json-cycle是一个 npm 包，它可以将包含循环引用的 JavaScript 对象转换为 JSON 字符串，然后还原回 JavaScript 对象。这个过程中循环引用不会丢失，也不会造成进程的死循环。json-cycle还提供了可选参数来进行对象的自定义转换。
2. 安装 json-cycle
要安装 json-cycle，使用 npm 命令：
npm install json-cycle
安装完成后，就可以在项目中使用 json-cycle 了。
3. 使用 json-cycle
首先，将 json-cycle 引入到你的代码中：
const jsonCycle = require('json-cycle');接下来，我们可以使用 jsonCycle.stringify(object) 将 JavaScript 对象转换成 JSON 字符串，这个方法能处理循环引用，这个 JSON 字符串可以通过 JSON.parse 方法还原回原本的 JavaScript 对象。
例如：
const obj = {a: 1, b: 2};
obj.c = obj;
const jsonString = jsonCycle.stringify(obj);
console.log(jsonString);输出：
'{"a":1,"b":2,"c":{"$ref":"$"}}'我们可以看到 obj 中的属性 c 指向了 obj 自身，json-cycle 将其转换为了 $ref 字段。
要还原出 JavaScript 对象，可以使用 JSON.parse 进行还原：
const parsedObj = JSON.parse(jsonString, jsonCycle.retroCycle()); console.log(parsedObj.a); console.log(parsedObj.b); console.log(parsedObj.c);
注意，需要使用 jsonCycle.retroCycle() 进行还原，并将还原后的对象返回给 parsedObj。
输出：
1
2
{ a: 1, b: 2, c: [Circular] }可以看到，parsedObj 中的 c 依然指向了自身，但不再是 $ref 字段，而是一个指向 parsedObj 对象的圆形引用。
4. 自定义转换
在 jsonCycle.stringify 和 JSON.parse 方法中，都提供了可选的 replacer 和 reviver 函数，这两个函数可以在转换过程中，自定义 JavaScript 对象的转换。
例如，在 jsonCycle.stringify 中，我们希望将字符串前后加一个 '{' 和 '}'：
-- -------------------- ---- -------
----- --- - --- -- -- ---
----- ---------- - ------------------------ ----- ------ -- -
-- ------- ----- --- --------- -
------ --- - ----- - ----
-
------ ------
---
------------------------输出：
'{"a":1,"b":2,"c":"{test}"}'我们可以看到，'test' 被包含在了字符串 '{'test'}' 中。
在 JSON.parse 中，如果我们希望将一个字符串转换为 Date 类型：
-- -------------------- ---- -------
----- -------- - --------------------------------------
----- ------------- - -------------------- ----- ------ -- -
-- ---- --- ------- -
------ --- ------------
-
------ ------
---
--------------------------------输出：
2021-07-14T00:00:00.000Z
我们将要转换对象的键 key 和值 value 作为参数传入 reviver 函数中，然后返回我们自定义的值。
5. 结语
json-cycle 是一个方便的 npm 包，它可以将 JavaScript 对象转换为包含循环引用的 JSON 字符串，并将其还原回 JavaScript 对象。在需要处理复杂对象结构时，json-cycle 很有用，特别是使用了一些复杂的 ORM 库时，会产生包含循环引用的对象。通过了解 json-cycle，我们能够更好地将复杂对象结构转换为 JSON 字符串并进行传输，也能更好的对复杂对象进行还原。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70858