美文网首页
Javascript树(一):广度遍历和深度遍历

Javascript树(一):广度遍历和深度遍历

作者: 爱吃的根号三 | 来源:发表于2017-08-11 23:20 被阅读162次

文章关键点

1. 树的建立

2. 深度遍历和广度遍历

3.callback回调函数

4. 遍历方式查找添加删除等接口

1.树的建立

一个节点有三个部分组成

  • data 存储数据
  • parent 指向的父节点
  • children 孩子节点
function Node(data){
  this.data = data;
  this.parent = null;
  this.children = [ ];
}

function Tree(node){
  var node = new Node(data);
  this._root = node;
}

var tree = new Tree('CEO'); 
// {data: 'CEO', parent: null, children: []}
tree._root;

2.(a) 深度遍历(DSF)

Tree.prototype.traverseDF = function (callback) {  
        (function recurse(currentNode) {  
            for(let i=0;i<currentNode.children.length;i++){
                recurse(currentNode.children[i]);
            }
            callback(currentNode);
        })(this._root);
    }

eg:

var tree = new Tree('one');

tree._root.children.push(new Node('two'));
tree._root.children[0].parent = tree;

tree._root.children.push(new Node('three'));
tree._root.children[1].parent = tree;

tree._root.children.push(new Node('four'));
tree._root.children[2].parent = tree;

tree._root.children[0].children.push(new Node('five'));
tree._root.children[0].children[0].parent = tree._root.children[0];

tree._root.children[0].children.push(new Node('six'));
tree._root.children[0].children[1].parent = tree._root.children[0];

tree._root.children[2].children.push(new Node('seven'));
tree._root.children[2].children[0].parent = tree._root.children[2];

/*

creates this tree

 one
 ├── two
 │   ├── five
 │   └── six
 ├── three
 └── four
     └── seven

*/

2.(b)广度遍历(利用queue)

    Tree.prototype.traverseBF = function (callback) {
        var queue = new Queue();
        queue.enqueue(this._root);
        var currentTree = queue.dequeue();
        while(currentTree){
            for(let i =0;i<currentTree.children.length;i++){
                queue.enqueue(currentTree.children[i]);
            }
            callback(currentTree);
            currentTree = queue.dequeue();
        }
      }

callback
默认为一个函数,使得在函数内能调用其它函数

tree.traverseDF(function(node) {
        console.log(node.data)
    });

    /*
     
    logs the following strings to the console
     
    'five'
    'six'
    'two'
    'three'
    'seven'
    'four'
    'one'
     
    */
  1. 遍历方式查找添加删除等接口
a.遍历方式
Tree.prototype.contains = function (callback,traversal) { 
        traversal.call(this,callback);
     }

eg:

//tree is an example of a root node
tree.contains(function(node){
  if (node.data === 'two') {
      console.log(node);
  }
}, tree.traverseBF);
b.查找
  // tree is an example of a root node
tree.contains(function(node){
    if (node.data === 'two') {
        console.log(node);
    }
}, tree.traverseBF);
c.添加
Tree.prototype.add = function(data, toData, traversal) {
  var child = new Node(data),
        parent = null,
        callback = function(node) {
          if (node.data === toData) {
            parent = node;
          }
        };

  this.contains(callback, traversal);//不要忘记回调查找

  if (parent) {
    parent.children.push(child);
    child.parent = parent;
  } else {
    throw new Error('Cannot add node to a non-existent parent.');
  }
};

eg:

var tree = new Tree('CEO');
tree.add('VP of Happiness', 'CEO', tree.traverseBF);

/*
our tree
'CEO'
└── 'VP of Happiness'
*/
d.删除
Tree.prototype.remove = function(data, fromData, traversal) {
        var tree = this,
            parent = null,
            childToRemove = null,
            index;

        var callback = function(node) {
            if (node.data === fromData) {
                parent = node;
            }
        };

        this.contains(callback, traversal);

        if (parent) {
            index = findIndex(parent.children, data);

            if (index === undefined) {
                throw new Error('Node to remove does not exist.');
            } else {
                childToRemove = parent.children.splice(index, 1);
            }
        } else {
            throw new Error('Parent does not exist.');
        }

        return childToRemove;
    };

相关文章

  • JS实现二叉树的遍历(DFS、BFS、前中后序遍历)

    对于二叉树,有深度遍历(DFS)和广度遍历(BFS),深度遍历有前序遍历、中序遍历和后序遍历三种方法,广度遍历也叫...

  • 前端常见面试题目(六)

    一、介绍下深度优先遍历和广度优先遍历,如何实现 通过用深度优先遍历和广度优先遍历对这个dom树进行查找来理解1、 ...

  • 二叉树遍历

    二叉树的遍历,分为深度优先遍历和广度优先遍历,其中深度优先遍历又分为有前序、中序、后序遍历,广度优先遍历就是按层遍...

  • Javascript树(一):广度遍历和深度遍历

    文章关键点 1. 树的建立 2. 深度遍历和广度遍历 3.callback回调函数 4. 遍历方式查找添加删除等接...

  • 5. 深度优先、广度优先

    1. 二叉树的深度优先遍历和广度优先遍历2. 深度优先搜索递归和非递归实现 深度优先(DFS):前序遍历 广度优先...

  • 二叉树遍历

    二叉树遍历可以分为广度遍历和深度遍历,深度遍历又可以分为前序遍历、后序遍历、中序遍历。对于一个二叉树,如下图: 广...

  • 多级树的深度优先遍历与广度优先遍历(Java实现)

    多级树的深度优先遍历与广度优先遍历(Java实现) 深度优先遍历与广度优先遍历其实是属于图算法的一种,多级树可以看...

  • 2018-07-20二叉树广度遍历

    树的遍历,可以广度遍历也可以深度遍历 广度遍历:一层层找 代码实现: 实现结果:

  • 二叉树遍历

    总结一下二叉树的深度遍历(DFS)和广度遍历(BFS)首先, 创建二叉树的节点: 一、深度遍历 1.1 先序遍历(...

  • 极简数据结构 - 二叉树

    二叉搜索树(只包含插入、深度遍历、广度遍历)

网友评论

      本文标题:Javascript树(一):广度遍历和深度遍历

      本文链接:https://www.haomeiwen.com/subject/mssrrxtx.html