如何从任意深度嵌套的对象数组中提取所有name字段值

核心逻辑是遍历每个节点时执行两个操作：

• 收集当前节点的name字段值
• 判断当前节点是否存在非空的subitems数组，存在则递归遍历子项，将子项遍历得到的结果合并到最终结果集

完整实现代码 #

/**
 * 递归获取嵌套菜单结构下所有节点的name值
 * @param {Array} menuList 菜单结构数组
 * @returns {Array} 所有name值组成的一维数组
 */
function getAllMenuNames(menuList) {
  const nameList = [];
  for (const item of menuList) {
    // 收集当前节点的name
    nameList.push(item.name);
    // 存在非空子项数组时，递归处理子项，将子项结果合并到当前结果
    if (Array.isArray(item.subitems) && item.subitems.length) {
      nameList.push(...getAllMenuNames(item.subitems));
    }
  }
  return nameList;
}

// 测试用对应数据结构
const products = [
  {
    name: 'Menu1',
    subitems: [
      {
        name: 'Menu2'
      },
    ]
  },
  {
    name: 'Menu3',
    subitems: [
      {
        name: 'Menu4',
        subitems: [
          {
            name:'Menu5'
          },
          {
            name:'Menu6'
          }
        ]
      },
    ]
  },
];

// 执行调用
console.log(getAllMenuNames(products));
// 输出: ["Menu1", "Menu2", "Menu3", "Menu4", "Menu5", "Menu6"]

简写版本 #

如果偏好更精简的函数式写法，也可以用reduce实现同样的递归逻辑：

const getAllMenuNames = (menuList) => menuList.reduce(
  (result, item) => result.concat(
    item.name,
    Array.isArray(item.subitems) && item.subitems.length ? getAllMenuNames(item.subitems) : []
  ),
  []
);

之前方法失效的原因 #

你之前尝试的flat、map、普通reduce、for...of等写法默认只会处理当前一层的数组结构，不会自动识别嵌套的subitems字段深入遍历，所以只能拿到前1-2层的name，无法触达最深层的Menu5、Menu6。只要在遍历过程中增加子项存在性判断，递归调用遍历逻辑，就可以适配任意深度的嵌套结构。

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