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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
js实现开关灯效果
Mar 30 Javascript
JS快速实现简单计算器
Apr 08 Javascript
javascript实现多边形碰撞检测
Oct 24 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/08/30 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php微信公众号开发模式详解
2016/11/28 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python 文件重命名工具代码
2009/07/26 Python
python安装以及IDE的配置教程
2015/04/29 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
肯尼迪就职演说稿
2013/12/31 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
决心书范文
2014/03/11 职场文书
租房协议书
2014/04/10 职场文书
小学少先队工作总结2015
2015/05/26 职场文书