如何在JavaScript中递归获取嵌套对象数组的所有id值

问题 #

我有一个任意深度的嵌套对象数组，示例数据如下：

[
    {
        "id": "3",
        "user_id": "1479",
        "folder_id": "2",
        "is_folder": true,
        "folder_name": "folder 3",
        "unique_filename": null,
        "original_filename": null,
        "file_extension": null,
        "content_type": null,
        "file_size": null,
        "description": "People",
        "visible": false,
        "status": 0,
        "deleted_at": null,
        "last_access": "2022-11-21T09:34:48.546+02:00",
        "created_at": "2022-11-21T09:34:48.546+02:00",
        "updated_at": "2022-11-21T09:34:48.546+02:00",
        "children": [
            {
                "id": "36",
                "user_id": "1479",
                "folder_id": "3",
                "is_folder": true,
                "folder_name": "folder 4",
                "unique_filename": null,
                "original_filename": null,
                "file_extension": null,
                "content_type": null,
                "file_size": null,
                "description": "People",
                "visible": false,
                "status": 0,
                "deleted_at": null,
                "last_access": "2022-11-21T21:33:48.767+02:00",
                "created_at": "2022-11-21T21:33:48.767+02:00",
                "updated_at": "2022-11-21T21:33:48.767+02:00",
                "children": [
                    {
                        "id": "37",
                        "user_id": "1479",
                        "folder_id": "36",
                        "is_folder": true,
                        "folder_name": "folder 37",
                        "unique_filename": null,
                        "original_filename": null,
                        "file_extension": null,
                        "content_type": null,
                        "file_size": null,
                        "description": "People",
                        "visible": false,
                        "status": 0,
                        "deleted_at": null,
                        "last_access": "2022-11-21T21:38:30.690+02:00",
                        "created_at": "2022-11-21T21:38:30.690+02:00",
                        "updated_at": "2022-11-21T21:38:30.690+02:00",
                        "children": []
                    }
                ]
            },
            {
                "id": "42",
                "user_id": "1479",
                "folder_id": "3",
                "is_folder": true,
                "folder_name": "folder 41",
                "unique_filename": null,
                "original_filename": null,
                "file_extension": null,
                "content_type": null,
                "file_size": null,
                "description": "People",
                "visible": false,
                "status": 0,
                "deleted_at": null,
                "last_access": "2022-11-21T23:38:31.935+02:00",
                "created_at": "2022-11-21T23:38:31.935+02:00",
                "updated_at": "2022-11-21T23:38:31.935+02:00",
                "children": []
            }
        ]
    },
    {
        "id": "5",
        "user_id": "1479",
        "folder_id": null,
        "is_folder": false,
        "folder_name": null,
        "unique_filename": "drives/users/user_drive_1479/YTHGg4dnzn8O5a4DGHbntsrKhY2n4ycc3hZG5j7YxdIb5yEka9iToJDi9WxQPe4taSjLP53b1s01mctIy69o7m6L92.c",
        "original_filename": "sample3.c",
        "file_extension": "c",
        "content_type": "text/x-c",
        "file_size": "126",
        "description": null,
        "visible": false,
        "status": 0,
        "deleted_at": null,
        "last_access": "2022-11-21T09:37:48.766+02:00",
        "created_at": "2022-11-21T09:37:48.767+02:00",
        "updated_at": "2022-11-21T09:37:48.767+02:00",
        "children": []
    },
    {
        "id": "7",
        "user_id": "1479",
        "folder_id": null,
        "is_folder": false,
        "folder_name": null,
        "unique_filename": "drives/users/user_drive_1479/FSix4WZx0s9ey89x3foLxmaC1wCHTSw1HQi8fDxQ32bYQyKmyPJBcgeI33KOrdPfAcOChvkBnIBizj5IQbggeprCpz.cpp",
        "original_filename": "sample1.cpp",
        "file_extension": "cpp",
        "content_type": "text/x-c",
        "file_size": "94",
        "description": null,
        "visible": false,
        "status": 0,
        "deleted_at": null,
        "last_access": "2022-11-21T09:37:52.324+02:00",
        "created_at": "2022-11-21T09:37:52.324+02:00",
        "updated_at": "2022-11-21T09:37:52.324+02:00",
        "children": []
    },
    {
        "id": "37",
        "user_id": "1479",
        "folder_id": "36",
        "is_folder": true,
        "folder_name": "folder 37",
        "unique_filename": null,
        "original_filename": null,
        "file_extension": null,
        "content_type": null,
        "file_size": null,
        "description": "People",
        "visible": false,
        "status": 0,
        "deleted_at": null,
        "last_access": "2022-11-21T21:38:30.690+02:00",
        "created_at": "2022-11-21T21:38:30.690+02:00",
        "updated_at": "2022-11-21T21:38:30.690+02:00",
        "children": []
    }
]

需要提取所有id键的值，预期结果为：

[3,36,37,42,5,7,37]

我尝试了以下代码：

if (data.children) {
  console.log(data.id)
  data.children.forEach(item => {
    this.getObject(item)
  })
} else {
  console.log(data.id)
}

其中data变量为上述对象数组，但结果返回undefined，求解决办法。

解决方案 #

你的代码问题在于直接对数组对象判断children属性——数组本身没有children，所以会进入else分支，打印data.id自然是undefined。需要先遍历数组中的每个元素，再对每个对象递归提取id。

可以用递归函数实现，同时收集所有id到数组中：

function extractIds(items) {
  let ids = [];
  items.forEach(item => {
    // 先添加当前对象的id，转换为数字类型
    ids.push(Number(item.id));
    // 如果有children且children不为空，递归处理
    if (item.children && item.children.length > 0) {
      ids = ids.concat(extractIds(item.children));
    }
  });
  return ids;
}

// 调用示例
const data = [/* 你的嵌套对象数组 */];
const result = extractIds(data);
console.log(result); // 输出 [3,36,37,42,5,7,37]

代码说明： #

• 函数接收数组作为参数，初始化空数组ids存储结果
• 遍历数组中的每个对象，先将当前对象的id转为数字后加入ids
• 判断当前对象是否有非空的children数组，如果有就递归调用extractIds，并将返回的结果合并到ids中
• 最后返回收集到的所有id数组

如果是在类中使用，调整为类方法即可：

class YourClass {
  extractIds(items) {
    let ids = [];
    items.forEach(item => {
      ids.push(Number(item.id));
      if (item.children && item.children.length > 0) {
        ids = ids.concat(this.extractIds(item.children));
      }
    });
    return ids;
  }

  // 调用的方法
  getIds() {
    const data = [/* 你的数据 */];
    const result = this.extractIds(data);
    console.log(result);
  }
}

内容的提问来源于stack exchange，提问作者Nelson Thembeni