如何在JavaScript嵌套对象数组中获取对象的完整层级路径

问题原因 #

• 使用全局共享的groupPath变量存储路径，遍历不同根节点时路径不会自动重置，会残留上一次遍历的结果
• 递归逻辑没有把当前层级的路径作为参数传递给子节点，子节点无法正确拼接父级路径
• 打印时机错误，遍历到有group的父节点时也执行了打印，而我们只需要输出叶子节点的完整路径

修复后的代码 #

const data = {
  data: [
    {
      key: 'userInfo',
      group: [
        { key: 'street' },
        { key: 'phone' },
      ],
    },
    {
      key: 'fullName',
      group: [
        { key: 'firstName' },
        { key: 'lastName' },
      ],
    },
  ],
};

// 递归函数新增入参接收上层路径，默认值为空
function iter(node, parentPath = '') {
  // 无group的叶子节点：拼接完整路径输出
  if (!Array.isArray(node.group)) {
    console.log(`${parentPath}.${node.key}`);
    return;
  }
  // 有group的父节点：将当前key作为新的父路径，传递给子节点递归
  const currentPath = node.key;
  node.group.forEach(child => iter(child, currentPath));
}

data.data.forEach(iter);

运行后输出完全符合预期：

userInfo.street
userInfo.phone
fullName.firstName
fullName.lastName

该写法同时支持更深层级的嵌套结构，不需要额外调整逻辑。

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