The soft underside of the front end

When it comes to the front end, all people think about is layout, presenting data, styling and so on. But where does the data come from? From the back end to the back end. What about the structure of the data? Use whatever you want on the back end.

That’s the soft spot on the front end. In our business, we don’t need to know much about data structures. Data structures and algorithms are the foundation of a programmer. Whether it is front-end development or back-end development, or AI machine learning big data, I think it requires certain knowledge of data structure and algorithm (except front-end, the rest is a strong need…). What are the benefits of learning data structures at the front end? Change the way you think, get a deeper understanding of some of the processes js executes, and unconsciously consider code-level performance optimization in your code. A lot of things. Let’s get started.

What is a data structure?

Data structures are the way computers store and organize data. A data structure is a collection of data elements that have one or more specific relationships with each other. (From Baidu Encyclopedia)

What do I mean by computer storage? It’s what we call a storage structure.

How do you organize your data in relation to specific relationships? That’s our logical structure.

A collection of data combined by a certain storage structure and logical structure is data structure.

This is my understanding. So when I have a data structure in front of me, I think about what form it’s stored in, what particular logic it’s put together. What are the benefits of this approach? And by the time I understand that, I have a basic understanding of the data structure.

First of all, let’s talk about a linear table. A linear table is a logical structure of data, and there is a one-to-one relationship between elements. In a linear table, there is only one element before or after any element, and there will not be multiple elements before or after any element.

Linear tables are divided into general linear tables, and limited linear tables. A general linear list is like an array. Is the most common general linear table, and constrained linear tables are stacks and queues.

All right, all right, let’s get down to business

Hello amazing stack structure

What is the most important feature of stack structure? In and out, the elements that enter first leave the container later than those that enter later, like a stack of books. You can take the top of the book. (If you topple a book, that means you’re smart.)

So it was a natural idea to implement a stack structure

Container: Array

Methods: The array push and pop methods begin by implementing a stack constructor

function Stack() {/ /letCreate a private container that cannot be selected to the dataStore using this;letdataStore = []; // Simulate the push method this.push =function(element){ dataStore.push(element); }; // Simulate the method of unstacking. The return value is the element of unstacking. this.pop =function() {returndataStore.pop(); }; // Return the top element this.peek =function() {returndataStore[dataStore.length-1]; }; // whether the stack isEmpty this.isempty =function() {returndataStore.length === 0 }; // Get the stack structure length. this.size =function() {returndataStore.length; }; // Clear all elements in the stack structure. this.clear =function(){ dataStore = []; }}Copy the code

Okay, so we’ve already written the constructor for the buddy stack.

// A separate stack is generated.let stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(5);
stack.peek(); // return 5
stack.size(); // return 3
stack.clear();
stack.peek(); // undefined
Copy the code

A basic stack structure is implemented. It’s really easy. But what does this thing do in JS?

Use in JS

It’s very useful. First of all, we all know that recursion will overflow the stack if you don’t set a boundary. What do you mean?? When our JAVASCRIPT code executes, it generates a call stack (full of all the functions in execution).

Once unstacked, execution is handed back to the function that contains it.

Three scenarios of the stack

1: How does recursion work?

When we do not consider recursive exit, simplify the functionfunction fn() {leta = 1; Fn ()} fn() // error ！！！！ Maximum Call stack size exceeded // The Maximum call stack size exceededCopy the code

When I do not set the exit, no function will be out of the stack, after repeated calls, your stack will not be infinite, so you have to remind you of the stack overflow, the program error.

2: Do you know redux’s model onion diagram?

The so-called Onion model of Redux (I have never used Redux, but I heard a share of the onion model in the company share), you can also understand the next function of the write interface of the Express framework.

function fn1(){
    console.log('fn1 first');
    fn2()
    console.log('fn1 last');
}
function fn2(){
    console.log('fn2 first');
    fn3()
    console.log('fn2 last');
}
function fn3(){
    console.log('fn3 first');
    console.log('fn3 last');
}
fn1()
Copy the code

3: Closures you’ll forget if you don’t say them

Why does using too many closures lead to application stalling and poor performance?

This is a very confusing question, but I think it helps to explain a wave of closure private variables when we look at the call stack. After a function is executed, it must be unstacked as soon as it completes execution.

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  returnB; } var C = A(); C(); // 1 C(); // 2 C(); / / 3Copy the code

I’m sorry I broke my promise, but let’s go back to the last wave of code for your understanding.

In the execution of function A, we found that in the process of execution, when we encountered function B, it started to call the stack execution, after the execution, the control returned to function A, and then returned function B out. Keep a reference to the count variable in B, and you return it ？？？？ All right, you can do it if you want.

B functions are pushed out into the outside world; Assign B to C, and C needs the count variable, so count can’t leave memory (i.e. can’t be garbage collected); Take? It’s time for me to leave when function A is finished (the variables inside the function are recycled after the function is finished). Sorry, there’s a function out there that has a reference to you, so don’t unstack it, you’re not allowed to leave the call stack, because you want to preserve the environment of the count variable.

Well, in each of these cases there are several functions that can’t be unstacked, and the call stack just keeps piling up. You’re going to get more and more catons. A bus, our passengers arrived at the station to get off, but there are always a few passengers do not get off, more and more people on the car, the car is more and more heavy, well run more and more slowly.

It’s time to wrap things up

When I do not understand the stack, IT is hard for me to think about the above situations. Data structure is really changing my way of thinking, and all knowledge points are verified and consolidated in these foundations. I think data structure should not be a plus of the front end, but a comparison. And finally, I’ll end with a classic quote that I’ve heard

We write code not to communicate better with humans, but to communicate better with machines

Finally make an advertisement (we maintain the learning public account)

The official account is mainly aimed at junior/fresh graduates. The content includes the pits we stepped in when we changed from college graduates to career development, as well as our weekly learning plan and learning summary. The content will involve computer network, algorithm and other basics; Will also involve the front end, background, Android and other content ~

Other posts from our gay friends group:

Android Gay Friends

Java Gay Friends