JavaScript实现栈结构详细过程


Posted in Javascript onDecember 06, 2021

一、认识栈结构

我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必须对这种任意性加以限制,而栈和队列就是比较常见的受限的数据结构,我们先来看看栈。
栈(stack),它是一种受限的线性表,后进先出(LIFO

  • 其限制性是允许在表的一端进行插入和删除运算。这一端被称为栈顶,相对的,把另一端,称为栈底。
  • LIFO(last in first out)表示就是后进入的元素,第一个弹出栈空间。
  • 向一个栈中插入一个新元素又称作进栈、入栈或压栈,它是把新元素放到栈顶元素的上面,使之成为新的栈顶元素;
  • 从一个栈删除元素又称作出栈或者退栈,它是把栈顶元素删除掉,使其相邻的元素成为新的栈顶元素。

其结构图如下所示:

JavaScript实现栈结构详细过程

生活中类似于栈的

例如:当我们敲代码时,如果发生错误需要删除,那么最先敲上去的是最后被删除的。

接下来我们就一起来实现一下栈结构的封装,将采用的方式是基于数组实现的。

二、栈结构封装

首先创建一个类封装栈结构,如下:

function Stack(){
            
        }

在其内部添加属性和方法,将数组通过属性的方法添加给该类。然后采用原型的方法添加常用的操作。

栈常用的操作有:

  • push(element):添加一个新元素到栈顶位置。
  • pop() :移除栈顶的元素
  • peek( ) :返回栈顶的元素,不对栈做任何修改
  • isEmpty() :判断栈是否空,如果栈里没有任何元素,则返回true,否则返回false
  • size() :返回栈里的元素个数
  • toString() :将栈结构的内容以字符形式返回

接下来,我们就来将他们一一实现:

function Stack(){
     this.items = [];
     // 添加一个新元素到栈顶位置。push()
     Stack.prototype.push = function(element){
        this.items.push(element);
     }
      // 移除栈顶的元素pop()
     Stack.prototype.pop = function(){
         return this.items.pop();
     }
     //  返回栈顶的元素,不对栈做任何修改peek()
     Stack.prototype.peek = function(){
         return this.items[this.items.length-1];
     }
     // 判断栈是否空isEmpty()
     Stack.prototype.isEmpty = function(){
         if(this.items.length == 0){
             return true;
         }else {
             return false;
         }
     }
     // 返回栈里的元素个数size()
     Stack.prototype.size = function(){
         return this.items.length;
     }
     // 将栈结构的内容以字符形式返回toString()
     Stack.prototype.toString = function(){
         var str = '';
         for(var i =0;i<this.items.length;i++){
             str += this.items[i] + ' ';
         }
         return str;
     }
 }

注意:这里为什么要通过原型的方式添加呢?是因为通过该方法添加的方法是添加在类上的,而如果直接通过this来添加,是添加到具体的实例对象上的,会造成浪费内存的情况。

最后进行验证。代码如下:

var stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);
stack.push(5);
console.log(stack);
console.log('移除的栈顶元素是:'+stack.pop());
console.log('栈顶元素为:'+stack.peek());
console.log('栈是否为空:'+stack.isEmpty());
console.log('栈里的元素个数是:'+stack.size());
console.log('栈结构的内容是:');
console.log(stack.toString());

输出结果为:

JavaScript实现栈结构详细过程

构建成功。
接下来来看一个实例!

三、十进制转化为二进制

如何实现十进制转化为二进制呢?

要把十进制转化成二进制,我们可以将该十进制数字和2整除,将得到的余数压入栈中,直到结果是0为止,最后在将得到的栈中元素依次出栈,得到最终结果,

如下图所示:

JavaScript实现栈结构详细过程

具体代码为:

function Stack(){
     this.items = [];
     //入栈
     Stack.prototype.push = function(element){
         this.items.push(element);
     }
     //出栈
     Stack.prototype.pop = function(){
         return this.items.pop();
     }
     //判断栈是否为空
     Stack.prototype.isEmpty = function(){
         if(this.items.length == 0){
             return true;
         }else{
             return false;
         }
     }
 }
 function decToBin(decNumber){
      var stack = new Stack;
      while(decNumber>0){
          //获取余数,放入栈中
          stack.push(decNumber%2);
          //获取新的除数
          decNumber = Math.floor(decNumber/2);
      }
      //获取栈顶元素
      var str = '';
      while(!stack.isEmpty()){
          str += stack.pop();
      }
      return str;
  }
 console.log('100转化成二进制是:'+decToBin(100));
 console.log('50转化成二进制是:'+decToBin(50));
 console.log('20转化成二进制是:'+decToBin(20));
 console.log('34转化成二进制是:'+decToBin(34));

输出结果为:

JavaScript实现栈结构详细过程

到此这篇关于JavaScript实现栈结构详细过程的文章就介绍到这了,更多相关JavaScript实现栈结构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
JavaScript实现优先级队列
Dec 06 #Javascript
JavaScript阻止事件冒泡的方法
Dec 06 #Javascript
JavaScript执行机制详细介绍
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
JavaScript 与 TypeScript之间的联系
JavaScript利用html5新方法操作元素类名详解
Nov 27 #Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 #Javascript
You might like
php学习 字符串课件
2008/06/15 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
扩展String功能方法
2006/09/22 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jQuery设计思想
2017/03/07 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python实现简单状态框架的方法
2015/03/19 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
值得收藏的10道python 面试题
2019/04/15 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
如何理解python中数字列表
2020/05/29 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
双创工作实施方案
2014/03/26 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
四查四看整改措施
2014/09/19 职场文书
三方股东合作协议书
2014/10/28 职场文书
小学教师教学随笔
2015/08/14 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android