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 相关文章推荐
javascript中创建对象的三种常用方法
Dec 30 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
在线增减.htpasswd内的用户
2006/10/09 PHP
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python 实现aes256加密
2020/11/27 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
大学生演讲稿范文
2014/01/11 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
实习科室评语
2015/01/04 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle