如何使用递归从JS深度嵌套对象与数组中提取所有uid值

需求场景 #

现有如下深度嵌套的JS对象，需要提取对象中所有层级出现的uid字段值，组成一个新数组：

let obj = {
  comp: "el",
  type: "ele",
  children: [
    {
      children: [
        {
          text: "text",
          children: [],
          uid: "-5zIANJjCz-qU0MNcf5E1",
        },
        {
          text:"text",
          children: [],
          uid: "bpeVj4NaD_Io3WP7V0v91"
        }
      ],
      uid: "ZygtUliVsFbFpbmHv5yp9"
    },
    {
      children: [
        {
          text: "text",
          children: [],
          uid: "qmw59v1BVRMEuM8r9VvQp",
        },
        {
          text: "text. ",
          children: [],
          uid: "q-QeWlEnKvVTjD0dPRXCu"
        }
      ],
      uid: "rp_gURLFIgd1n7bn-pRhn"
    },
    {
      children: [
        {
          text: "text",
          children: [],
          uid: "8gIytZ52tq0mqiVAhAJLN",
        },
        {
          text: "text",
          children: [],
          uid: "q-QeeWlEnKvVTjD0dPRXCu"
        }
      ],
      uid: "M3hqA-Rp1wQz60IVdIGUX"
    }
  ],
  uid: "M4JBL9SoOOLo5iQSb5M_P"
};

此前你已经通过第三方工具实现了需求，现在需要纯递归的实现方案。

递归实现代码 #

function getAllUids(target) {
  const result = [];

  // 递归遍历节点
  const traverse = (node) => {
    // 收集当前节点的uid，即使uid为假值也能正常识别
    if (node && Object.hasOwn(node, 'uid')) {
      result.push(node.uid);
    }
    // 递归遍历子节点数组
    if (Array.isArray(node?.children)) {
      node.children.forEach(child => traverse(child));
    }
  }

  traverse(target);
  return result;
}

// 调用示例
const allUids = getAllUids(obj);

逻辑说明 #

• 先初始化一个空数组用于存储所有收集到的uid
• 内部封装递归遍历函数，接收当前遍历的节点作为入参
• 优先检查当前节点是否存在uid属性，存在就推入结果数组
• 再检查当前节点是否有children数组属性，有的话遍历每一个子节点，递归调用遍历函数处理
• 遍历完成后直接返回结果数组即可

这个实现不需要依赖第三方工具，逻辑简单可扩展，如果后续需要修改收集规则、增加过滤条件都可以直接在遍历逻辑里调整。

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