如何使用键内的冗余键从数组（对象）中提取和映射对象

Question

我有以下示例数组（对象）：

[
  {
    "id": 1,
    "name": "selling",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "sale-report1", "detail": [] },
          { "id": 112, "name": "sale-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "webstore",
    "detail": [
      {
        "id": 11,
        "name": "sale-report",
        "detail": [
          { "id": 111, "name": "webstore-report1", "detail": [] },
          { "id": 112, "name": "webstore-report2", "detail": [] }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "setting",
    "detail": [
      {
        "id": 11,
        "name": "general",
        "detail": [
          { "id": 111, "name": "setting-general1", "detail": [] },
          { "id": 112, "name": "setting-general2", "detail": [] }
        ]
      }
    ]
  }
]

如何用这样的新格式更改数组

[
  {
    "id": 1,
    "name": "selling",
  },
  {
    "id": 11,
    "name": "sale-report"
  },
  { "id": 111, "name": "sale-report1" },
  { "id": 112, "name": "sale-report2" },
  {
    "id": 2,
    "name": "webstore",
  },
  {
    "id": 11,
    "name": "sale-report",
  },
  { "id": 111, "name": "webstore-report1" },
  { "id": 112, "name": "webstore-report2" },
  {
    "id": 2,
    "name": "setting",
  },
  {
    "id": 11,
    "name": "general",
  },
  { "id": 111, "name": "setting-general1" },
  { "id": 112, "name": "setting-general2" }
]

条件是如果分支中的对象内部有一个键“detail”，它也会被映射（假设数组中对象内部的键“detail”不受限制）

注意： detail 的内容将与 parent 相同，但值不同

提前致谢

我尝试用 foreach 手动映射，但我无法弄清楚带有数组（对象）的详细信息键是否具有无限嵌套

Answer 1

您可以解构对象并从对象中提取detail ，并将其余对象和嵌套细节数组的结果映射为具有递归函数的平面数组。

 const flat = (array = []) => array.flatMap(({ detail, ...rest }) => [ rest, ...flat(detail) ]), data = [{ id: 1, name: "selling", detail: [{ id: 11, name: "sale-report", detail: [{ id: 111, name: "sale-report1", detail: [] }, { id: 112, name: "sale-report2", detail: [] }] }] }, { id: 2, name: "webstore", detail: [{ id: 11, name: "sale-report", detail: [{ id: 111, name: "webstore-report1", detail: [] }, { id: 112, name: "webstore-report2", detail: [] }] }] }, { id: 2, name: "setting", detail: [{ id: 11, name: "general", detail: [{ id: 111, name: "setting-general1", detail: [] }, { id: 112, name: "setting-general2", detail: [] }] }] }], result = flat(data); console.log(result);

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

Answer 2

简单地说，使用递归来做到这一点。

这是工作演示-

 let input = [ { id: 1, name: "selling", detail: [ { id: 11, name: "sale-report", detail: [ { id: 111, name: "sale-report1", detail: [] }, { id: 112, name: "sale-report2", detail: [] } ] } ] }, { id: 2, name: "webstore", detail: [ { id: 11, name: "sale-report", detail: [ { id: 111, name: "webstore-report1", detail: [] }, { id: 112, name: "webstore-report2", detail: [] } ] } ] }, { id: 2, name: "setting", detail: [ { id: 11, name: "general", detail: [ { id: 111, name: "setting-general1", detail: [] }, { id: 112, name: "setting-general2", detail: [] } ] } ] } ]; let result = []; function parseData(arr) { arr.forEach((item) => { result.push({ id: item.id || null, name: item.name || null }); if (item.detail && item.detail.length) { parseData(item.detail); } }); return result; } let output = parseData(input); console.log(output);

Answer 3

执行此操作的非递归方法可能类似于以下内容：

 const data = [{"id":1,"name":"selling","detail":[{"id":11,"name":"sale-report","detail":[{"id":111,"name":"sale-report1","detail":[]},{"id":112,"name":"sale-report2","detail":[]}]}]},{"id":2,"name":"webstore","detail":[{"id":11,"name":"sale-report","detail":[{"id":111,"name":"webstore-report1","detail":[]},{"id":112,"name":"webstore-report2","detail":[]}]}]},{"id":2,"name":"setting","detail":[{"id":11,"name":"general","detail":[{"id":111,"name":"setting-general1","detail":[]},{"id":112,"name":"setting-general2","detail":[]}]}]}]; const extract = (data) => { const result = []; const queue = [...data]; while(queue.length > 0) { const { detail, ...rest } = queue.shift(); result.push(rest); queue.unshift(...detail); } return result; }; console.log(extract(data));