ChatGPT解决这个技术问题 Extra ChatGPT

如何以类似 JSON 的格式打印圆形结构?

我有一个大对象要转换为 JSON 并发送。但是它具有圆形结构。我想扔掉任何存在的循环引用并发送任何可以字符串化的东西。我怎么做?

谢谢。

var obj = {
  a: "foo",
  b: obj
}

我想将 obj 字符串化为:

{"a":"foo"}
您能否发布一个带有您想要解析的循环引用的示例对象?
this 之类的东西?
聚会迟到了,但有一个 github 项目来处理这个问题。

C
Community

在 Node.js 中,您可以使用 util.inspect(object)。它会自动将循环链接替换为“[Circular]”。

尽管是内置的(无需安装),但您必须导入它

import * as util from 'util' // has no default export
import { inspect } from 'util' // or directly
// or 
var util = require('util')
console.log(util.inspect(myObject))

另请注意,您可以将选项对象传递给检查(请参阅上面的链接)

inspect(myObject[, options: {showHidden, depth, colors, showProxy, ...moreOptions}])

请阅读并为下面的评论者点赞...


util 是一个内置模块,您不必安装它。
console.log(util.inspect(obj))
@Mitar 它是内置的,但您仍然需要加载模块 var util = require('util');
不要像我一样笨,它只是 obj_str = util.inspect(thing),而不是<s>garbage_str = JSON.stringify(util.inspect(thing))</s>
这比检查类型要好得多。为什么字符串化不能像这样工作?如果它知道有循环引用,为什么不能告诉它忽略它???
D
Devin Rhode

JSON.stringify 与自定义替换器一起使用。例如:

// Demo: Circular reference
var circ = {};
circ.circ = circ;

// Note: cache should not be re-used by repeated calls to JSON.stringify.
var cache = [];
JSON.stringify(circ, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    // Duplicate reference found, discard key
    if (cache.includes(value)) return;

    // Store value in our collection
    cache.push(value);
  }
  return value;
});
cache = null; // Enable garbage collection

此示例中的替换器并非 100% 正确(取决于您对“重复”的定义)。在以下情况下,将丢弃一个值:

var a = {b:1}
var o = {};
o.one = a;
o.two = a;
// one and two point to the same object, but two is discarded:
JSON.stringify(o, ...);

但概念是:使用自定义替换器,并跟踪解析的对象值。

作为用 es6 编写的实用函数:

// safely handles circular references
JSON.safeStringify = (obj, indent = 2) => {
  let cache = [];
  const retVal = JSON.stringify(
    obj,
    (key, value) =>
      typeof value === "object" && value !== null
        ? cache.includes(value)
          ? undefined // Duplicate reference found, discard key
          : cache.push(value) && value // Store value in our collection
        : value,
    indent
  );
  cache = null;
  return retVal;
};

// Example:
console.log('options', JSON.safeStringify(options))

@CruzDiablo 序列化 DOM 通常是没有意义的。但是,如果您可以为您的目的想到一个有意义的序列化方法,那么您可以尝试向 DOM 对象添加自定义序列化:Node.prototype.toJSON = function() { return 'whatever you think that is right'; };(如果您想要更通用/更具体的东西,只需尝试原型树中的任何东西:HTMLDivElement实现 HTMLElement 实现 Element 实现 Node 实现 EventTarget;注意:这可能依赖于浏览器,前面的树对于 Chrome 是正确的)
这是错误的,因为它会跳过包含两次的对象的第二次出现,即使不是真正的循环结构。 var a={id:1}; JSON.stringify([a,a]);
@user2451227 “此示例中的替换器并非 100% 正确(取决于您对“重复”的定义)。但概念是:使用自定义替换器,并跟踪解析的对象值。”
这里的 GC 问题可以说是多余的。如果这是作为单个脚本运行的,那么脚本会立即终止。如果这被封装在一个函数中以便实现,那么 cache 将无法访问 developer.mozilla.org/en-US/docs/Web/JavaScript/…
@ruffin:自从发表评论以来,我从 Isaac 获取了 JSON Stringify Safe 库并重写了它:github.com/isaacs/json-stringify-safe。我不确定所谓的实弹健壮的 Crockford 代码是做什么的。它看起来过于复杂,并且似乎做了我上面警告过的同样糟糕的线性检查。
M
Mir-Ismaili

我想知道为什么没有人发布 proper solution from MDN page...

const circularReference = {otherData: 123} circularReference.myself = circularReference const getCircularReplacer = () => { const seen = new WeakSet() return (key, value) => { if (typeof value === "object" && value ! == null) { if (seen.has(value)) { return } seen.add(value) } return value } } const stringified = JSON.stringify(circularReference, getCircularReplacer()) console.log(stringified)

