树状结构和扁平结构的相互转换（js, javascript,dfs,bfs)）

1. 树状结构转换成扁平结构

有如下树状结构

  let list = [
  {
    id: '1',
    pid: '0',
    children: [
      {
        id: '1-1',
        pid: '1',
        children: [
          {
            id: '1-1-1',
            pid: '1-1'
          }
        ]
      },
      {
        id: '1-2'
      }
    ]
  },
  {
    id: '2',
    pid: '0',
    children: [
      {
        id: '2-1',
        pid: '2'
      },
      {
        id: '2-2',
        pid: '2'
      }
    ]
  }
]

实现效果

image.png

image.png

使用dfs遍历

递归

function flap2(arr) {
  let temp = []

  arr.forEach(item => {
    temp.push(item)
    if (item.children) {
      temp = temp.concat(flap(item.children))
    }
  })
  return temp
}

非递归

// 用栈实现
function flap3(arr) {
  let stack = []
  let newArr = []   // 扁平结构的数组

  for (let i = arr.length - 1; i >= 0; i--) {  // 倒序遍历数组，push到栈中
    stack.push(arr[i])
  }

  while (stack.length) {
    let item = stack.pop()
    newArr.push(item)

    if (item.children) {
      let children = item.children
      for (let i = children.length - 1; i >= 0; i--) {
        stack.push(children[i])
      }
    }
  }
  return newArr
}

使用bfs遍历

层序遍历

// 使用队列来实现
function flap1(arr) {
  let queue = []

  let newArr = []

  queue = arr
  while (queue.length) {
    let temp = queue.shift()
    newArr.push(temp)

    if (temp.children) {
      let children = temp.children
      children.forEach(item => {
        queue.push(item)
      })
    }
  }
  return newArr
}

2. 扁平结构转化为树状结构

例如有如下代码

var arr = [
  {
    id: '1',
    pid: '0'
  },
  {
    id: '1-1',
    pid: '1'
  },
  {
    id: '1-2',
    pid: '1'
  },
  {
    id: '1-1-1',
    pid: '1-1'
  },
  {
    id: '2',
    pid: '0'
  },
  {
    id: '2-1',
    pid: '2'
  }
]

递归实现

// 可以添加leve，用来计算层次
// 其主要代码就是传入的 parentId === item.pid
function getTree(arr, parent) {
  let temp = arr.slice()
  let newArr = []

  temp.forEach(item => {
    if (item.pid === parent) {
      let obj = {}
      obj.id = item.id
      obj.pid = item.pid  // 这一块可以写一个深拷贝
      
      obj.children = getTree(temp, item.id)
      newArr = newArr.concat(obj)
    }
  })
  return newArr
}

实现效果

image.png

image.png