当前位置：网站首页>JS stack

JS stack

2022-07-28 15:56:00 【PBitW】

List of articles

Stack

Stack

Stack is also a very common data structure , And it is widely used in programs , Stacks and queues are common Restricted linear structure .
Insert picture description here

The stack structure

Insert picture description here

Stack application – Function stack

Insert picture description here
So if a function keeps recursing , Then the function will always be added to the function call stack , Then because it will never be finished , No function popup , There will be stack overflow ！

Function stack diagram

Insert picture description here

The realization of the stack – Array mode

Insert picture description here

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Stack encapsulation </title>
</head>
<body>
  <script> //  Encapsulate stack classes  function Stack(){
       //  Properties in stack  this.items = []; //  Stack related operations  // 1. Push elements onto the stack  //  It is equivalent to adding methods to each object instance （ Don't write like this ） // this.push = function(element){
       // this.item.push(element); // } // It is equivalent to giving the whole object （ class ） Added methods   Stack.prototype.push = function(element){
       this.items.push(element); } // 2. Take a look at the top of the stack element  Stack.prototype.peak = function(){
       return this.items[this.items.length -1]; } // 3. Take the elements out of the stack  Stack.prototype.pop = function(){
       return this.items.pop(); } // 4. Judge whether it is an empty stack  Stack.prototype.isEmpty = function(){
       return this.items.length == 0; } // 5. Get the number of elements in the stack  Stack.prototype.size = function(){
       return this.items.length; } // 6.toString Method  Stack.prototype.toString = function(){
       return this.items.join(""); } } //  Use of stack  let s = new Stack(); console.log(s.isEmpty()); s.push(2); s.push(5); s.push(8); s.push(10); console.log(s); console.log(s.isEmpty()); console.log(s.size()); console.log(s.toString()); s.pop(); console.log(s); console.log(s.size()); console.log(s.toString()); </script>
</body>
</html>

Details

There is a problem when printing here , The first answer printed out only 258

The problem lies in the result of manual expansion in the first step . We have always understood that ,console.log A snapshot of the current output result will be output , This understanding is indeed correct , But for performance reasons , When the browser outputs the results , For more complex data structures , These data will not be expanded , Until you manually poke the data , To get the value inside , But obviously , This is the time , The data has been followed by us for The operation in the loop has been modified , This creates a kind of “ asynchronous ” The feeling of , As a matter of fact , The whole operation is actually synchronous .

thank ： Synchronous or asynchronous ？console.log Analysis of strange phenomena

The application of the stack – Decimal to binary

Insert picture description here
The calculation process of converting decimal system to binary system ：

The calculation process is from top to bottom , But the number of conversions is from bottom to top , Isn't this the first in and last out feature of stack ？

Code

function dec2bin(decNum){
    
  let stack1 = new Stack();
  while(decNum > 0){
     //decNum be equal to 0 It's about to end 
    stack1.push(decNum % 2);
    decNum = Math.floor(decNum / 2);
  }
  let binString = "";
  while(!stack1.isEmpty()){
     //  Because I don't know stack1 The length of , So according to whether pop It's empty 
    binString += stack1.pop();
  }
  return binString;
}
console.log(dec2bin(100));