search
HomeWeb Front-endJS TutorialIntroduction to binary trees (binary heaps) in JavaScript (code examples)

Introduction to binary trees (binary heaps) in JavaScript (code examples)

Jan 08, 2019 am 10:11 AM
javascriptnode.jsdata structure

This article brings you an introduction (code example) about binary trees (binary heaps) in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Binary Tree

Binary Tree (Binary Tree) is a tree structure. Its characteristic is that each node has at most two branch nodes. A binary tree usually consists of It consists of root node, branch node and leaf node. Each branch node is often called a subtree.

Introduction to binary trees (binary heaps) in JavaScript (code examples)

  • Root node: the top node of the binary tree

  • Branch node: In addition to the root node and has leaf nodes

  • Leaf node: except itself, has no other child nodes

Common terms

In a binary tree, we often use parent nodes and child nodes to describe it. For example, 2 in the figure is the parent node of 6 and 3, and conversely 6 and 3 are the child nodes of 2

Three properties of binary trees

  1. ##On the i-th level of the binary tree, there are at most 2^i-1 nodes

  • When i=1, there is only one root node, 2^(i-1) = 2^0 = 1

  • The binary tree with depth k is at most There are 2^k-1 nodes

    • When i=2, 2^k-1 = 2^2 - 1 = 3 nodes

  • For any binary tree T, if the number of summary points is n0 and the number of nodes with degree 2 (number of subtrees is 2) is n2, then n0=n2 1

  • Three main differences between trees and binary trees

    • The number of nodes of a tree is at least 1, while the number of nodes of a binary tree can be 0

    • There is no limit to the maximum degree (number of nodes) of a node in a tree, while the maximum degree of a node in a binary tree is 2

    • There is no left or right distinction between the nodes of a tree, while the nodes of a binary tree There are left and right sides

    Binary tree classification

    Binary trees are divided into complete binary trees and full binary trees

    • Full binary tree: A binary tree with depth k and 2^k - 1 nodes is called a full binary tree

    • Complete binary tree: A complete binary tree refers to the left side of the last layer It is full, the right side may be full or not full, and the remaining levels are full. The binary tree is called a complete binary tree (a full binary tree is also a complete binary tree)

    Introduction to binary trees (binary heaps) in JavaScript (code examples)

    Array representation of binary tree

    Use an array to represent the structure of the binary tree. Fill a set of arrays into an array starting from the root node from top to bottom and from left to right. In a complete binary tree, as shown in the following figure

    Introduction to binary trees (binary heaps) in JavaScript (code examples)

    Through the above figure we can analyze that the complete binary tree represented by the array has the following properties:

    • left = index * 2 1, for example: the subscript of the root node is 0, then the value of the left node is the subscript array[0*2 1]=1

    • right = index * 2 2, for example: the subscript of the root node is 0, then the value of the right node is the subscript array[0*2 2]=2

    • Ordinal>= floor(N/2) are all leaf nodes, for example: floor(9/2) = 4, then the values ​​starting from subscript 4 are all leaf nodes

    Binary Heap

    The structure of a binary heap is represented by a complete binary tree, which is represented by an array, but a binary heap needs to meet the following properties:

    • The key value of the parent node of the binary heap is always greater than or equal to (less than or equal to) the key value of any child node

    • When the key value of the parent node is greater than or equal to ( Less than or equal to) the key value of each of its child nodes, it is called

      max heap (minimum heap)

      Introduction to binary trees (binary heaps) in JavaScript (code examples)

    As can be seen from the above picture:

    • Left picture: The parent node is always greater than or equal to its child node , so it satisfies the properties of a binary heap,

    • Right picture: Branch node 7, as the parent node of 2 and 12, does not satisfy its properties (greater than or equal to the child node).

    Main operations of binary heap

    • insert: insert node

    • delete: delete node

    • max-hepify: Adjust branch node heap properties

    • rebuildHeap: Rebuild the entire binary heap

    • sort: Sort

    Initialize a binary heap

    From the above brief introduction, we can know that the initialization of a binary heap is very simple. It’s just an array

    • Initialize an array structure

    • Save the array length

        class Heap{
            constructor(arr){
                this.data = [...arr];
                this.size = this.data.length;
            }
        }

    max-heapify maximum heap operation

    max-heapify is to convert each item that does not satisfy the maximum heap properties An operation for adjusting branch nodes.

    Introduction to binary trees (binary heaps) in JavaScript (code examples)

    As shown above:

    1. Adjust branch node 2 (branch node 2 does not meet the properties of the maximum heap )

    • By default, the branch node is the maximum value

  • Compare 2 with the left and right branches, from 2, 12, Find the maximum value in 5, and then exchange the position with 2

    • According to the binary heap properties above, get the left node and right node of branch node 2 respectively

    • Compare three nodes and get the subscript max of the maximum value

    • If the node itself is the maximum value, stop the operation

    • Exchange the max node with the parent node

  • Repeat the operation of step 2, find the maximum value from 2, 4, and 7 and exchange it with 2

    • Recursion

        maxHeapify(i) {
            let max = i;
            
            if(i >= this.size){
                return;
            }
            // 当前序号的左节点
            const l = i * 2 + 1;
            // 当前需要的右节点
            const r = i * 2 + 2;
            
            // 求当前节点与其左右节点三者中的最大值
            if(l  this.data[max]){
                max = l;
            }
            if(r  this.data[max]){
                max = r;
            }
            
            // 最终max节点是其本身,则已经满足最大堆性质,停止操作
            if(max === i) {
                return;
            }
            
            // 父节点与最大值节点做交换
            const t = this.data[i];
            this.data[i] = this.data[max];
            this.data[max] = t;
            
            // 递归向下继续执行
            return this.maxHeapify(max);
        }

    Reconstructing the heap

    We can see that the newly initialized heap Represented by an array, at this time it may not satisfy the properties of a maximum heap or a minimum heap. At this time, we may need to build the entire heap into what we want.
    We did the max-heapify operation above, and max-heapify only adjusts a certain branch node. To build the entire heap into a maximum heap, you need to perform a max-heapify operation on all branch nodes. As shown in the figure below, we need to perform max-hepify operations on the four branch nodes 12, 3, 2, and 15 in sequence

    Introduction to binary trees (binary heaps) in JavaScript (code examples)

    ##Specific steps:

    • Find all branch nodes: The properties of the heap mentioned above mentioned that the serial number of the leaf node>=Math.floor(n/2), so it is smaller than the serial number of Math.floor(n/2) These are all nodes we need to adjust.

      • For example, the array shown in the middle is [15,2,3,12,5,2,8,4,7] => Math.floor(9/2 )=4 => Those with index less than 4 are 15, 2, 3, and 12 (nodes that need to be adjusted), while 5, 2, 8, 4, and 7 are leaf nodes.

    • Perform maxHeapify operation on all found nodes

        rebuildHeap(){
            // 叶子节点
            const L = Math.floor(this.size / 2);
            for(let i = L - 1; i>=0; i--){
                this,maxHeapify(i);
            }
        }
    Maximum heap sort

    Introduction to binary trees (binary heaps) in JavaScript (code examples)

    The sorting of the largest heap, as shown in the figure above:

    • Exchange the first and last positions

    • Change the last The element is taken out from the heap, which is equivalent to the size-1 of the heap

    • Then perform a max-heapify operation on the root node of the heap

    • Repeat In the above three steps, we know that size=0 (we have already done this boundary condition in the max-heapify function)

        sort() {
            for(let i = this.size - 1; i > 0; i--){
                swap(this.data, 0, i);
                this.size--;
                this.maxHeapify(0);
            }
        }
    Insertion and deletion

    The insertion and deletion of this Deletion is relatively simple, it is the operation of inserting and deleting an array

    • Insert to the end

    • Heap length 1

    • Determine whether it is still a maximum heap after insertion

    • If not, reconstruct the heap

      insert(key) {
        this.data[this.size] = key;
        this.size++
        if (this.isHeap()) {
          return;
        }
        this.rebuildHeap();
      }
    • Delete an element in the array

    • Heap length-1

    • Determine whether it is a heap

    • If not, then reconstruct the heap

      delete(index) {
        if (index >= this.size) {
          return;
        }
        this.data.splice(index, 1);
        this.size--;
        if (this.isHeap()) {
          return;
        }
        this.rebuildHeap();
      }
    Complete code

    /**
     * 最大堆
     */
    
    function left(i) {
      return i * 2 + 1;
    }
    
    function right(i) {
      return i * 2 + 2;
    }
    
    function swap(A, i, j) {
      const t = A[i];
      A[i] = A[j];
      A[j] = t;
    }
    
    class Heap {
      constructor(arr) {
        this.data = [...arr];
        this.size = this.data.length;
      }
    
      /**
       * 重构堆
       */
      rebuildHeap() {
        const L = Math.floor(this.size / 2);
        for (let i = L - 1; i >= 0; i--) {
          this.maxHeapify(i);
        }
      }
    
      isHeap() {
        const L = Math.floor(this.size / 2);
        for (let i = L - 1; i >= 0; i++) {
          const l = this.data[left(i)] || Number.MIN_SAFE_INTEGER;
          const r = this.data[right(i)] || Number.MIN_SAFE_INTEGER;
    
          const max = Math.max(this.data[i], l, r);
    
          if (max !== this.data[i]) {
            return false;
          }
          return true;
        }
      }
    
      sort() {
        for (let i = this.size - 1; i > 0; i--) {
          swap(this.data, 0, i);
          this.size--;
          this.maxHeapify(0);
        }
      }
    
      insert(key) {
        this.data[this.size++] = key;
        if (this.isHeap()) {
          return;
        }
        this.rebuildHeap();
      }
    
      delete(index) {
        if (index >= this.size) {
          return;
        }
        this.data.splice(index, 1);
        this.size--;
        if (this.isHeap()) {
          return;
        }
        this.rebuildHeap();
      }
    
      /**
       * 堆的其他地方都满足性质
       * 唯独跟节点,重构堆性质
       * @param {*} i
       */
      maxHeapify(i) {
        let max = i;
    
        if (i >= this.size) {
          return;
        }
    
        // 求左右节点中较大的序号
        const l = left(i);
        const r = right(i);
        if (l  this.data[max]) {
          max = l;
        }
    
        if (r  this.data[max]) {
          max = r;
        }
    
        // 如果当前节点最大,已经是最大堆
        if (max === i) {
          return;
        }
    
        swap(this.data, i, max);
    
        // 递归向下继续执行
        return this.maxHeapify(max);
      }
    }
    
    module.exports = Heap;

    Summary

    The heap is over here, the heap is Binary trees are relatively simple and are often used for sorting and priority queues. The core of the heap is the max-heapify operation and the three properties of the heap.

    The above is the detailed content of Introduction to binary trees (binary heaps) in JavaScript (code examples). For more information, please follow other related articles on the PHP Chinese website!

    Statement
    This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
    Javascript Data Types : Is there any difference between Browser and NodeJs?Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AM

    JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

    JavaScript Comments: A Guide to Using // and /* */JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PM

    JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

    Python vs. JavaScript: A Comparative Analysis for DevelopersPython vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

    The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

    Python vs. JavaScript: Choosing the Right Tool for the JobPython vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

    Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

    Python and JavaScript: Understanding the Strengths of EachPython and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

    Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

    JavaScript's Core: Is It Built on C or C  ?JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

    JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

    JavaScript Applications: From Front-End to Back-EndJavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

    JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

    Python vs. JavaScript: Which Language Should You Learn?Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

    Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Article

    Hot Tools

    PhpStorm Mac version

    PhpStorm Mac version

    The latest (2018.2.1) professional PHP integrated development tool

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    VSCode Windows 64-bit Download

    VSCode Windows 64-bit Download

    A free and powerful IDE editor launched by Microsoft

    WebStorm Mac version

    WebStorm Mac version

    Useful JavaScript development tools