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 事件对象的实现
Jul 13 Javascript
JqGrid web打印实现代码
May 31 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
js实现网页收藏功能
Dec 17 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python实现扫雷游戏
2020/03/03 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
怎样自定义一个异常类
2016/09/27 面试题
行政人事岗位职责
2014/03/17 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2014年司机工作总结
2014/11/21 职场文书
神农溪导游词
2015/02/11 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers