JavaScript如何基于parent属性将线性分类数组转换为嵌套层级结构

实现思路 #

• 先通过一次遍历建立分类名称到分类对象的映射，避免后续反复循环查找父分类，时间复杂度控制在O(n)
• 第二次遍历所有分类，根据parent_name字段关联父分类：存在有效父分类就将当前分类推入父分类的children数组，不存在则作为一级分类存入结果数组
• 原生实现不限制嵌套层级，可直接适配多级分类需求，也可以根据你的需求限制最多两级嵌套

完整实现代码 #

function buildNestedCategories(categories) {
  const categoryMap = {};
  const nestedResult = [];

  // 初始化分类映射，提前加好children字段
  categories.forEach(item => {
    categoryMap[item.name] = { ...item, children: [] };
  });

  // 组装层级关系
  categories.forEach(item => {
    const currentItem = categoryMap[item.name];
    const parentName = item.parent_name;
    if (parentName && categoryMap[parentName]) {
      categoryMap[parentName].children.push(currentItem);
    } else {
      nestedResult.push(currentItem);
    }
  });

  return nestedResult;
}

// 测试调用
var categories = [
    { 
      name: 'Books', 
      slug: 'books',
      parent_name: null,
    },
    { 
      name: 'Fiction', 
      slug: 'books/fiction',
      parent_name: 'Books'
    },
    { 
      name: 'Romance fiction', 
      slug: 'books/fiction/romance',
      parent_name: 'Fiction'
    },
    { 
      name: 'Bags', 
      slug: 'bags',
      parent_name: null
    }
];

const nestedCategories = buildNestedCategories(categories);
// 输出结果和你期望的结构完全一致
console.log(nestedCategories);

最多两级嵌套的改造版本 #

如果你确定只需要两级下拉菜单，可以直接用下面的版本，自动过滤三级及更深的分类：

function buildTwoLevelCategories(categories) {
  const categoryMap = {};
  const result = [];

  categories.forEach(item => {
    categoryMap[item.name] = { ...item };
  });

  categories.forEach(item => {
    const currentItem = categoryMap[item.name];
    const parentName = item.parent_name;
    if (parentName && categoryMap[parentName]) {
      // 仅父分类为一级分类时，才关联为二级分类
      if (!categoryMap[parentName].parent_name) {
        categoryMap[parentName].children = categoryMap[parentName].children || [];
        categoryMap[parentName].children.push(currentItem);
      }
    } else {
      result.push(currentItem);
    }
  });
  return result;
}

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