js中树形结构数据的深度遍历和广度遍历

实例数据：

let tree = [
    {
      id: '1',
      children: [
        {
          id: '1-1',
          children: [
            {
              id: '1-1-1',
            },
            {
              id: '1-1-2',
            },
          ],
        },
        {
          id: '1-2',
          children: [
            {
              id: '1-2-1',
            },
            {
              id: '1-2-2',
            },
          ],
        },
      ],
    },
    {
      id: '2',
      children: [
        {
          id: '2-1',
          children: [
            {
              id: '2-1-1',
            },
            {
              id: '2-1-2',
            },
          ],
        },
        {
          id: '2-2',
          children: [
            {
              id: '2-2-1',
            },
          ],
        },
      ],
    },
    {
      id: '3',
      children: [
        {
          id: '3-1',
          children: [
            {
              id: '3-1-1',
            },
          ],
        },
        {
          id: '3-2',
          children: [
            {
              id: '3-2-1',
            },
          ],
        },
        {
          id: '3-3',
          children: [
            {
              id: '3-3-1',
            },
          ],
        },
      ],
    },
  ]

深度遍历

深度优先遍历（Depth-First-Search），是搜索算法的一种，它沿着树的深度遍历树的节点，尽可能深地搜索树的分支。 实现思路是找到一个节点后，把它的后辈都找出来；再以此类推查找。

1. 递归的方法

   const deepTree = (data, arr = []) => {
    for (let i = 0; i < data.length; i++) {
      let item = data[i]
      arr.push(item.id)
      if (item.children && item.children.length) {
        deepTree(item.children, arr)
      }
    }
    return arr
  }

2. while循环

  const deepTree2 = (data) => {
    let stack = []
    let arr = []
    stack = data
    while (stack.length) {
      let item = stack.shift()
      let children = item.children
      arr.push(item.id)
      if (children) {
        for (let i = children.length - 1; i >= 0; i--) {
          stack.unshift(children[i])
        }
      }
    }
    return arr
  }

遍历结果

广度遍历

广度优先遍历（Breadth-First-Search）从一个节点开始，尝试访问尽可能靠近它的目标节点。本质上这种遍历在、是逐层移动的，首先检查最靠近第一个节点的层，再逐渐向下移动到离起始节点最远的层。

  const widthTree = (data) => {
    let stack = []
    let arr = []
    stack = data
    while (stack.length) {
      let item = stack.shift()
      let children = item.children
      arr.push(item.id)
      if (children) {
        for (let i = 0; i < children.length; i++) {
          stack.push(children[i])
        }
      }
    }
    return arr
  }

遍历结果