看到的值应该存储在一个集合中,而不是存储在数组中(替换器在每个元素上被调用)并且没有必要尝试JSON.stringify 每个元素< /em> 在指向循环引用的链中。

就像在接受的答案中一样,此解决方案会删除所有重复值,而不仅仅是循环值。但至少它没有指数级的复杂性。


整洁,但这只是 ES2015。不支持IE。
Yoda 说:“如果仍然支持 IE,那么应该使用转译器。”
replacer = () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; } seen.add(value); } return value; }; } () => { const seen = new WeakSet(); return (key, value) => { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return; } seen.add(value); … JSON.stringify({a:1, b: '2'}, replacer) 在 Chrome 中返回 undefined
我收到错误 stack.get is not a function 与 express' Response 对象。 github.com/douglascrockford/JSON-js/blob/master/cycle.js 中的 decycle 有效。
o = {}; JSON.stringify([o, o], getCircularReplacer()) 时,此答案(如 accepted answer)有一个错误(由 user2451227 注释 here)。
N
Nassim

做就是了

npm i --save circular-json

然后在你的 js 文件中

const CircularJSON = require('circular-json');
...
const json = CircularJSON.stringify(obj);

https://github.com/WebReflection/circular-json

注意:我与这个包无关。但我确实用它来做这个。

2020 年更新

请注意,CircularJSON 仅处于维护阶段,flatted 是它的继任者。


非常感谢!很棒的图书馆,节省了大量时间。超小(仅缩小 1.4KB)。
我认为你可能需要更多的理由来使用模块而不是“只是做”。原则上覆盖 JSON 并不好。
我需要复制一个对象以用于存根测试。这个答案很完美。我复制了对象,然后删除了覆盖。谢谢!!
据作者介绍,该软件包已被弃用。 CircularJSON 仅在维护中,flatted 是它的继任者。链接:github.com/WebReflection/flatted#flatted
请注意,“扁平化”(和圆形 json?)包不会复制 JSON.stringify() 功能。它创建自己的非 JSON 格式。 (例如,Flatted.stringify({blah: 1}) 导致 [{"blah":1}])我看到有人试图就此提出问题,作者斥责他们并将问题锁定为评论。
O
Orwellophile

我真的很喜欢 Trindaz 的解决方案 - 更详细,但是它有一些错误。我也为喜欢它的人修好了它们。

另外,我对缓存对象添加了长度限制。

如果我正在打印的对象真的很大——我的意思是无限大——我想限制我的算法。

JSON.stringifyOnce = function(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
        return 'object too long';
        }
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if ( key == ''){ //root element
             printedObjects.push(obj);
            printedObjectKeys.push("root");
             return value;
        }

        else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
            if ( printedObjectKeys[printedObjIndex] == "root"){
                return "(pointer to root)";
            }else{
                return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }
        }else{

            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
};

你错过了这一行的空检查:return "(see " + (!!value.constructor ? value.constructor.name.toLowerCase() : typeof(value)) + " with key " +printedObjectKeys[printedObjIndex] + ")";
我很乐意添加它。让我知道什么是可以为空的,因为到目前为止我确实遇到了任何问题。
// 浏览器不会打印超过 20K - 但是您将限制设置为 2k。也许改变未来?
N
Nux

请注意,Douglas Crockford 还实现了一个 JSON.decycle 方法。见他的cycle.js。这允许您对几乎任何标准结构进行字符串化:

var a = [];
a[0] = a;
a[1] = 123;
console.log(JSON.stringify(JSON.decycle(a)));
// result: '[{"$ref":"$"},123]'.

您还可以使用 retrocycle 方法重新创建原始对象。因此,您不必从对象中删除循环来对它们进行字符串化。

然而,这不适用于 DOM 节点(这是现实生活用例中循环的典型原因)。例如,这将抛出:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a)));

我已经创建了一个 fork 来解决这个问题(请参阅我的 cycle.js fork)。这应该可以正常工作:

var a = [document.body];
console.log(JSON.stringify(JSON.decycle(a, true)));

请注意,在我的 fork 中,JSON.decycle(variable) 与原始版本一样工作,并且当 variable 包含 DOM 节点/元素时会引发异常。

当您使用 JSON.decycle(variable, true) 时,您接受结果不可逆的事实(retrocycle 不会重新创建 DOM 节点)。不过,DOM 元素在某种程度上应该是可识别的。例如,如果一个 div 元素有一个 id,那么它将被一个字符串 "div#id-of-the-element" 替换。


