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


680

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

谢谢。

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

我想将obj字符串化为:

{"a":"foo"}

5
您可以将要解析的带有循环引用的示例对象发布吗?
TWickz

3
这样
Alvin Wong


2
晚了聚会,但是有一个github项目来解决这个问题。
普雷斯顿S

Answers:


604

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))

1
@Harry有什么错误?如果答案有误,我会很乐意解决。
罗伯W

1
@CruzDiablo DOM序列化通常是没有意义的。但是,如果您可以为自己的目的考虑有意义的序列化方法,则可以尝试向DOM对象添加序列化的自定义:(Node.prototype.toJSON = function() { return 'whatever you think that is right'; };如果您想要更多常规/特定的东西,只需尝试在原型树中进行任何操作即可:HTMLDivElement实现HTMLElement实现元素实现Node实现EventTarget;请注意:这可能取决于浏览器,先前的树适用于Chrome)
Rob W

7
这是错误的,因为它将跳过包含两次的对象的第二次出现,即使它们不是真正的循环结构也是如此。var a={id:1}; JSON.stringify([a,a]);
user2451227

3
@ user2451227“此示例中的替换项不是100%正确(取决于您对“重复项”的定义。)但是这个概念仍然存在:使用自定义替换项,并跟踪已分析的对象值。
罗伯W

4
这里的GC问题可以说是多余的。如果将其作为单个脚本运行,则脚本立即终止。如果这被封装在一个函数内执行,然后cache将可达developer.mozilla.org/en-US/docs/Web/JavaScript/...
Trindaz

704

在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))

另外请注意,您可以通过options对象进行检查(请参见上面的链接)

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



请阅读下面的评论并将其赞扬...


134
util是一个内置模块,您无需安装它。
Mitar 2014年

10
console.log(util.inspect(obj))
starsinmypockets 2014年

19
@Mitar它是内置的,但是您仍然必须加载模块var util = require('util');
bodecker 2015年

14
不要像我这样的笨蛋,它只是 obj_str = util.inspect(thing),不是<s> garbage_str = JSON.stringify(util.inspect(thing))</ s>
ThorSummoner

7
这比混入检查类型要好得多。为什么不能像这样字符串化?如果它知道有一个循环引用,为什么不告诉它忽略它呢?
克里斯·孔雀

141

我想知道为什么没有人从MDN页面发布正确的解决方案 ...

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());

可见的值应存储在set中,而不是数组中(替换器将被调用在每个元素上器),并且无需尝试链中导致循环引用的JSON.stringify 每个元素

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


整洁,但这仅是ES2015。没有IE支持。
马丁·卡波迪奇

43
尤达说:“如果仍然支持IE,那么应该使用一个翻译器。”
西班牙火车

1
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)undefined以chrome
格式

1
它可以在React + Typescript中工作。谢谢
user3417479 19'Aug

75

做就是了

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)。
Brian Haak

16
我认为您可能需要更多的理由来使用模块,而不是“只是这样做”。JSON原则上覆盖不是很好。
Edwin

我需要复制一个对象用于存根测试。这个答案是完美的。我复制了对象,然后删除了覆盖。谢谢!!
克里斯·夏普

1
根据作者的说法,此软件包已被弃用。CircularJSON仅在维护中,扁平化是其后继者。链接:github.com/WebReflection/flatted#flatted
罗伯特·莫利纳

3
当心,“扁平化”(和circular-json?)包不会复制JSON.stringify()功能。它创建自己的非JSON格式。(例如,Flatted.stringify({blah: 1})结果为[{"blah":1}])我看到有人试图提出有关此问题的信息,而作者则指责他们并将问题锁定在评论中。
jameslol

48

我真的很喜欢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);
};

您在此行上缺少空检查:返回“(请参见+(!! value.constructor?value.constructor.name.toLowerCase():typeof(value))+用键“ + printObjectKeys [printedObjIndex] + “)”;
Isak

我会很乐意添加它。请告诉我什么是可为空的,因为到目前为止我确实遇到任何问题。
guy mograbi

2
//浏览器的输出不会超过20K-但是您将限制设为2k。也许将来会改变?
Pochen's

38

@RobW的答案是正确的,但是性能更高!因为它使用哈希图/集:

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
Alexander Mills,

Set实现可能只是在幕后使用了一个数组和indexOf,但我尚未确认。
亚历山大·米尔斯

这将删除具有甚至具有不同值的子节点的父节点,例如- {"a":{"b":{"a":"d"}}}甚至删除具有空对象{}的节点
Sandip Pingle

你能举个桑迪普的例子吗?创建gist.github.com或其他内容
Alexander Mills

优秀的 !!!首先(从顶部开始,但仅检查2-3个功能解决方案)在node.js和Fission ;-)下的此处工作解决方案-挂起的库。
汤姆(Tom)

37

请注意,JSON.decycleDouglas Crockford 还实现了一种方法。参见他的 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)));

