javascript - 如何在 JavaScript 数组中查找嵌套对象的 props？

Question

我有一个看起来像这样的对象数组:

const roles = [
  {
    "id": "833ffe3d-cc24-4157-966c-5f8ceb856f4e",
    "hidden": false,
    "modified": "2020-03-20T15:14:12.689Z",
    "label": "Solution 2",
    "shortname": "Solution 2",
    "description": "Solution 2 description",
    "className": "Solution",
    "children": [
      {
        "id": "f1708329-eb9f-4042-bbe7-cdd1ff41b1b7",
        "hidden": false,
        "modified": "2020-03-20T15:14:12.293Z",
        "label": "USER CUSTOM ROLE",
        "displayName": "USER CUSTOM ROLE DISPLAY NAME",
        "className": "Role"
      }
    ]
  },
  {
    "id": "1a36709f-4de2-4f93-bf8e-57811d36e9f3",
    "hidden": false,
    "modified": "2020-03-20T15:14:12.668Z",
    "label": "Solution 1",
    "shortname": "Solution 1",
    "description": "Solution 1 description",
    "className": "Solution",
    "children": [
      {
        "id": "e824afbd-8b19-4363-b6fa-dd604f445cef",
        "hidden": false,
        "modified": "2020-03-20T15:14:12.271Z",
        "label": "USER ROLE",
        "displayName": "USER ROLE DISPLAY NAME",
        "className": "Role"
      },
      {
        "id": "8f2600d0-5328-4d41-8270-2eb10541860f",
        "hidden": false,
        "modified": "2020-03-20T15:14:12.095Z",
        "label": "BASE LOGIN ROLE",
        "displayName": "DISPLAY NAME - BASE LOGIN ROLE",
        "className": "Role"
      },
      {
        "id": "a14ce471-b792-4a5d-95ad-b9abb5dbe45c",
        "hidden": false,
        "modified": "2020-03-20T15:14:12.102Z",
        "label": "ORGANIZATION GLOBAL ROLE",
        "displayName": "DISPLAY NAME - GLOBAL ROLE",
        "className": "Role"
      },
      {
        "id": "d4a7d6ac-1663-48be-9fed-ce2a908f28f1",
        "hidden": false,
        "modified": "2020-03-20T15:14:12.130Z",
        "label": "DEPARTMENT 1 ROLE",
        "className": "Role"
      }
    ]
  }
];

我关心的点是这些对象的id、标签和子元素。正如您所看到的，一些 Angular 色对象包含自己的 Angular 色数组。我还有另一组选定的 Angular 色，如下所示:

const selected = ["Solution 1", "USER ROLE", "DEPARTMENT 1 ROLE"];

我想要的是创建与所选 Angular 色对应的平面 ID 数组，例如为了这选定的数组(顺序并不重要):

const result = ["d4a7d6ac-1663-48be-9fed-ce2a908f28f1", "e824afbd-8b19-4363-b6fa-dd604f445cef", "1a36709f-4de2-4f93-bf8e-57811d36e9f3"];

所以我的伪代码算法是:1. 检查根级别对象。2. 如果它的标签在选定的数组中，则将其 id 推送到结果数组中。3. 如果它有children prop，检查它的所有children是否有相同的条件。4. 对所有其他对象重复此操作。

我只能自己想出一个非常臭的函数，但它仍然不能解决嵌套 Angular 色的问题。我的职能是:

function getIds(arr, names) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < names.length; j++) {
      if (arr[i].label == names[j]) {
        result.push(arr[i].id);
      }
      if (arr[i].children) {
        for (let k = 0; k < arr[i].children.length; k++) {
          if (arr[i].children[k].label == names[j]) {
            result.push(arr[i].children[k].id);
          }
        }
      }
    }
  }

  return result;
}

我知道，还有更多更干净、更漂亮的解决方案，但我只是想不出一个。你能帮忙吗？

Answer 1

首先，我将使用 .flatMap() 将 Angular 色所拥有的数组展平。 。然后只需使用 .map()将标签与数组元素进行匹配并返回 id。

尝试以下操作:

const selected = ["Solution 1", "USER ROLE", "DEPARTMENT 1 ROLE"];
const roles = [{ "id": "833ffe3d-cc24-4157-966c-5f8ceb856f4e", "hidden": false, "modified": "2020-03-20T15:14:12.689Z",        "label": "Solution 2",        "shortname": "Solution 2",        "description": "Solution 2 description",        "className": "Solution",        "children": [{            "id": "f1708329-eb9f-4042-bbe7-cdd1ff41b1b7",            "hidden": false,            "modified": "2020-03-20T15:14:12.293Z",            "label": "USER CUSTOM ROLE",            "displayName": "USER CUSTOM ROLE DISPLAY NAME",            "className": "Role"          }        ]      },      {        "id": "1a36709f-4de2-4f93-bf8e-57811d36e9f3",        "hidden": false,        "modified": "2020-03-20T15:14:12.668Z",        "label": "Solution 1",        "shortname": "Solution 1",        "description": "Solution 1 description",        "className": "Solution",        "children": [{            "id": "e824afbd-8b19-4363-b6fa-dd604f445cef",            "hidden": false,            "modified": "2020-03-20T15:14:12.271Z",            "label": "USER ROLE",            "displayName": "USER ROLE DISPLAY NAME",            "className": "Role"          },          {            "id": "8f2600d0-5328-4d41-8270-2eb10541860f",            "hidden": false,            "modified": "2020-03-20T15:14:12.095Z",            "label": "BASE LOGIN ROLE",            "displayName": "DISPLAY NAME - BASE LOGIN ROLE",            "className": "Role"          },          {            "id": "a14ce471-b792-4a5d-95ad-b9abb5dbe45c",            "hidden": false,            "modified": "2020-03-20T15:14:12.102Z",            "label": "ORGANIZATION GLOBAL ROLE",            "displayName": "DISPLAY NAME - GLOBAL ROLE",            "className": "Role"          },          {            "id": "d4a7d6ac-1663-48be-9fed-ce2a908f28f1",            "hidden": false,            "modified": "2020-03-20T15:14:12.130Z",            "label": "DEPARTMENT 1 ROLE",            "className": "Role"          }        ]      }    ];

const flat = roles.flatMap(e => e.children.concat(e));
const result = selected.map(e => flat.find(f => f.label === e).id);

console.log(selected);
console.log(result);

希望这会有所帮助!