JavaScript中处理n层嵌套对象数组的递归函数实现问询

嘿，我来帮你搞定这个多层嵌套的settings数组递归处理问题！首先先把你给出的示例数据修正成合法的JavaScript代码（原示例里最后一个children没闭合）：

const settings = [
  {
    path: '/templates/pictures.php',
    url: '/pictures',
    label: 'Pictures',
    component: 'tab',
    template: 'default'
  },
  {
    path: '/templates/post-article.php',
    url: '/user/:username',
    component: 'table',
    template: 'default',
    children: [
      {
        path: '/templates/post-article-highlights.php',
        url: '/user/:username/highlights',
        component: 'table',
        template: 'default',
        children: [
          {
            path: '/templates/post-detail.php',
            url: '/user/:username/highlights/:id',
            component: 'form',
            template: 'default'
          }
        ]
      }
    ]
  }
];

核心思路是递归遍历每个节点，遇到children数组就继续递归处理子节点。下面我会给出几个最常用的递归处理场景：

1. 基础递归遍历（遍历所有节点） #

这个函数会遍历每一个节点，你可以在回调里做任何你想做的操作（比如打印节点信息、收集数据等）：

function traverseSettings(nodes, callback) {
  // 遍历当前层级的每个节点
  nodes.forEach(node => {
    // 执行传入的回调，处理当前节点
    callback(node);
    // 如果当前节点有children，递归处理子节点
    if (node.children && Array.isArray(node.children)) {
      traverseSettings(node.children, callback);
    }
  });
}

// 使用示例：打印所有节点的label和url
traverseSettings(settings, (node) => {
  console.log(`Label: ${node.label || '无标签'}, URL: ${node.url}`);
});

2. 根据条件查找特定节点 #

比如我们要根据url查找对应的节点，递归查找所有层级：

function findNodeByUrl(nodes, targetUrl) {
  for (const node of nodes) {
    // 先检查当前节点是否匹配
    if (node.url === targetUrl) {
      return node;
    }
    // 如果有子节点，递归查找子节点
    if (node.children && Array.isArray(node.children)) {
      const found = findNodeByUrl(node.children, targetUrl);
      if (found) return found;
    }
  }
  // 没找到返回null
  return null;
}

// 使用示例：查找url为'/user/:username/highlights/:id'的节点
const targetNode = findNodeByUrl(settings, '/user/:username/highlights/:id');
console.log(targetNode);

3. 修改所有节点的属性 #

比如我们要给所有节点添加一个isMenu属性，值为true：

function modifyNodes(nodes, modifier) {
  nodes.forEach(node => {
    // 执行修改函数
    modifier(node);
    // 递归处理子节点
    if (node.children && Array.isArray(node.children)) {
      modifyNodes(node.children, modifier);
    }
  });
}

// 使用示例：给所有节点添加isMenu属性
modifyNodes(settings, (node) => {
  node.isMenu = true;
});

console.log(settings);

4. 扁平化嵌套数组 #

把所有层级的节点都放到一个一维数组里：

function flattenSettings(nodes) {
  let result = [];
  nodes.forEach(node => {
    // 加入当前节点
    result.push(node);
    // 如果有子节点，递归扁平化后合并到结果数组
    if (node.children && Array.isArray(node.children)) {
      result = result.concat(flattenSettings(node.children));
      // 可选：如果不需要保留原children属性，可以删除
      // delete node.children;
    }
  });
  return result;
}

// 使用示例：扁平化数组
const flattened = flattenSettings(settings);
console.log(flattened);

这些递归函数的核心逻辑一致：先处理当前节点，再递归处理子节点。你可以根据实际需求，调整回调函数或者递归逻辑来适配不同场景。

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