我做了一个叉子来解决这个问题(请参阅我的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"


2
使用它们时,他和您的代码都给我一个“ RangeError:超出最大调用堆栈大小”。
jcollum 2014年

我可以看看您是否在Fiddle上提供代码或在Github上添加问题:github.com/Eccenux/JSON-js/issues
Nux

这就是我想要的。JSON.decycle(a, true)当您将true用作循环功能的参数时会发生什么。
Rudra

@Rudra true使stringifyNodesfork中的选项为true。这将例如将divid =“ some-id” 转储到字符串:div#some-id。您将避免一些问题,但是您将无法完全追溯。
Nux

有npm软件包npmjs.com/package/json-js,但有一段时间没有更新
Michael Freidgeim

23

我建议您从@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函数,您还可以通过将“ replacer”函数作为的第二个参数传递来自定义清理行为stringify()。如果您发现自己需要一个简单的示例来完成此操作,我只是在此处编写了一个自定义替换器,将错误,正则表达式和函数强制转换为易于理解的字符串。


13

对于将来的Google员工,当您知道所有循环引用的键时都在寻找解决方案,可以使用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);
}

3
好的代码。但是,您在编写if(printedObjIndex)时应该写一个错误,这是一个愚蠢的错误,if(printedObjIndex==false)因为除非您另外明确声明,否则它index也可能0被翻译为false
Guy Mograbi

1
@guymograbi不是===吗?0 == falsetrue0 === falsefalse。; ^)但我宁愿不要将其初始化printedObjIndex为false,因为那样的话您可以进行检查,undefined以确保您(好吧,Trindaz's)不会将隐喻混为一谈。
鲁芬,2015年

@ruffin不错的收获。是的,显然,请始终使用严格的相等性和jshint来捕获此类愚蠢的错误。
Guy mograbi

4

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

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

var replacement = {"b":undefined};

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

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


4
这可能仅在IE中有效(考虑到MSDN是Microsoft提供的文档,并且Microsoft创建了IE)。在Firefox / Chrome中,jsfiddle.net / ppmaW会生成循环引用错误。FYI:var obj = {foo:obj}没有没有创建循环引用。而是创建一个对象,该对象的foo属性引用的先前值objundefined如果之前未定义,则声明为var obj)。
罗伯W


4
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;
}

3

我知道这是一个古老的问题,但是我想建议我创建一个名为smart-circular的NPM软件包,该软件包的工作方式与其他建议的方式不同。如果您使用大而深的物体,这特别有用

一些功能是:

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

  • 通过在广度优先搜索中查找圆度,该程序包可确保此路径尽可能小,这在处理非常大和很深的对象时非常重要,在这种情况下,这些路径会变得很长且难以遵循(自定义替换为JSON.stringify做一个DFS);

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

  • 最后,路径以访问引用字段所必需的方式精确编写,这可以帮助您调试。


3

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

https://developer.mozilla.org/zh-CN/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中不会引发循环引用错误。此答案中的定义已修改,因此确实引发了错误。



这个答案应该被接受
躁狂抑郁症

2

要更新覆盖JSON工作方式的答案(可能不建议使用,但非常简单),请不要使用circular-json(已弃用)。而是使用扁平的后继者:

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

从@ user1541685上面的旧答案中借来的,但是用新的答案代替了:

npm i --save flatted

然后在你的js文件中

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

1

在github上发现了circular-json库,它对我的​​问题很好用。

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

  • 支持多平台使用,但到目前为止,我仅使用node.js进行了测试。
  • API是相同的,因此您所需要做的就是包含并将其用作JSON替换。
  • 它具有自己的解析方法,因此您可以将“循环”序列化的数据转换回对象。

2
该库对我造成了错误,因此我必须寻找另一个。错误TypeError:toISOString在Object的String.toJSON(<anonymous>)处不是函数。在JSON.Stringify(<anonymous>)处的<anonymous>(localhost:8100 / build / polyfills.js:1:3458)。 stringifyRecursion [as stringify](localhost:8100 / build / main.js:258450:15
Mark

1
@MarkEllul我在2015年发表了评论,如果能找到更好的选择,我将在此处进行编辑。我偶尔仍然会在日常工作中遇到同样的问题,并且我通常更喜欢以自己的手动功能递归地进行适当/安全的检查。我建议您在不熟悉函数式编程实践的情况下进行检查,通常,由于不那么棘手且更可靠,因此缓解了这种递归操作。
JacopKane19年

尝试对事件进行字符串化并在赛普拉斯测试中重新发送时,也得到“ toISOString不是函数”
Devin G Rhode

1

我这样解决此问题:

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请求对象的外观。
redbmk

1

我知道这个问题很旧并且有很多很好的答案,但由于它是新口味(es5 +),所以我发布了这个答案


1

尽管已经充分回答了这一问题,但是您也可以在使用字符串delete运算符进行字符串化之前,明确删除相关属性。

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

删除运算符

这样就无需构建或维护复杂的逻辑来删除循环引用。


1
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');
}


