Data structure and algorithm JS description stack and queue

Reference

Data structure and algorithm JS description, [America] Michael McMillan, translated by Wang Qunfeng and Du Huan

Write in front

The original intention of writing this series of blogs is to help myself and beginners, lay a higher level of programming foundation and philosophy, so that everyone can have a deeper understanding of JS, and use JS to understand advanced programming ideas.

All demonstrations of algorithms for a certain data structure are not standard answers. It’s just that I have imitated various materials and other mature languages ​​based on experience. If there are any imprecise writings, or better writing, please contact me , I will correct it.

I wanted to implement these data structures in the form of constructors, but since the technology is being updated, it may be better to use the new syntax. So all code implementations are ES6+ code.

1. What is a stack and what is a queue

1. Stack

• The stack is a place where data is temporarily stored and is a dynamic memory area
• The stack is a special linear table that can only be inserted and deleted at one end
• The stack stores data according to the first-in-last-out principle. The first data is pushed into the bottom of the stack, and the last data is on the top of the stack.
• The stack has a memory function, and there is no need to change the pointer at the bottom of the stack when inserting and deleting the stack
• When data needs to be read, data is popped from the top of the stack, and the last data is read out first
• So the stack is called a last-in first-out data structure (LIFO, Last-In-First-Out)
• One end that allows insert and delete operations is called the top of the stack (top), and the other end is the bottom of the stack (bottom)
• The bottom of the stack is fixed, while the top of the stack is floating
• Insertion is generally called push (PUSH), and deletion is called pop (POP)
• When the number of elements in the stack is zero, it is called an empty stack

In the process of front-end development, we rarely encounter a batch of data that needs to be managed by the data structure of the stack, so the concept of the stack is relatively weak. In fact, there is a very vivid example of the stack, which is recursion. The calling and execution of functions are all in the stack, and closures are also related to the stack.

The stack plays a pivotal role in the operation of the program. The most important thing is that the stack saves the maintenance information needed for a function call, which is often called a stack frame or activity record. The stack frame generally contains two important pieces of information,The return address and parameters of the function and temporary variables: including non-static local variables of the function and other temporary variables automatically generated by the compiler.

Here I found a very specific example of the JS function execution stack, thanks to the author for sharing, I sincerely suggest that everyone take a look, the author writes very well.

Overview of the stack

2. Queue

• The queue and the stack are both a restricted linear data structure
• The queue only allows delete operations at the front end of the list and insert operations at the back end of the table
• The end that performs the insert operation becomes the end of the line, and the end that performs the delete operation becomes the head of the line
• Inserting a queue element into the queue becomes enqueue, and deleting an element is called dequeue
• The element that enters the queue the earliest leaves the queue, so the queue is called a FIFO (First-In-First-Out)
• When there is no element in the queue, it becomes an empty queue

Compared with the stack, we may be more familiar with the data structure of the queue, but it is not commonly used. Here is a queue-related example, which is the traditional snake game. Anyone who has written this game should know. The basic logic of the snake moving on the background is to add new elements to the head and delete old elements from the tail.

Overview of the queue

In fact, after the concept is clear, the code implementation is very simple. However, due to the characteristics of the JS language, if the code we write is executed in accordance with our regulations, it can reflect this conceptuality, but if it is operated at will, the conceptuality is not so strong, just like a class. Abstract classgetter with setter same.

Second, use JS to implement the stack and its basic algorithms

1. The basic algorithm that the stack needs to implement

• top attribute, keep the position of the top of the stack, when you want to do an operation in the stack, find the position of the top of the stack through top and do the operation
• push method, add a new element from the top of the stack to the stack (into the stack)
• pop method, remove elements from the top of the stack (pop out)
• The peek method reads the element on the top of the stack. In fact, you can get the element on the top of the stack while popping, but it will definitely be deleted. Sometimes you don’t need to delete it. I just want to read the element on the top of the stack.
• clear method, empty the stack

2. Code

class Stack {
  top = 0; // The position of the top of the stack
  data = []; // data source

  push(el) {
    this.data[this.top] = el;
    this.top++;

    // Shorthand: this.data[this.top++] = el;
  }

  pop() {
    const lastEl = this.data[this.top - 1];
    this.data[--this.top] = null;
    return lastEl;
  }

  peek() {
    return this.data[this.top - 1];
  }

  clear() {
    this.data = [];
    this.top = 0;
  }
}

Third, use JS to implement the queue and its basic algorithm

1. The basic algorithm that the queue needs to implement

• front attribute, the position of the head of the team
• end attribute, the position of the end of the team
• first method, read the element at the head of the team
• last method, read the element at the end of the queue
• shift method, remove an element from the head of the team
• push method, add an element to the end of the team

2. Code

class Queue {
  front = 0; // The position of the head of the team
  end = 1; // position at the end of the team
  data = [45, 67, 89, 90]; // data source

  push(el) {
    this.data[this.end++] = el;
  }

  shift() {
    const firstEl = this.data[this.front];
    this.data[this.front++] = null;
    return firstEl;
  }

  first() {
    return this.data[this.front];
  }

  last() {
    return this.data[this.end - 1];
  }

  clear() {
    this.data = [];
    this.front = 0;
    this.end = 1;
  }
}

The code is too simple, so I did not write comments, but it is important that we use these codes to understand the data structure of stacks and queues.

Scan the code to receive a free study place for the web front-end live class, or enter the front-end technology exchange group

Links to other articles:
Analysis and code implementation of common JS algorithms
Vue uses addRoutes to dynamically create routes, and retain the complete demo of dynamic routing after the page is refreshed
React scaffolding (5) Props and PropTypes check type
Vue data two-way response mechanism
Vue-cli request proxy configuration, package Axios and request interceptor and response interceptor
Vue-cli + Element-UI uses recursion to dynamically generate a menu bar