Summary of common data structures in front end

JavaScript implementation Series for common data structures

• Stack
• Queue
• Linked list
• Collection
• Dictionary
• Hash table
• Two-fork Tree
• Figure

Front End and data structure

The data structure is a kind of refinement of the programming idea in the development, there is no about which language develops or which kind of end develops. The following is a summary of the data structure cases related to the front end of the author:

Data Structure	Case
Stack	FILO: The basis of other data structures, REDUX/KOA2 middleware mechanism
Queue	FIFO: The basis of other data structures
Linked list	Optimization of the Fiber in React 16
Collection	Set in the corresponding JavaScript
Dictionary	Map in the corresponding JavaScript
Hash table	A special dictionary that can be used to store encrypted data
Tree	DOM tree/html tree/css TREE
Figure	Not yet, but the Bfs/dfs is quite common.

The following is to increase the number of words, selected the above two-tree chapter (too few words can not be published), welcome to read the original text.

Two-fork Tree

This picture has the following concepts:

• Root node: the topmost node of a tree

• Internal node: On top of it there are other internal nodes or nodes of the leaf nodes

• Leaf node: A node at the root of a tree

• Subtree: composed of internal nodes and leaf nodes in a tree

Also this tree is a two-fork tree (up to two branches in the tree), and it is also a binary search tree (the number of the left child node is less than the parent node, the number of the right child node is greater than the parent node)

Implementation of binary search tree

function Binarysearchtree () {function Node (key) {This.key = key This.left = null This.right = null} let Roo T = NULL//Insert element//implementation idea: top-down insertion, first to determine whether the vertex is empty, the vertex is empty directly at the insertion, if not empty, by comparing the vertex key and the insertion element of the key to determine whether to insert to the left or right of the vertex, followed by a recursive this.inser t = function (key) {Const NODE = new node (key) if (root = = = null) {root = node} else {Insertnode (roo  T, node)} function Insertnode (parent, node) {if (Parent.key > Node.key) {if (parent.left = = = null) {parent.left = node} else {Insertnode (Parent.left, node)}} else if (Parent.key < Node.key) {if (parent.right = = = null) {parent.right = node} else {Insertnode (pare Nt.right, Node)}}}}//middle order traversal This.inordertraverse = function (CB) {inordertraverse (root, CB) FU Nction inordertraverse (node, CB) {if (node) {inordertraverse (Node.left, CB) CB (NODE.KEY) Inord Ertraverse (Node.right, Cb)}}}//First order traversal This.preordertraverse = function (CB) {preordertraverse (root, CB) function Preordertrave RSE (node, CB) {if (node) {CB (Node.key) Preordertraverse (Node.left, CB) Preordertraverse (NODE.R ight, CB)}}}//post-Traversal this.postordertraverse = function (CB) {postordertraverse (root, CB) function posts Ordertraverse (node, CB) {if (node) {postordertraverse (Node.left, CB) Postordertraverse (Node.right, CB  ) CB (Node.key)}}}//Max: The right side of the train of thought This.max = function () {Let Maxresult = {} function getmax (node) {if (node && node.right) {maxresult = Node.right Getmax (node.right)}} getmax (ro      OT) return Maxresult.key}//min: Thought leftmost this.min = function () {Let Minresult = {} function getmin (node) { if (node && node.left) {minresult = Node.left getmin (node.left)}} getmin (root) re Turn Minresult.key}//find specified element this.search = function (key) {Const SEARCHKEY = function (node) {if (!node) {return false} if (Key > Node.key) {return Searchkey (node.right)} else if (Key < Node.key) {return sear Chkey (Node.left)} else {return true}} return Searchkey (Root)}//Remove specified key value This.remove = f        Unction (key) {Const REMOVEKEY = function (node, key) {if (Key < Node.key) {//① If the key value is on the left side of the incoming node        Node.left = RemoveKey (Node.left, key) return node} else if (Key > Node.key) {//② If the key value is on the right of the incoming node        Node.right = RemoveKey (node.right, key) return node} else {//③ If a key value is found        if (node.left = = = NULL && Node.right = = null) {//deleted node is root node = NULL return node}        if (node.left = = = null) {//deleted nodes have a branch node = node.right return node } else if (Node.righT = = null) {node = node.left return node} const MINNODE = Findminnode (node.right)       There are two branches under the deleted node Node.key = Minnode.key Node.right = RemoveKey (Node.right, Minnode.key) return node }}//Find the smallest node const FINDMINNODE = function (node) {if (node.left) {return Findminnode (node.le FT)} else {return node}} removekey (root, key)}}var tree = new Binarysearchtree () Tree.insert (1 1) Tree.insert (7) Tree.insert (Tree.insert) (5) Tree.insert (3) Tree.insert (9) Tree.insert (8) Tree.insert (10) Tree.insert (Tree.insert) Tree.insert (+) Tree.insert () Tree.insert (+) Tree.insert (6)

Three different ways to traverse

• Mid-sequence traversal: can be used to sort binary search trees

• First-order traversal: can be used to print structured documents

• Post-post traversal: can be used to view folder directories

The implementation of the three kinds of traversal is similar, and the implementation differences can be observed in the code above.

Several cases of remove

The Remove method is a relatively complex implementation of the two-fork lookup tree. The idea is still recursive.

If the key to be deleted is on the left side of the incoming node, the RemoveKey (Node.left, key) is called recursively;

If the key to be deleted is on the right side of the incoming node, the RemoveKey (Node.right, key) is called recursively;

If the key to be removed is equal to the incoming node, there are three scenarios:

①: The deleted node is the root node

②: There is a branch under the deleted node

③: There are two branches under the deleted node

The idea here is to find the smallest node in the right branch of the current node, and then replace the node with the current node, removing the smallest node in the right branch of the current node

Test Cases

var tree = new BinarySearchTree()tree.insert(11)tree.insert(7)tree.insert(15)tree.insert(5)tree.insert(3)tree.insert(9)tree.insert(8)tree.insert(10)tree.insert(13)tree.insert(12)tree.insert(14)tree.insert(20)tree.insert(18)tree.insert(25)tree.insert(6)var cb = (key) => console.log(key)tree.inOrderTraverse(cb)   // 中序遍历: 3 5 6 7 8 9 10 11 12 13 14 15 18 20 25tree.preOrderTraverse(cb)  // 先序遍历：11 7 5 3 6 9 8 10 15 13 12 14 20 18 25tree.postOrderTraverse(cb) // 后序遍历：3 6 5 8 10 9 7 12 14 13 18 25 20 15 11tree.max() // 25tree.max() // 3tree.search(6) // truetree.search(1) // false