当我使用他的代码和你的代码时,它们都会给我一个“RangeError:超出最大调用堆栈大小”。
如果您在 Fiddle 上提供代码或在 Github 上添加问题,我可以看看:github.com/Eccenux/JSON-js/issues
这就是我一直在寻找的。 JSON.decycle(a, true) 当您将 true 作为参数传递给 decycle 函数时会发生什么。
@Rudra true 使分支中的 stringifyNodes 选项为 true。这会将例如带有 id="some-id" 的 div 转储到字符串:div#some-id。您将避免一些问题,但您将无法完全回溯。
有npm包npmjs.com/package/json-js,但有一段时间没更新
A
Alexander Mills

@RobW 的回答是正确的,但是这更高效!因为它使用 hashmap/set:

const customStringify = function (v) {
  const cache = new Set();
  return JSON.stringify(v, function (key, value) {
    if (typeof value === 'object' && value !== null) {
      if (cache.has(value)) {
        // Circular reference found
        try {
          // If this value does not reference a parent it can be deduped
         return JSON.parse(JSON.stringify(value));
        }
        catch (err) {
          // discard key if value cannot be deduped
         return;
        }
      }
      // Store value in our set
      cache.add(value);
    }
    return value;
  });
};

对于具有循环引用的深层嵌套对象,请尝试 stringifyDeep => github.com/ORESoftware/safe-stringify
Set 实现可能只是在底层使用了一个数组和 indexOf,但我还没有证实这一点。
这是删除具有不同值的子节点的父节点 - 例如 - {"a":{"b":{"a":"d"}}} 甚至删除具有空对象 {} 的节点
你能举一个Sandip的例子吗?创建一个 gist.github.com 或诸如此类
出色的 !!!首先(从顶部开始,但仅检查了 2-3 个功能解决方案)在 node.js 和 Fission 下的工作解决方案;-) - 库挂起。
m
mikermcneil

我建议从@isaacs 签出json-stringify-safe——它在 NPM 中使用。

顺便说一句-如果您不使用 Node.js,您可以从源代码的相关部分复制并粘贴第 4-27 行。

安装:

$ npm install json-stringify-safe --save

要使用:

// Require the thing
var stringify = require('json-stringify-safe');

// Take some nasty circular object
var theBigNasty = {
  a: "foo",
  b: theBigNasty
};

// Then clean it up a little bit
var sanitized = JSON.parse(stringify(theBigNasty));

这产生:

{
  a: 'foo',
  b: '[Circular]'
}

请注意,就像@Rob W 提到的香草 JSON.stringify 函数一样,您还可以通过将“替换器”函数作为第二个参数传递给 stringify() 来自定义清理行为。如果您发现自己需要一个简单的示例来说明如何执行此操作,我只是编写了一个自定义替换器,它将错误、正则表达式和函数强制转换为人类可读的字符串。


我喜欢这个解决方案,因为它解决问题的限制比其他解决方案少。它避免了:1)仅在 NodeJS 上工作,2)删除重复项而不仅仅是循环,3)输出具有非标准整体结构的 JSON。它在 npm 上也被很好地打包,但源代码又好又短(允许简单的复制粘贴)。
E
Eric Fortin

对于将来在您知道所有循环引用的键时寻找此问题的解决方案的谷歌用户,您可以使用 JSON.stringify 函数周围的包装器来排除循环引用。请参阅 https://gist.github.com/4653128 中的示例脚本。

该解决方案本质上归结为在数组中保留对先前打印对象的引用,并在返回值之前在替换函数中检查它。它比仅排除循环引用更具限制性,因为它还排除了两次打印对象的可能性,其中一个副作用是避免循环引用。

示例包装器:

function stringifyOnce(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if(printedObjIndex && typeof(value)=="object"){
            return "(see " + value.constructor.name.toLowerCase() + " with key " + printedObjectKeys[printedObjIndex] + ")";
        }else{
            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
}

不错的代码。但是你有一个愚蠢的错误,你写 if(printedObjIndex) 而你应该写 if(printedObjIndex==false) 因为 index 也可以是 0 被翻译成 false 除非你明确说明。
@guymograbi 你不是说===吗? 0 == falsetrue0 === falsefalse。 ;^) 但我宁愿不将 printedObjIndex 初始化为 false,因为这样您就可以检查 undefined,这样您(好吧,特林达兹的)就不会奇怪地混合隐喻了。
@ruffin 不错的收获。是的,显然,总是使用硬相等和 jshint 来捕捉这些愚蠢的错误。
e
eshalev
var a={b:"b"};
a.a=a;
JSON.stringify(preventCircularJson(a));

评估为:

"{"b":"b","a":"CIRCULAR_REFERENCE_REMOVED"}"

具有以下功能:

/**
 * Traverses a javascript object, and deletes all circular values
 * @param source object to remove circular references from
 * @param censoredMessage optional: what to put instead of censored values
 * @param censorTheseItems should be kept null, used in recursion
 * @returns {undefined}
 */