0

根据其他答案,我最终得到以下代码。它与循环引用,带有自定义构造函数的对象一起使用时效果很好。

从要序列化的给定对象中,

  • 在遍历对象时缓存所有遇到的对象,并为每个对象分配一个唯一的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));

0

尝试这个:

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]);}
Klesun

不鼓励仅使用代码的答案。请单击“编辑”并添加一些单词,以概括您的代码如何解决该问题,或者说明您的答案与以前的答案有何不同。评论来自
尼克

0

在我的解决方案中,如果遇到一个循环,它不仅会说“循环”(或什么也不说),它会像foo所示:请参见上面的object#42,并查看foo指向的位置可以向上滚动并搜索对于对象#42(每个对象在启动时都说“对象#xxx”带有一些整数xxx)

片段:

(function(){
	"use strict";
	var ignore = [Boolean, Date, Number, RegExp, String];
	function primitive(item){
		if (typeof item === 'object'){
			if (item === null) { return true; }
			for (var i=0; i<ignore.length; i++){
				if (item instanceof ignore[i]) { return true; }
			}
			return false;
		} else {
			return true;
		}
	}
	function infant(value){
		return Array.isArray(value) ? [] : {};
	}
	JSON.decycleIntoForest = function decycleIntoForest(object, replacer) {
		if (typeof replacer !== 'function'){
			replacer = function(x){ return x; }
		}
		object = replacer(object);
		if (primitive(object)) return object;
		var objects = [object];
		var forest  = [infant(object)];
		var bucket  = new WeakMap(); // bucket = inverse of objects 
		bucket.set(object, 0);       // i.e., map object to index in array
		function addToBucket(obj){
			var result = objects.length;
			objects.push(obj);
			bucket.set(obj, result);
			return result;
		}
		function isInBucket(obj){
			return bucket.has(obj);
			// objects[bucket.get(obj)] === obj, iff true is returned
		}
		function processNode(source, target){
			Object.keys(source).forEach(function(key){
				var value = replacer(source[key]);
				if (primitive(value)){
					target[key] = {value: value};
				} else {
					var ptr;
					if (isInBucket(value)){
						ptr = bucket.get(value);
					} else {
						ptr = addToBucket(value);
						var newTree = infant(value);
						forest.push(newTree);
						processNode(value, newTree);
					}
					target[key] = {pointer: ptr};
				}
			});
		}
		processNode(object, forest[0]);
		return forest;
	};
})();
the = document.getElementById('the');
function consoleLog(toBeLogged){
  the.textContent = the.textContent + '\n' + toBeLogged;
}
function show(root){
	var cycleFree = JSON.decycleIntoForest(root);
	var shown = cycleFree.map(function(tree, idx){ return false; });
	var indentIncrement = 4;
	function showItem(nodeSlot, indent, label){
	  leadingSpaces = ' '.repeat(indent);
      leadingSpacesPlus = ' '.repeat(indent + indentIncrement);
	  if (shown[nodeSlot]){
	  consoleLog(leadingSpaces + label + ' ... see above (object #' + nodeSlot + ')');
        } else {
		  consoleLog(leadingSpaces + label + ' object#' + nodeSlot);
		  var tree = cycleFree[nodeSlot];
		  shown[nodeSlot] = true;
		  Object.keys(tree).forEach(function(key){
			var entry = tree[key];
			if ('value' in entry){
			  consoleLog(leadingSpacesPlus + key + ": " + entry.value);
                } else {
					if ('pointer' in entry){
						showItem(entry.pointer, indent+indentIncrement, key);
                    }
                }
			});
        }
    }
	showItem(0, 0, 'root');
}
cities4d = {
	Europe:{
		north:[
			{name:"Stockholm", population:1000000, temp:6},
			{name:"Helsinki", population:650000, temp:7.6}
		],
		south:[
			{name:"Madrid", population:3200000, temp:15},
			{name:"Rome", population:4300000, temp:15}
		]
	},
	America:{
		north:[
			{name:"San Francisco", population:900000, temp:14},
			{name:"Quebec", population:530000, temp:4}
		],
		south:[
			{name:"Rio de Janeiro", population:7500000, temp:24},
			{name:"Santiago", population:6300000, temp:14}
		]
	},
	Asia:{
		north:[
			{name:"Moscow", population:13200000, temp:6}
		]
	}
};
cities4d.Europe.north[0].alsoStartsWithS = cities4d.America.north[0];
cities4d.Europe.north[0].smaller = cities4d.Europe.north[1];
cities4d.Europe.south[1].sameLanguage = cities4d.America.south[1];
cities4d.Asia.ptrToRoot = cities4d;
show(cities4d)
<pre id="the"></pre>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.