js实现将扁平结构转为树状结构

这是我参与8月更文挑战的第1天

实现方式采用数组reduce方法

定义函数

const data = [{
  name: '文本1',
  parent: null,
  id: 1,
}, {
  name: '文本2',
  id: 2,
  parent: 1
}, {
  name: '文本3',
  parent: 2,
  id: 3,
}, {
  name: '文本4',
  parent: null,
  id: 4,
}]
const flatToTree = (data) => {
  return data.reduce(reducer, [])
}

定义reducer函数

const reducer = (prev, current) => {
  //定义children属性
  current.children = []
  //通过findTarget方法判断当前数据（current）是否是目标数据（target）的子节点
  const target = findTarget(prev, current)
  //删除父节点
  delete current.parent
  if (target) {
    target.children.push(current)
    return prev
  }
  prev.push(current)
  return prev
}

定义findTarget函数

const findTarget = (data, current) => {
  let {
    parent
  } = current
  for (let index = 0; index < data.length; index++) {
    if (data[index].id == parent) {
      return data[index]
    }
    if (data[index].children.length) {
      if (findTarget(data[index].children, current)) {
        return findTarget(data[index].children, current)
      }
    }
  }
  return null
}

获取树状结构

const result = flatToTree(data)