javascript - js操作数组莫名多出来一个Circular？

Question

{
       "PayInfo":[
        {
            "VisitNo":"936932",
            "DeptName":"急诊科门诊",
            "DeptCode":"0046",
            "VisitDate":"2017122801:01:55",
            "DoctorName":"张珊珊",
            "DoctorNo":"1203",
            "GHXH":"123121",
            "YBDiseCodg":null,
            "YBDiseName":null,
            "DiagType":null,
            "DiagSrtNo":null,
            "DiagDept":null,
            "DiseDorNo":null,
            "DiseDorName":null,
            "DiagTime":null,
            "ValiFlag":null,
            "Consume":"0.01",
            "PayInfoDetails":[
                {
                    "ItemNo":"936931",
                    "ItemName":"复方氯化钠注射液",
                    "Number":"4.00",
                    "Price":"2.5875",
                    "Consume":"10.35",
                    "CFID":"936931",
                    "DeptNo":null,
                    "DeptName":null,
                    "DoctorNo":null,
                    "DoctorName":null,
                    "Unit":null,
                    "Spec":"500ml/瓶",
                    "OperateTime":null,
                    "GJYBCodg":null,
                    "RxCircFlag":null,
                    "MedlistCodg":null,
                    "MedinslistCodg":null,
                    "HospApprFlag":null,
                    "MedlistName":null,
                    "MedlistSpc":null
                }
            ],
            "select":true
        },
        {
            "VisitNo":"936933",
            "DeptName":"急诊科门诊",
            "DeptCode":"0046",
            "VisitDate":"2017122800:59:35",
            "DoctorName":"张珊珊",
            "DoctorNo":"1203",
            "GHXH":"123121",
            "YBDiseCodg":null,
            "YBDiseName":null,
            "DiagType":null,
            "DiagSrtNo":null,
            "DiagDept":null,
            "DiseDorNo":null,
            "DiseDorName":null,
            "DiagTime":null,
            "ValiFlag":null,
            "Consume":"0.01",
            "PayInfoDetails":[
                {
                    "ItemNo":"936931",
                    "ItemName":"复方氯化钠注射液",
                    "Number":"4.00",
                    "Price":"2.5875",
                    "Consume":"10.35",
                    "CFID":"936931",
                    "DeptNo":null,
                    "DeptName":null,
                    "DoctorNo":null,
                    "DoctorName":null,
                    "Unit":null,
                    "Spec":"500ml/瓶",
                    "OperateTime":null,
                    "GJYBCodg":null,
                    "RxCircFlag":null,
                    "MedlistCodg":null,
                    "MedinslistCodg":null,
                    "HospApprFlag":null,
                    "MedlistName":null,
                    "MedlistSpc":null
                }
            ],
            "select":true
        }
    ],
    "PayInfoDetail":[
        "<Circular: @.PayInfo[0].PayInfoDetails>",
        "<Circular: @.PayInfo[1].PayInfoDetails>"
    ]
}

上面的代码，其中PayInfoDetail是把上面的PayInfo中的PayInfoDetails分别拿出来又组到一起的一个数组，能过下面的代码实现的：

let PayInfoDetailOrg=[]
                    this.HISOrder.map(m=> {
                        m.PayInfoDetails.map(n=>{
                            PayInfoDetailOrg.push(n)
                        })
                    })    

但是为什么我拿到的数据变成了

"PayInfoDetail":[
        "<Circular: @.PayInfo[0].PayInfoDetails>",
        "<Circular: @.PayInfo[1].PayInfoDetails>"
    ]

这样子？
有人遇到过没？

Answer 1

"<Circular: @.PayInfo[0].PayInfoDetails>",表示"<Circular: @.PayInfo[0].PayInfoDetails>, Circular表示循环, 是说"PayInfo" 的 JSON 数组对象，并且将其子项 "PayInfoDetails" 作为其循环引用的目标。

1. 这里有些绕:
   这种现象的根本原因在于循环引用，即一个对象引用了另一个对象，而后者又反过来引用了前者。
   "PayInfo" 的 JSON 数组对象，并且将其子项 "PayInfoDetails" 作为其循环引用的目标。因此，在某些情况下，如果您需要访问或处理 PayInfoDetail 中的实际信息，则需要先获取该 JSON 数组对象，并根据所需的元素索引读取相应的 PayInfoDetails 子项。
   而JSON序列化没有办法处理又要防止循环递归造成溢出就用"<Circular: @.PayInfo[0].PayInfoDetails>表示了,

解决办法

• 就是用JSON来回转一下, 可以用json-cyclic这个插件
• 在遍历时用不传递引用而是传递值, 最方便的方法也就是用JSON先转为string在转回obj

不要用map, 他有特殊的功能, 只是遍历用forEach

Answer 2

定义一个数据来 push 没问题，用 map 代替 forEach 也没问题，不过我还是想说，这其实是一个 flatMap 可以解决的事情

const PayInfoDetailOrg = this.PayInfo.flatMap(m => m.PayInfoDetails);

如果这样写的话，得到的每个元素就是 PayInfoDetails 中的对象，不过我看题上的输出的内容，应该是还处理过的吧。有点像是想把它处理成 XML 的样子

Answer 3

这种问题检查代码吧，基本就是代码书写的低级错误

Answer 4

请把this.HISOrder copy出来

Answer 5

如果你用 push 的话，这里应该用 forEach 而不是用 map 吧
用 map可以试试 flat

PayInfoDetailOrg = this.HISOrder.map(m=> {
    return m.PayInfoDetails
}).flat()