Detailed description of the JavaScript Tree Structure

Everyone must be familiar with the data structure "Tree". In this article, let's review the binary tree and tree in the data structure and use JavaScript to implement them. Next let's take a look at the small series. I think everyone is familiar with the data structure "Tree". Today, let's review the Binary Trees and trees in the data structure and use JavaScript to implement them.

Ps: the tree structure is embodied in the front end in many places, such as virtual DOM of Vue and bubble.

Binary Tree

-- Concept --

A binary tree is a tree structure. It features that each node has at most two Subtrees (that is, a node with a degree of no presence greater than 2 in a binary tree, the subtree of a binary tree can be left or right, and its order cannot be reversed.

The following is a binary tree (note: the binary tree is used as an example in the following example ):

Now that we have learned about Binary Trees and traversal methods, let's use JavaScrip to implement them. Of course, we use a chain storage structure.

First, create a binary tree node using JavaScript constructor, as shown below:

Function TreeNode () {this. data = null; // data of this node this. lchild = null; // left subtree this. rchild = null; // right subtree };

Then, we can build a binary tree by traversing the binary tree algorithm, as shown below, using the first sequence to create a binary tree method:

/** Method: Create a binary tree using the first sequence * @ params: nodeList (Array)-Tree node, store the binary tree in the first sequence in the Array, and null indicates an empty node */TreeNode. createBiTree = function (nodeList) {var I = 0; return (function getNode () {var node = null, val = nodeList [I ++]; if (! Val) {node = null;} else {node = new TreeNode (); node. data = val; node. lchild = getNode (); node. rchild = getNode () ;}return node ;})();};

Finally, traverse a binary tree, including PreOrderTraverse, InOrderTraverse, and PostOrderTraverse:

TreeNode.prototype = { constructor: TreeNode, _PreOrderTraverse: function(node){  if(node){   console.log(node.data);   this._PreOrderTraverse(node.lchild);   this._PreOrderTraverse(node.rchild);  } }, PreOrderTraverse: function(){  console.log('PreOrder:');  this._PreOrderTraverse(this); }, _InOrderTraverse: function(node){  if(node){   this._InOrderTraverse(node.lchild);   console.log(node.data);   this._InOrderTraverse(node.rchild);  } }, InOrderTraverse: function(){  console.log('InOrder:');  this._InOrderTraverse(this); }, _PostOrderTraverse: function(node){  if(node){   this._PostOrderTraverse(node.lchild);   this._PostOrderTraverse(node.rchild);   console.log(node.data);  } }, PostOrderTraverse: function(){  console.log('PostOrder:');  this._PostOrderTraverse(this); }};

Let's test the preceding Binary Tree example:

var treeNode = null, nodeList = ['A', 'B', 'C', null, null, 'D', 'E', null, 'G', null, null, 'F', null, null, null];//getting a binary tree from nodeListtreeNode = TreeNode.createBiTree(nodeList);//traversing the tree of treeNodetreeNode.PreOrderTraverse();//ABCDEGFtreeNode.InOrderTraverse();//CBEGDFAtreeNode.PostOrderTraverse();//CGEFDBA

Tree

-- Concept --

A tree is a finite set of n (n> = 0) nodes. In any non-empty tree, there is only one specific root node. When n> 1, the other nodes can be divided into m (m> 0) A finite set that does not conflict with each other. Each set itself is a tree called the root subtree. Of course, Binary Trees must belong to trees.

The following is a tree (Note: for example, the tree below is used as an example ):

Now that we know about the tree and the Traversal method, let's use JavaScrip to implement it. Of course, the chain storage structure is also used.

First, create a tree node using JavaScript, as shown below:

/** @ Params: data -- node data children -- all children nodes */function TreeNode (data, children) {if (! (This instanceof TreeNode) {return new TreeNode (data, children);} this. data = data | null; this. children = children | [];};

Based on the above TreeNode constructor, we can represent the tree in the example as follows:

var treeNode = TreeNode('A', [       TreeNode('B', [TreeNode('E')]),       TreeNode('C'),       TreeNode('D')     ]);

The next step is to write the traversal tree method, namely, root traversal and hierarchical traversal, as shown below:

TreeNode. prototype = {constructor: TreeNode, _ traverseAsDFS: function (node) {// first traverse var self = this; if (node) {console. log (node. data); node. children. forEach (function (child) {if (child. children. length) {self. _ traverseAsDFS (child);} else {console. log (child. data) ;}}) ;}}, traverseAsDFS: function () {console. log ('dest_first search'); this. _ traverseAsDFS (this) ;}, traverseAsBFS: function () {// traverse var queue by hierarchy = []; console. log ('breadth _ First search'); console. log (this. data); if (this. children. length) {queue. push (this);} while (queue. length) {let tempNode = queue. shift (); tempNode. children. forEach (function (child) {console. log (child. data); if (child. children. length) {queue. push (child );}});}}};

Let's test the preceding Binary Tree example:

var treeNode = TreeNode('A', [       TreeNode('B', [TreeNode('E')]),       TreeNode('C'),       TreeNode('D')     ]);treeNode.traverseAsDFS();//ABECDtreeNode.traverseAsBFS();//ABCDE

For all the above Code, see github.

The above is all the content of this article. I hope the content of this article will help you in your study or work. At the same time, I also hope to support PHP.

For more details about the JavaScript tree structure, refer to the Chinese PHP website!