如何循环嵌套数组？答案

【问题标题】：How do I loop through nested arrays?如何循环嵌套数组？
【发布时间】：2020-03-04 13:56:59
【问题描述】：

我下面有这个结构，我想在层次结构中循环而不丢失任何对象。

{
  "countries": [
    {
      "name": "Denmark",
      "id": "APA1",
      "children": [
        {
          "name": "Zealand",
          "id": "APA1.1",
          "parentId": "APA1",
          "children": [
            {
              "name": "Copenhagen",
              "id": "APA1.1.1",
              "parentId": "APA1.1",
              "children": [
                {
                  "name": "Dublin",
                  "id": "ANA1",
                  "parentId": "APA1.1.1.1",
                  "hostNames": [
                    {
                      "ip": "20.190.129.1"
                    },
                    {
                      "ip": "20.190.129.2"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "name": "Jutland",
          "id": "APA1.2",
          "parentId": "APA1",
          "children": [
            {
              "name": "Nordjylland",
              "id": "APA1.2.1",
              "parentId": "APA1.2",
              "children": [
                {
                  "name": "Aalborg",
                  "id": "APA1.2.1.1",
                  "parentId": "APA1.2.1",
                  "children": [
                    {
                      "name": "Risskov",
                      "id": "ANA3",
                      "parentId": "APA1.2.1.1",
                      "hostNames": [
                        {
                          "ip": "40.101.81.146"
                        }
                      ]
                    },
                    {
                      "name": "Brabrand",
                      "id": "ANA4",
                      "parentId": "APA1.2.1.1",
                      "hostNames": [
                        {
                          "ip": "43.203.94.182"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

我之所以要遍历层次结构，是因为我想把它变成一个扁平的结构。所以本质上我将把每个对象移动到另一个具有我想要的结构的数组中。我只想知道如何访问孩子。

想要的结果：

"applicationGroups": [
    {
        "id" : "APA1",
        "name": "Denmark",
    },
    {
        "name": "Zealand",
        "id": "APA1.1",
        "parentId": "APA1"
    },
    {
        "name": "Copenhagen",
        "id": "APA1.1.1",
        "parentId": "APA1.1"
    },
    {
        "name": "Dublin",
        "id": "ANA1",
        "parentId": "APA1.1.1.1"
    },
    {
        "name": "Jutland",
        "id": "APA1.2",
        "parentId": "APA1"
    },
    {
        "name": "Nordjylland",
        "id": "APA1.2.1",
        "parentId": "APA1.2"
    },
    {
        "name": "Aalborg",
        "id": "APA1.2.1.1",
        "parentId": "APA1.2.1"
    },
    {
        "name": "Risskov",
        "id": "ANA3",
        "parentId": "APA1.2.1.1"
    },
    {
        "name": "Brabrand",
        "id": "ANA4",
        "parentId": "APA1.2.1.1"
    }
]

我对 JavaScript 有点陌生，我真的不知道从哪里开始，但是我给出的这个示例与我正在处理的实际示例并不完全相同，所以我只想要原理所以我可以在我的实际代码中自己实现它。

【问题讨论】：

请添加您的尝试和想要的结果。

标签： javascript arrays object

【解决方案1】：

您可以采用flatMap 方法来递归调用展平回调。

const
    flat = ({ hostNames, children = [], ...o }) => [o, ...children.flatMap(flat)],
    data = { countries: [{ name: "Denmark", id: "APA1", children: [{ name: "Zealand", id: "APA1.1", parentId: "APA1", children: [{ name: "Copenhagen", id: "APA1.1.1", parentId: "APA1.1", children: [{ name: "Dublin", id: "ANA1", parentId: "APA1.1.1.1", hostNames: [{ ip: "20.190.129.1" }, { ip: "20.190.129.2" }] }] }] }, { name: "Jutland", id: "APA1.2", parentId: "APA1", children: [{ name: "Nordjylland", id: "APA1.2.1", parentId: "APA1.2", children: [{ name: "Aalborg", id: "APA1.2.1.1", parentId: "APA1.2.1", children: [{ name: "Risskov", id: "ANA3", parentId: "APA1.2.1.1", hostNames: [{ ip: "40.101.81.146" }] }, { name: "Brabrand", id: "ANA4", parentId: "APA1.2.1.1", hostNames: [{ ip: "43.203.94.182" }] }] }] }] }] }] },
    result = data.countries.flatMap(flat);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

您可以结合Array.flat() 方法和this answer 递归地展平对象。使用递归函数是实现这一目标的更快方法。

【讨论】：

【解决方案3】：

要获得扁平结构，您可以使用reduce 方法创建递归函数。

const data = {"countries":[{"name":"Denmark","id":"APA1","children":[{"name":"Zealand","id":"APA1.1","parentId":"APA1","children":[{"name":"Copenhagen","id":"APA1.1.1","parentId":"APA1.1","children":[{"name":"Dublin","id":"ANA1","parentId":"APA1.1.1.1","hostNames":[{"ip":"20.190.129.1"},{"ip":"20.190.129.2"}]}]}]},{"name":"Jutland","id":"APA1.2","parentId":"APA1","children":[{"name":"Nordjylland","id":"APA1.2.1","parentId":"APA1.2","children":[{"name":"Aalborg","id":"APA1.2.1.1","parentId":"APA1.2.1","children":[{"name":"Risskov","id":"ANA3","parentId":"APA1.2.1.1","hostNames":[{"ip":"40.101.81.146"}]},{"name":"Brabrand","id":"ANA4","parentId":"APA1.2.1.1","hostNames":[{"ip":"43.203.94.182"}]}]}]}]}]}]}

function flat(data) {
  return data.reduce((r, { children, ...rest }) => {
    if (children) r.push(...flat(children))
    r.push(rest)
    return r;
  }, [])
}

const result = flat(data.countries)
console.log(result)

【讨论】：