function preventCircularJson(source, censoredMessage, censorTheseItems) {
    //init recursive value if this is the first call
    censorTheseItems = censorTheseItems || [source];
    //default if none is specified
    censoredMessage = censoredMessage || "CIRCULAR_REFERENCE_REMOVED";
    //values that have allready apeared will be placed here:
    var recursiveItems = {};
    //initaite a censored clone to return back
    var ret = {};
    //traverse the object:
    for (var key in source) {
        var value = source[key]
        if (typeof value == "object") {
            //re-examine all complex children again later:
            recursiveItems[key] = value;
        } else {
            //simple values copied as is
            ret[key] = value;
        }
    }
    //create list of values to censor:
    var censorChildItems = [];
    for (var key in recursiveItems) {
        var value = source[key];
        //all complex child objects should not apear again in children:
        censorChildItems.push(value);
    }
    //censor all circular values
    for (var key in recursiveItems) {
        var value = source[key];
        var censored = false;
        censorTheseItems.forEach(function (item) {
            if (item === value) {
                censored = true;
            }
        });
        if (censored) {
            //change circular values to this
            value = censoredMessage;
        } else {
            //recursion:
            value = preventCircularJson(value, censoredMessage, censorChildItems.concat(censorTheseItems));
        }
        ret[key] = value

    }

    return ret;
}

有效,但比它可能的要详细得多。
T
TWickz

将 JSON.stringify 方法与替换器一起使用。阅读本文档以获取更多信息。 http://msdn.microsoft.com/en-us/library/cc836459%28v=vs.94%29.aspx

var obj = {
  a: "foo",
  b: obj
}

var replacement = {"b":undefined};

alert(JSON.stringify(obj,replacement));

找出一种用循环引用填充替换数组的方法。您可以使用 typeof 方法来查找属性是否属于“对象”类型 (reference),并使用精确相等检查 (===) 来验证循环引用。


这可能只适用于 IE(考虑到 MSDN 是来自 Microsoft 的文档,而 Microsoft 创建 IE)。在 Firefox/Chrome 中,jsfiddle.net/ppmaW 会生成循环引用错误。仅供参考:var obj = {foo:obj}创建循环引用。相反,它会创建一个对象,其 foo 属性引用 obj 的先前值(如果先前未定义 undefined,则由于 var obj 而声明)。
是的,这在 Chrome 中不起作用。它只是输出“b”,而不是“obj”中的任何其他值。
T
Thorsten Niehues

如果

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

结果是

TypeError:循环对象值

然后你可能想像这样打印:

var output = '';
for (property in object) {
  output += property + ': ' + object[property]+'; ';
}
console.log(output);

也许是因为它只打印一个级别?
非常简单,我对此表示赞同,因为它在 chrome 中开箱即用。出色的
D
Danilo Augusto

我知道这是一个老问题,但我想推荐一个我创建的名为 smart-circular 的 NPM 包,它的工作方式与建议的其他方式不同。如果您使用大而深的对象,它会特别有用。

一些特点是:

用导致其第一次出现的路径替换循环引用或对象内部的简单重复结构(不仅仅是字符串 [循环]);

通过在广度优先搜索中寻找循环,包确保这条路径尽可能小,这在处理非常大和深的对象时很重要,因为路径可能会变得非常长且难以遵循(自定义替换在JSON.stringify 做一个 DFS);

允许个性化替换,方便简化或忽略对象中不太重要的部分;

最后,路径完全按照访问引用字段所需的方式编写,这可以帮助您进行调试。


这很好,尽管它也删除了重复项,而不仅仅是循环链接。 (好吧,如果您将“循环”定义为意味着在没有保护措施的情况下进行深度优先递归,将导致调用堆栈多次/无限次遍历同一条目)有用途,但不是某些人所定义的“循环”(即导致无限递归)。
A
Aaron Cicali

JSON.stringify() 的第二个参数还允许您指定一个键名数组,这些键名应该从它在数据中遇到的每个对象中保留下来。这可能不适用于所有用例,但这是一个更简单的解决方案。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

var obj = {
    a: "foo",
    b: this
}

var json = JSON.stringify(obj, ['a']);
console.log(json);
// {"a":"foo"}

注意:奇怪的是,来自 OP 的对象定义不会在最新的 Chrome 或 Firefox 中引发循环引用错误。此答案中的定义已修改,因此确实引发了错误。


A
Abdus Salam Azad

此代码将无法循环引用:

    JSON.stringify(circularReference);
// TypeError: cyclic object value

使用以下代码:

 const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return;
      }
      seen.add(value);
    }
    return value;
  };
};

JSON.stringify(circularReference, getCircularReplacer());

这将删除所有使用过 2 次或更多的对象,而不仅仅是引用
J
JacopKane

