JavaScript implementation of data structure -- tree

tree

Tree is an abstract hierarchical data model, such as the DOM tree common in the front end:

There are no trees in JavaScript, but you can simulate trees with arrays and objects.

Take virtual DOM as an example: vdom is a tree simulated by JS with arrays and objects.

vdom = {
    type: 'div',  
    props: {     
        'id': 'content'
    },
    children: [   
        {
            type: 'ul',
            props: {
                'class': 'list'
            },
            children: {
                {
                    type: 'li',
                    props: '',
                    children: ['Option one']
                }
            }
        }
    ]
}

Common operations of tree

Definition tree

	const tree = {
	    val: 'a',
	    children:[
	        {
	            val: 'b',
	            children:[
	                {
	                    val: 'c',
	                    children:[
	                        {
	                            val: 'd',
	                            children:[]
	                        }
	                    ]
	                },
	                {
	                    val: 'e',
	                    children:[]
	                }
	            ]
	        },
	        {
	            val: 'f',
	            children:[
	                {
	                    val: 'g',
	                    children:[]
	                }
	            ]
	        }
	    ]
	}

Depth first traversal

Depth first traversal is the branch of the search tree as deep as possible.

Depth first traversal is like reading a book, turning back page by page.

Depth first traversal process

  • Access the root node;
  • Then take each child node as the root node for depth traversal;

code implementation

	//Depth first traversal
	const dfs = (root) => {
	    //console.log(root.val);
	    root.children.forEach(dfs);
	}
	//Call depth first traversal
	dfs(tree);

breadth-first search

Breadth first traversal is to access the nodes as close to the root node (the top node of the tree) as possible.

Breadth first traversal is the same as reading, but he first looks at the contents of the table of contents and various chapters, and then looks through them page by page.

Breadth first traversal process

  • Create a new queue and queue the root node;
  • Take the opponent out of the team and visit;
  • Join the child nodes of the opposite end one by one;
  • Repeat the first two steps;

code implementation

	// breadth-first search 
	const bfs = (root) => {
	    const q = [root];
	    while(q.length > 0){
	        const n = q.shift();
	        //console.log(n.val);
	        n.children.forEach( child => {
	            q.push(child);
	        } )
	    }
	}
	bfs(tree);

Binary tree

A tree with at most two child nodes per node is called a binary tree.

Common operations of binary tree

Define binary tree

	//Define binary tree
	const bt = {
	    val: 1,
	    left:{
	        val: 2,
	        left:{
	            val: 4,
	            left:null,
	            right:null
	        },
	        right:{
	            val: 5,
	            left:null,
	            right:null
	        }
	    },
	    right:{
	        val: 3,
	        left:{
	            val: 6,
	            left:null,
	            right:null
	        },
	        right:{
	            val: 7,
	            left:null,
	            right:null
	        }
	    }
	}

Preorder traversal

Preorder traversal process

Root = > left = > right

  • Access the root node;
  • Pre order traversal of the left subtree of the root node;
  • Pre order traversal of the right subtree of the root node;

code implementation

Recursive preorder traversal:

	//Preorder traversal
	const preorder = (root) => {
	    if(!root){
	        return ;
	    }
	    console.log(root.val);
	    preorder(root.left);
	    preorder(root.right);
	}
	
	preorder(bt);

Realize preorder traversal with stack:

const preorder = (root) => {
    if(!root)return ;
    const stack = [root];
    while(stack.length){
        const n = stack.pop();
        console.log(n.val);
        if(n.right)stack.push(n.right);
        if(n.left)stack.push(n.left);
    }
}

preorder(bt);

Medium order traversal

Middle order traversal process

Left = > root = > right

  • Pre order traversal of the left subtree of the root node;
  • Access the root node;
  • Pre order traversal of the right subtree of the root node;

code implementation

Using recursion to realize medium order traversal:

const inorder = (root) => {
    if(!root){
        return ;
    }
    inorder(root.left);
    console.log(root.val);
    inorder(root.right);
}

inorder(bt);

To realize middle order traversal with stack:

	const inorder = (root) => {
	    if(!root){
	        return ;
	    }
	    const stack = [];
	    let p = root;
	    while(stack.length || p){
	        while(p){
	            stack.push(p);
	            p = p.left;
	        }
	        const n = stack.pop();
	        console.log(n.val);
	        p = n.right;
	    }
	}
	
	inorder(bt);

Postorder traversal

Postorder traversal process

Left = > right = > root

  • Pre order traversal of the left subtree of the root node;

  • Pre order traversal of the right subtree of the root node;

  • Access the root node;

code implementation

Recursive post order traversal:

const postorder = (root) => {
    if(!root){
        return ;
    }
    postorder(root.left);
    postorder(root.right);
    console.log(root.val);
}

postorder(bt);

Post order traversal with stack:

	const postorder = (root) => {
	    if(!root){
	        return ;
	    }
	    const outputstack = [];
	    const stack = [root];
	    while(stack.length){
	        const n = stack.pop();
	        outputstack.push(n);
	        if(n.left) stack.push(n.left);
	        if(n.right) stack.push(n.right);
	    }
	    while(outputstack.length){
	        const n = outputstack.pop();
	        console.log(n.val);
	    }
	}
	
	postorder(bt);

Tags: Javascript data structure

Posted on Wed, 01 Sep 2021 15:14:54 -0400 by irishgirl2004