如何将value为分隔符拼接的扁平对象数组转换为层级嵌套结构

实现思路 #

不需要依赖第三方库，也不需要复杂递归，两步即可完成转换：

• 先把所有扁平节点存到以value为键的映射表中，实现任意节点的毫秒级查找
• 遍历所有节点，把当前节点的value按-分割后去掉最后一段，拼接得到父节点的value，找到父节点后将当前节点推入父节点的children属性，找不到父节点的即为根节点

完整代码 #

// 你传入的扁平items数组
const items = [
  { "value": "10", "label": "LIMEIRA", "children": [] },
  { "value": "10-3", "label": "RECEBIMENTO", "children": [] },
  { "value": "10-3-4", "label": "GAVETEIRO", "children": [] },
  { "value": "10-3-4-A1", "label": "A1", "children": [] },
  { "value": "10-3-4-A1-N1", "label": "N1", "children": [] },
  { "value": "10-3-4-A1-N1-N2", "label": "N2", "children": [] },
  { "value": "10-4", "label": "MEZANINO", "children": [] },
  { "value": "10-4-4", "label": "GAVETEIRO", "children": [] },
  { "value": "10-4-4-B1", "label": "B1", "children": [] },
  { "value": "10-3-3", "label": "PRATELEIRA", "children": [] },
  { "value": "10-3-3-C1", "label": "C1", "children": [] },
  { "value": "10-3-3-C1-N1", "label": "N1", "children": [] },
  { "value": "11", "label": "N & C BRASIL PROCESSAMENTO DE DADOS LTDA", "children": [] },
  { "value": "11-4", "label": "MEZANINO", "children": [] },
  { "value": "11-4-4", "label": "GAVETEIRO", "children": [] },
  { "value": "11-4-4-A1", "label": "A1", "children": [] },
  { "value": "11-4-4-A1-N2", "label": "N2", "children": [] },
  { "value": "11-4-4-A1-N2-N2", "label": "N2", "children": [] },
  { "value": "10-4-4-A1", "label": "A1", "children": [] },
  { "value": "10-4-4-A1-N2", "label": "N2", "children": [] },
  { "value": "10-4-4-A1-N2-N2", "label": "N2", "children": [] },
  { "value": "11-4-4-A2", "label": "A2", "children": [] }
]

// 第一步：创建节点映射表
const nodeMap = new Map()
items.forEach(item => {
  // 深拷贝避免修改原数组，不需要改原数据的话可以直接存 item
  nodeMap.set(item.value, { ...item })
})

const rootNodes = []
// 第二步：组装树形结构
for (const [currentValue, currentNode] of nodeMap) {
  const valueSegments = currentValue.split('-')
  // 顶级节点直接入根数组
  if (valueSegments.length === 1) {
    rootNodes.push(currentNode)
    continue
  }
  // 计算父节点的value
  const parentValue = valueSegments.slice(0, -1).join('-')
  const parentNode = nodeMap.get(parentValue)
  if (parentNode) {
    parentNode.children.push(currentNode)
  } else {
    // 异常兼容：找不到父节点的节点也作为根节点返回，避免数据丢失
    rootNodes.push(currentNode)
  }
}

// 输出结果
console.log(rootNodes)

结果说明 #

最终得到的rootNodes就是完整的嵌套树形数组，你示例中的10对应节点直接取rootNodes[0]即可，层级关系完全匹配需求。

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