我找到了 circular-json library on github,它很好地解决了我的问题。

我发现一些有用的好功能:

支持多平台使用,但到目前为止我只用 node.js 对其进行了测试。

API 是相同的,因此您需要做的就是包含并使用它作为 JSON 替换。

它有自己的解析方法,因此您可以将“循环”序列化数据转换回对象。


这个库为我抛出了一个错误,所以我必须寻找另一个。 ERROR TypeError: toISOString is not a function at String.toJSON (<anonymous>) at Object.<anonymous> (localhost:8100/build/polyfills.js:1:3458) 在 JSON.stringify (<anonymous>) 在 Object.stringifyRecursion [as stringify] (localhost:8100/build/main.js:258450:15)
@MarkEllul 我在 2015 年写了评论,如果我能看到更好的选择,我会在这里发布并进行编辑。我偶尔在日常工作中仍然会遇到同样的问题,我通常更喜欢我自己的手动功能以递归方式进行适当/安全的检查。如果您不熟悉,我建议您查看函数式编程实践,通常情况下,它会简化这种递归操作,因为它不那么棘手且更可靠。
还得到“toISOString 不是一个函数”,试图对事件进行字符串化并在柏树测试中重新发送它
是的,它在 2013 年运行良好。需要更新
M
Michael Nelles

要更新覆盖 JSON 工作方式的答案(可能不推荐,但超级简单),请不要使用 circular-json(已弃用)。相反,使用后继者,扁平化:

https://www.npmjs.com/package/flatted

从@user1541685 上面的旧答案中借用,但替换为新答案:

npm i --save flatted

然后在你的 js 文件中

const CircularJSON = require('flatted');
const json = CircularJSON.stringify(obj);

M
MiF

我这样解决这个问题:

var util = require('util');

// Our circular object
var obj = {foo: {bar: null}, a:{a:{a:{a:{a:{a:{a:{hi: 'Yo!'}}}}}}}};
obj.foo.bar = obj;

// Generate almost valid JS object definition code (typeof string)
var str = util.inspect(b, {depth: null});

