如何在JavaScript/TypeScript中递归执行.map处理嵌套数组？

当然可以！递归调用array.map()完全是处理这种多层嵌套数组的理想方案，刚好能帮你把每一层的结构都精准转换到位。

先说说你当前代码的局限：它只处理了两层结构，第二层的children没有继续处理更深的子节点，而且两层的结构也没对齐（第一层用data包裹name，第二层直接是name），递归就能完美解决这些问题。

递归实现方案 #

我们可以写一个专门处理单个节点的递归函数，让它负责转换当前节点，同时递归处理所有子节点：

function transformNode(node) {
  // 先把当前节点转换成目标结构
  const transformedNode = {
    data: {
      name: node.Name
    }
  };

  // 检查当前节点是否有子节点数组，有就递归处理每一个子项
  if (node.Children && Array.isArray(node.Children)) {
    transformedNode.children = node.Children.map(child => transformNode(child));
  }

  return transformedNode;
}

// 用这个递归函数处理整个数据源数组
const fixed = data.map(item => transformNode(item));

工作原理说明 #

1. 单节点转换：每次处理一个节点时，先把它转换成你需要的data包裹name的结构
2. 递归处理子节点：如果当前节点有Children数组，就用map遍历每个子节点，递归调用transformNode——不管嵌套多少层，都会被逐层处理
3. 边界处理：如果Children是null或者不存在，就不会添加children属性；如果你需要保留children: null的形式，可以稍微修改判断逻辑：

   if (node.Children !== undefined) {
     transformedNode.children = Array.isArray(node.Children) 
       ? node.Children.map(child => transformNode(child)) 
       : node.Children;
   }
   

测试你的示例数据 #

用你给出的嵌套数组测试，转换后的结果会是：

[
  {
    "data": { "name": "Test" },
    "children": [
      {
        "data": { "name": "Id" },
        "children": [
          { "data": { "name": "Child Id" } }
        ]
      }
    ]
  }
]

这样不管你的数组嵌套多少层，都能被正确转换，结构也完全符合你的目标要求。

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