如何用JS/Lodash遍历并修改深度未知的多维对象数组？

你遇到的问题是递归逻辑没处理好，导致只能触达第一层节点。先看看你原代码里的问题：在处理子节点时，你用forEach遍历每个child，但递归调用时却传入了整个menu.children数组，这相当于重复处理同一层的子节点，根本没深入到下一层的嵌套结构里。

下面给你两种可行的修正方案：

方案一：直接修改原数组（原地更新） #

这个方案会直接在原对象上添加subtitle属性，适合不需要保留原数据的场景：

static convertUrlsToSubTitles(treeData) {
  // 遍历当前层级的所有节点
  treeData.forEach(menu => {
    // 给当前节点添加subtitle，值和url一致
    menu.subtitle = menu.url;
    // 如果存在子节点数组，递归处理子节点
    if (menu.children && menu.children.length > 0) {
      SortableMenu.convertUrlsToSubTitles(menu.children);
    }
  });
  return treeData;
}

逻辑很直观：处理当前层的每个节点后，只要节点有子节点，就把子节点数组传入递归函数，逐层深入处理所有嵌套的节点。

方案二：返回新数组（无副作用） #

如果你不想修改原数据，希望生成一个全新的结构，可以用map来创建新对象，避免影响原数组：

static convertUrlsToSubTitles(treeData) {
  return treeData.map(menu => {
    // 创建当前节点的副本，并添加subtitle
    const updatedMenu = {
      ...menu,
      subtitle: menu.url
    };
    // 如果有子节点，递归处理后替换原children
    if (menu.children && menu.children.length > 0) {
      updatedMenu.children = SortableMenu.convertUrlsToSubTitles(menu.children);
    }
    return updatedMenu;
  });
}

这个版本会生成全新的对象和数组，原数据不会被修改，更适合需要保持数据不可变性的场景。

测试一下这两个方案，不管你的菜单嵌套多少层，每个节点都会被添加上subtitle属性，完美解决深度不确定的问题。

内容的提问来源于stack exchange，提问作者i.brod