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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
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
linux下安装php的memcached客户端
2014/08/03 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python 异常处理总结
2016/10/18 Python
python 换位密码算法的实例详解
2017/07/19 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python3.8中使用f-strings调试
2019/05/22 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python中可以声明变量类型吗
2020/06/18 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
母亲追悼会答谢词
2014/01/27 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
运动会口号8字
2014/06/07 职场文书
消防宣传口号
2014/06/16 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
初级职称评定工作总结
2015/08/13 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle