广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现栈结构详细过程
  • 161
分享到

JavaScript实现栈结构详细过程

2024-04-02 19:04:59 161人浏览 泡泡鱼
摘要

目录一、认识栈结构二、栈结构封装三、十进制转化为二进制一、认识栈结构 我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必须

一、认识栈结构

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

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

其结构图如下所示:

生活中类似于栈的

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

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

二、栈结构封装

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


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());

输出结果为:

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

三、十进制转化为二进制

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

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

如下图所示:

具体代码为:


 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实现栈结构内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript实现栈结构详细过程

本文链接: https://www.lsjlt.com/news/159181.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现栈结构详细过程
    目录一、认识栈结构二、栈结构封装三、十进制转化为二进制一、认识栈结构 我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必须...
    99+
    2022-11-12
  • JavaScript如何实现栈结构
    小编给大家分享一下JavaScript如何实现栈结构,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、认识栈结构我们知道数组是一种常见的数据结构,并且可以在数组的任意位置插入和删除数据,但是有时候,我们为了实现某些功能,必...
    99+
    2023-06-21
  • JavaScript实现队列结构过程
    目录一、认识队列二、封装队列三、击鼓传花案列一、认识队列 前面的博客已经讲了受限的数据结构—栈,现在,我们再来看看队列(Queue)。 它是受限的线性表,先进先出(FIF...
    99+
    2022-11-12
  • JavaScript中怎么实现一个栈结构
    JavaScript中怎么实现一个栈结构,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1.1.什么是数据结构数据结构就是在计算...
    99+
    2022-10-19
  • Java使用跳转结构实现队列和栈流程详解
    目录导读队列跳转结构结点实现队列测试队列栈实现栈测试代码导读 在数据结构当中所有的数据结构都是由 连续数据结构或者跳转数据结构 单独或者拼接做成。 连续结构和跳转结构是数据结构中常见...
    99+
    2023-05-15
    Java跳转结构实现队列 Java跳转结构实现栈
  • Javascript数据结构之栈和队列怎么实现
    本篇内容主要讲解“Javascript数据结构之栈和队列怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Javascript数据结构之栈和队列怎么实现”吧!栈(stack)栈是一种具有 「...
    99+
    2023-06-30
  • Golang实现数据结构Stack(堆栈)的示例详解
    目录前言介绍StackStackPushPopPeekLen & Cap & ClearNewStack使用前言 始于此篇,为了学习 Golang 基础,采用了使用 ...
    99+
    2023-05-15
    Golang实现数据结构Stack Golang Stack Golang 堆栈
  • Android Mouse实现过程详细笔记
    简单的做点笔记 ,省得以后忘记了~~ 1、emulator模拟器实际上是一个基于qemu的arm环境模拟器,其源码在external/qemu里面,编译出来的目录在/host/...
    99+
    2022-06-06
    mouse Android
  • Cordova插件实现JavaScript与Java的通信的详细过程
    背景 Cordova平台是开源的跨平台开发框架,被广泛应用于移动应用开发领域,可以开发跨安卓、iOS等系统的应用。Cordova平台是基于HTML/JavaScript语言,它是如何...
    99+
    2022-11-12
  • Golang使用gob实现结构体的序列化过程详解
    目录Gob简介单个对象序列化列表数据序列化简单编码示例编码在TCP连接中使用Golang有自己的序列化格式,称为gob。使用gob可以对结构进行编码和解码。你可以使用其他格式,如JS...
    99+
    2023-03-08
    Golang序列化结构体 Golang gob序列化
  • PyTorch实现线性回归详细过程
    目录一、实现步骤1、准备数据2、设计模型3、构造损失函数和优化器4、训练过程5、结果展示二、参考文献一、实现步骤 1、准备数据 x_data = torch.tensor([[1.0...
    99+
    2022-11-13
  • Pytorch结合PyG实现MLP过程详解
    目录导入库和数据定义模型结构定义训练函数定义测试函数训练模型并评估训练结果导入库和数据 首先,我们需要导入PyTorch和PyG库,然后准备好我们的数据。例如,我们可以使用以下方式生...
    99+
    2023-05-17
    Pytorch PyG实现MLP Pytorch PyG
  • python 实现syslog 服务器的详细过程
    交换机等网络设备基本上都支持将本地日志通过syslog 协议传输到后端服务器上集中查看和存储,毕竟这类设备的存储容量也有限。操作系统也是支持syslog协议的。从网上看日志集中管理很...
    99+
    2022-11-11
  • Django3基于WebSocket实现WebShell的详细过程
    前言 最近工作中需要开发前端操作远程虚拟机的功能,简称WebShell. 基于当前的技术栈为react+django,调研了一会发现大部分的后端实现都是django+channels...
    99+
    2022-11-12
  • 使用Pytorch+PyG实现MLP的详细过程
    目录我的项目环境:一、导入相关库二、加载Cora数据集三、定义MLP网络四、定义模型五、模型训练六、模型验证七、结果总结我的项目环境: 平台:Windows10语言环境:python...
    99+
    2023-03-03
    pytorch mlp分类模型 pytorch pyg
  • Python实现随机漫步的详细过程
    目录1.  创建 RandomWalk 类2.  选择方向 3.  绘制随机漫步图 4.  总结 本篇...
    99+
    2023-03-07
    python随机漫步图 python随机漫步的原理 Python 随机
  • Java实现License许可证控制(详细过程)
    实现license控制需要准备: 1.密钥对 2.生成许可证 3.将配置代码配置到给客户部署的项目中 第一步:我们可以通过Jdk(建议jdk1.8)自带的keytool工具生成,在命令行(win+r输入cmd)输入以下命令: #生成命令ke...
    99+
    2023-09-11
    java 后端
  • springboot+thymeleaf+mybatis实现甘特图的详细过程
    首先我们要明白:这个甘特图需要哪些动态数据。 (1)需要:ID,tName,number,计划开始时间,开始时间,计划结束时间,结束时间,项目负责人,参与人,知情人ID,计划时长(可...
    99+
    2022-11-12
  • Java实现AWT四大事件的详细过程
    目录窗体事件鼠标事件所触发的事件键盘事件动作事件小结常用事件的分类 Java AWT里面的事件可以简单的分为窗体事件(WindowEvent),鼠标事件(MouseEvent),键盘...
    99+
    2022-11-13
  • JavaScript表单验证实现过程详解
    目录一. 作用二. 需求三. 实现一. 作用 如果没有表单验证,错误的数据就会发往服务端,会造成服务端压力过大; 所以在前端对数据进行过滤,以减轻服务端压力; 二. 需求 1. 当输...
    99+
    2023-01-30
    JavaScript表单验证 JS表单验证
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作