用递归及非递归方式实现树状结构的遍历函数

1、递归方法：

var tree = [
    {
      val: 1,
      children: [
        {
          val: 2,
          children: null
        },
        {
          val: 3,
          children: [
            {
              val: 4,
              children: null
            }
          ]
        },
        {
          val: 5,
          children: null
        }
      ]
    },
    {
      val: 6,
      children: [
        {
          val: 7,
          children: null
        }
      ]
    }
  ]
function travelTree(tree,arr) {
  for (let item of tree) {
     arr.push(item.val);
     if (item.children&& item.children.length) travelTree(item.children,arr);
  }
  return arr;
}
var arr=[];
travelTree(tree,arr);
console.log(arr);

递归方法：先把第一层的值push进数组，然后在判断是否有子节点，然后把子节点递归传入这个方法，重复上步。

2、非递归方法：

var tree = [
    {
      val: 1,
      children: [
        {
          val: 2,
          children: null
        },
        {
          val: 3,
          children: [
            {
              val: 4,
              children: null
            }
          ]
        },
        {
          val: 5,
          children: null
        }
      ]
    },
    {
      val: 6,
      children: [
        {
          val: 7,
          children: null
        }
      ]
    }
  ]
 // 非递归 用栈的方法
  function travelTree2(tree){
    if(!tree){
      return;
    }
    var stack=[];//放结点
    var vals=[];//放数值
    for(var i=0;i<=tree.length-1;i++){
      stack.push(tree[i]);
    }
    while(stack.length){
      var tmpTree=stack.shift();//shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
      vals.push(tmpTree.val);//向数组的结尾添加元素
      if(tmpTree.children){
        stack.unshift(...tmpTree.children);//向数组的开头添加元素 ...解构赋值
      }
    }
    return vals;
  }

  var arr2=travelTree2(tree);
  console.log(arr2);

首先定义两个数组，一个存放结点，一个存放值。把第一层的节点push进stack数组，然后把stack数组第一个数取出来并向vals数组结尾里添加值。并且判断有没有子结点，并把子数组结构为一个一个的对象放进stack数组里。

过程：

1. stack:[1,[2,[3,4],5]] [6,[7]] vals:[]
2. vals:[1]
3. stack:[2,[3,4],5] [6,[7]]
4. vals:[1,2]
5. stack:[[3,4],5] [6,[7]]
6. vals:[1,2,3]
7. stack:[[4],5] [6,[7]]
8. vals:[1,2,3,4]
9. stack:[5] [6,[7]]
10. vals:[1,2,3,4,5]
11. stack:[6,[7]]
12. vals:[1,2,3,4,5,6]
13. stack:[[7]]
14. vals:[1,2,3,4,5,6,7]
15. stack:[]