// Fix code to the valid state (in this example it is not required, but my object was huge and complex, and I needed this for my case)
str = str
    .replace(/<Buffer[ \w\.]+>/ig, '"buffer"')
    .replace(/\[Function]/ig, 'function(){}')
    .replace(/\[Circular]/ig, '"Circular"')
    .replace(/\{ \[Function: ([\w]+)]/ig, '{ $1: function $1 () {},')
    .replace(/\[Function: ([\w]+)]/ig, 'function $1(){}')
    .replace(/(\w+): ([\w :]+GMT\+[\w \(\)]+),/ig, '$1: new Date("$2"),')
    .replace(/(\S+): ,/ig, '$1: null,');

// Create function to eval stringifyed code
var foo = new Function('return ' + str + ';');

// And have fun
console.log(JSON.stringify(foo(), null, 4));

这对我来说非常有用,但似乎类被表示为 _class: ClassName { data: "here" },所以我添加了以下规则 .replace(/(\w+) {/g, '{ __ClassName__: "$1", ')。就我而言,我试图查看 http 请求对象的样子。
I
IamMHussain

尝试这个:

var obj = {
    a: "foo",
    b: obj
};

var circular_replacer = (value) => {
    var seen = [];
    if (value != null && typeof value == "object") {
        if (seen.indexOf(value) >= 0) return;
        seen.push(value);
    }
    return value;
};

obj = circular_replacer(obj);

seen.push(value) =-D 之后不应该再多几行代码吗?喜欢for (var key in value) {value[key] = circular_replacer(value[key]);}
不鼓励仅使用代码的答案。请单击编辑并添加一些词来总结您的代码如何解决问题,或者解释您的答案与之前的答案/答案有何不同。 From Review
l
lachlan.p.jordan

尽管这已得到充分回答,但您也可以在使用 delete 运算符进行字符串化之前显式删除相关属性。

delete obj.b; 
const jsonObject = JSON.stringify(obj);

delete operator

这将消除构建或维护复杂逻辑以删除循环引用的需要。


S
Sergey Gurin
function myStringify(obj, maxDeepLevel = 2) {
  if (obj === null) {
    return 'null';
  }
  if (obj === undefined) {
    return 'undefined';
  }
  if (maxDeepLevel < 0 || typeof obj !== 'object') {
    return obj.toString();
  }
  return Object
    .entries(obj)
    .map(x => x[0] + ': ' + myStringify(x[1], maxDeepLevel - 1))
    .join('\r\n');
}

V
Venryx

该线程中的大多数答案都专门用于 JSON.stringify - 它们没有显示如何实际删除原始对象树中的循环引用。 (好吧,没有在之后再次调用 JSON.parse - 这需要重新分配,并且具有更高的性能影响)

要从源对象树中删除循环引用,您可以使用如下函数:https://stackoverflow.com/a/63952549/2441655

然后可以使用这些通用的循环引用移除函数来对循环引用敏感函数(如 JSON.stringify)进行安全的后续调用:

const objTree = {normalProp: true};
objTree.selfReference = objTree;
RemoveCircularLinks(objTree); // without this line, the JSON.stringify call errors
console.log(JSON.stringify(objTree));

F
Felix Engelhardt

这是一个解决方案:

仅删除循环(而不是所有重复的对象引用,到目前为止发布的大多数解决方案都是如此),

不是不必要的冗长,

很快,

不需要任何库依赖。

function replaceCycles(obj, replacement = undefined, seen = new WeakSet()) {
  if (typeof obj === 'object')
    if (seen.has(obj))
      return replacement 
    else {
      seen.add(obj)
      const newObj = {}
      for (const key in obj)
        newObj[key] = replaceCycles(obj[key], replacement, seen)
      seen.delete(obj)
      return newObj
    }
  else
    return obj
}

用法:

const a = {
  b: 'v1',
  c: {
    d: 'v2'
  }
}

a.e = a.c
a.c.f = a.c

console.log(JSON.stringify(replaceCycles(a, '[CYCLE]')))

输出:

"{'b':'v1','c':{'d':'v2','f':'[CYCLE]'},'e':{'d':'v2','f':'[CYCLE]'}}"

E
Ethan.R

使用此类对象解决此问题的另一种解决方案是使用此库

https://github.com/ericmuyser/stringy

它很简单,您可以通过几个简单的步骤解决这个问题。


b
bytestorm

根据其他答案,我最终得到以下代码。它适用于循环引用、具有自定义构造函数的对象。

从要序列化的给定对象,

缓存遍历对象时遇到的所有对象,并为每个对象分配一个唯一的 hashID(自动递增的数字也可以)

一旦找到循环引用,将新对象中的该字段标记为循环并将原始对象的 hashID 存储为属性。

Github 链接 - DecycledJSON

DJSHelper = {};
DJSHelper.Cache = [];
DJSHelper.currentHashID = 0;
DJSHelper.ReviveCache = [];

// DOES NOT SERIALIZE FUNCTION
function DJSNode(name, object, isRoot){
    this.name = name;
    // [ATTRIBUTES] contains the primitive fields of the Node
    this.attributes = {};

    // [CHILDREN] contains the Object/Typed fields of the Node
    // All [CHILDREN] must be of type [DJSNode]
    this.children = []; //Array of DJSNodes only

    // If [IS-ROOT] is true reset the Cache and currentHashId
    // before encoding
    isRoot = typeof isRoot === 'undefined'? true:isRoot;
    this.isRoot = isRoot;
    if(isRoot){
        DJSHelper.Cache = [];
        DJSHelper.currentHashID = 0;

        // CACHE THE ROOT
        object.hashID = DJSHelper.currentHashID++;
        DJSHelper.Cache.push(object);
    }

    for(var a in object){
        if(object.hasOwnProperty(a)){
            var val = object[a];

            if (typeof val === 'object') {
                // IF OBJECT OR NULL REF.

                /***************************************************************************/
                // DO NOT REMOVE THE [FALSE] AS THAT WOULD RESET THE [DJSHELPER.CACHE]
                // AND THE RESULT WOULD BE STACK OVERFLOW
                /***************************************************************************/
                if(val !== null) {
                    if (DJSHelper.Cache.indexOf(val) === -1) {
                        // VAL NOT IN CACHE
                        // ADD THE VAL TO CACHE FIRST -> BEFORE DOING RECURSION
                        val.hashID = DJSHelper.currentHashID++;
                        //console.log("Assigned", val.hashID, "to", a);
                        DJSHelper.Cache.push(val);

                        if (!(val instanceof Array)) {
                            // VAL NOT AN [ARRAY]
                            try {
                                this.children.push(new DJSNode(a, val, false));
                            } catch (err) {
                                console.log(err.message, a);
                                throw err;
                            }
                        } else {
                            // VAL IS AN [ARRAY]
                            var node = new DJSNode(a, {
                                array: true,
                                hashID: val.hashID // HashID of array
                            }, false);
                            val.forEach(function (elem, index) {
                                node.children.push(new DJSNode("elem", {val: elem}, false));
                            });
                            this.children.push(node);
                        }
                    } else {
                        // VAL IN CACHE
                        // ADD A CYCLIC NODE WITH HASH-ID
                        this.children.push(new DJSNode(a, {
                            cyclic: true,
                            hashID: val.hashID
                        }, false));
                    }
                }else{
                    // PUT NULL AS AN ATTRIBUTE
                    this.attributes[a] = 'null';
                }
            } else if (typeof val !== 'function') {
                // MUST BE A PRIMITIVE
                // ADD IT AS AN ATTRIBUTE
                this.attributes[a] = val;
            }
        }
    }

    if(isRoot){
        DJSHelper.Cache = null;
    }
    this.constructorName = object.constructor.name;
}
DJSNode.Revive = function (xmlNode, isRoot) {
    // Default value of [isRoot] is True
    isRoot = typeof isRoot === 'undefined'?true: isRoot;
    var root;
    if(isRoot){
        DJSHelper.ReviveCache = []; //Garbage Collect
    }
    if(window[xmlNode.constructorName].toString().indexOf('[native code]') > -1 ) {
        // yep, native in the browser
        if(xmlNode.constructorName == 'Object'){
            root = {};
        }else{
            return null;
        }
    }else {
        eval('root = new ' + xmlNode.constructorName + "()");
    }

    //CACHE ROOT INTO REVIVE-CACHE
    DJSHelper.ReviveCache[xmlNode.attributes.hashID] = root;

    for(var k in xmlNode.attributes){
        // PRIMITIVE OR NULL REF FIELDS
        if(xmlNode.attributes.hasOwnProperty(k)) {
            var a = xmlNode.attributes[k];
            if(a == 'null'){
                root[k] = null;
            }else {
                root[k] = a;
            }
        }
    }

    xmlNode.children.forEach(function (value) {
        // Each children is an [DJSNode]
        // [Array]s are stored as [DJSNode] with an positive Array attribute
        // So is value

        if(value.attributes.array){
            // ITS AN [ARRAY]
            root[value.name] = [];
            value.children.forEach(function (elem) {
                root[value.name].push(elem.attributes.val);
            });
            //console.log("Caching", value.attributes.hashID);
            DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
        }else if(!value.attributes.cyclic){
            // ITS AN [OBJECT]
            root[value.name] = DJSNode.Revive(value, false);
            //console.log("Caching", value.attributes.hashID);
            DJSHelper.ReviveCache[value.attributes.hashID] = root[value.name];
        }
    });

    // [SEPARATE ITERATION] TO MAKE SURE ALL POSSIBLE
    // [CYCLIC] REFERENCES ARE CACHED PROPERLY
    xmlNode.children.forEach(function (value) {
        // Each children is an [DJSNode]
        // [Array]s are stored as [DJSNode] with an positive Array attribute
        // So is value

        if(value.attributes.cyclic){
            // ITS AND [CYCLIC] REFERENCE
            root[value.name] = DJSHelper.ReviveCache[value.attributes.hashID];
        }
    });

    if(isRoot){
        DJSHelper.ReviveCache = null; //Garbage Collect
    }
    return root;
};

DecycledJSON = {};
DecycledJSON.stringify = function (obj) {
    return JSON.stringify(new DJSNode("root", obj));
};
DecycledJSON.parse = function (json, replacerObject) {
    // use the replacerObject to get the null values
    return DJSNode.Revive(JSON.parse(json));
};
DJS = DecycledJSON;

示例用法 1:

var obj = {
    id:201,
    box: {
        owner: null,
        key: 'storm'
    },
    lines:[
        'item1',
        23
    ]
};

console.log(obj); // ORIGINAL

// SERIALIZE AND THEN PARSE
var jsonObj = DJS.stringify(obj);
console.log(DJS.parse(jsonObj));

示例用法 2:

// PERSON OBJECT

function Person() {
    this.name = null;
    this.child = null;
    this.dad = null;
    this.mom = null;
}
var Dad = new Person();
Dad.name = 'John';
var Mom = new Person();
Mom.name = 'Sarah';
var Child = new Person();
Child.name = 'Kiddo';

Dad.child = Mom.child = Child;
Child.dad = Dad;
Child.mom = Mom;

console.log(Child); // ORIGINAL

// SERIALIZE AND THEN PARSE
var jsonChild = DJS.stringify(Child);
console.log(DJS.parse(jsonChild));

M
Morteza Tourani

我知道这个问题很老并且有很多很好的答案,但我发布这个答案是因为它的新风格(es5+)

Object.defineProperties(JSON, { refStringify: { value: function(obj) { let objMap = new Map(); let stringified = JSON.stringify(obj, function(key, value) { // 仅适用于对象 if (typeof value == 'object') { // 如果有值则返回对它的引用 if (objMap.has(value)) return objMap.get(value); objMap.set(value, `ref${objMap.size + 1}`); } 返回值; }); 返回字符串化; } }, refParse: { value: function(str) { let parsed = JSON.parse(str); let objMap = _createObjectMap(parsed); objMap.forEach( (value, key) => _replaceKeyWithObject(value, key)); 解析返回; } }, }); // *************************** 示例 let a = { b: 32, c: { get a() { return a; }, 得到 c() { 返回 ac; } } };让 stringified = JSON.refStringify(a);让 parsed = JSON.refParse(stringified, 2); console.log(解析,JSON.refStringify(解析)); // *************************** /例子 // ***************** ********** 辅助函数 _createObjectMap(obj) { let objMap = new Map(); JSON.stringify(obj, (key, value) => { if (typeof value == 'object') { if (objMap.has(value)) return objMap.get(value); objMap.set(value, `ref ${objMap.size + 1}`); } 返回值; });返回对象映射; } function _replaceKeyWithObject(key, obj, replaceWithObject = obj) { Object.keys(obj).forEach(k => { let val = obj[k]; if (val == key) return (obj[k] = replaceWithObject) ; if (typeof val == 'object' && val != replaceWithObject) _replaceKeyWithObject(key, val, replaceWithObject); }); }


J
Jianwu Chen

您可以尝试 JSON 解析器库:treedoc。它支持循环引用,并且还使用引用对重复的对象进行重复数据删除。

yarn add treedoc

import {TD} from 'treedoc'
TD.stringify(obj);

如果你想要更多的定制

import {TD, TDEncodeOption} from 'treedoc'

const opt = new TDEncodeOption();
opt.coderOption.setShowType(true).setShowFunction(true);
opt.jsonOption.setIndentFactor(2);
return TD.stringify(obj, opt);

查看器 http://treedoc.org 可以查看生成的 JSON 文件,该查看器支持通过 JSON 节点引用进行导航。

[无耻插件]我是这个库的作者


T
Teoman shipahi

我为我的 LoggingUtilities 类创建了以下方法。以下方法获取源和目标对象,并通过给定的 maxLevel 将源分配给目标。

  static assignObjectByLevel(
    sourceObject: any,
    targetObject: any,
    currentLevel: number = 0,
    maxLevel: number = 3,
    showUndefinedValues = false
  ): any {
    if (currentLevel >= maxLevel) {
      return;
    }

    const objQueue = [];
    for (const key in sourceObject) {
      if (sourceObject.hasOwnProperty(key)) {
        const value = sourceObject[key];
        if (typeof value === "object") {
          objQueue.push({ key, value });
        } else {
          targetObject[key] = value;
        }
      } else {
        if (showUndefinedValues) {
          targetObject[key] = "undefined/null";
        }
      }
    }

    while (objQueue.length > 0) {
      const objVal = objQueue.pop();
      currentLevel++;
      targetObject[objVal.key] = {};
      this.assignObjectByLevel(
        objVal.value,
        targetObject[objVal.key],
        currentLevel,
        maxLevel,
        false
      );
    }
  }

使用示例:

   const logObjParam = {
      level1: "value1",
      level2: {
        value2: "value2",
        level3: {
          value3: "value3",
          level4: {
            value4: " value4",
            level5: {
              value5: " value5",
            },
          },
        },
      },
    };

 let logObj = {};
 this.assignObjectByLevel(logObjParam, logObj);

结果:

{
  "level1": "value1",
  "level2": {
    "value2": "value2",
    "level3": {
      "value3": "value3",
      "level4": {}
    }
  }
}

W
Wandu June

superserial 完全序列化 JavaScript 对象。

https://github.com/denostack/superserial

用法:

const serializer = new Serializer();

const nodes = [{ self: null as any, siblings: [] as any[] }, {
  self: null as any,
  siblings: [] as any[],
}];
nodes[0].self = nodes[0];
nodes[0].siblings = nodes;
nodes[1].self = nodes[1];
nodes[1].siblings = nodes;

const serialized = serializer.serialize(nodes);

console.log(serialized);

输出:

[$1,$2];{"self":$1,"siblings":$0};{"self":$2,"siblings":$0}

M
Mir-Ismaili

此解决方案修复了 user2451227accepted answer (when o = {}; JSON.stringify([o, o], getCircularReplacer())) 上报告的 issue

function newCircularReplacer () { const seenValues = [] return circularReplacer function circularReplacer (key, value) { if (typeof value === 'object' && value !== null && Object.keys(value).length) { const stackSize= seeValues.length if (stackSize) { for (let n = stackSize - 1; seenValues[n][key] !== value; --n) seenValues.pop() // 清理过期引用 if (seenValues.includes( value)) return '[Circular]' } seenValues.push(value) } return value } } let o = {a: 1} ob = o // 循环引用 console.log( JSON.stringify(o, newCircularReplacer()) // {a:1,b:[Circular]} ✅ ) o = {} a = [o, o] // 非循环引用 console.log( JSON.stringify(a, newCircularReplacer()) // [{} ,{}] ✅)