JavaScript实现栈结构Stack过程详解


Posted in Javascript onMarch 07, 2020

JavaScript实现栈结构(Stack)

一、前言

1.1.

什么是数据结构?

数据结构就是在计算机中,存储和组织数据的方式。

例如:图书管理,怎样摆放图书才能既能放很多书,也方便取?

主要需要考虑两个问题:

操作一:新书怎么插入?操作二:怎么找到某本指定的书?

常见的数据结构:

数组(Aarray)栈(Stack)链表(Linked List)图(Graph)散列表(Hash)队列(Queue)树(Tree)堆(Heap)

注意:数据结构与算法与语言无关,常见的编程语言都有直接或间接的使用上述常见的数据结构。

1.2.什么是算法?

算法(Algorithm)的定义

一个有限指令集,每条指令的描述不依赖于语言;接收一些输入(有些情况下不需要输入);产生输入;一定在有限步骤之后终止;

算法通俗理解:解决问题的办法/步骤逻辑。数据结构的实现,离不开算法。

二、栈结构(Stack)

2.1.简介

数组是一个线性结构,并且可以在数组的任意位置插入和删除元素。而栈和队列就是比较常见的受限的线性结构。如下图所示:

JavaScript实现栈结构Stack过程详解

栈的特点为先进后出,后进先出(LIFO:last in first out)。

程序中的栈结构:

函数调用栈:A(B(C(D()))):即A函数中调用B,B调用C,C调用D;在A执行的过程中会将A压入栈,随后B执行时B也被压入栈,函数C和D执行时也会被压入栈。所以当前栈的顺序为:A->B->C->D(栈顶);函数D执行完之后,会弹出栈被释放,弹出栈的顺序为D->C->B->A;

递归:为什么没有停止条件的递归会造成栈溢出?比如函数A为递归函数,不断地调用自己(因为函数还没有执行完,不会把函数弹出栈),不停地把相同的函数A压入栈,最后造成栈溢出(Stack Overfloat)

3.练习:

题目:

有6个元素6,5,4,3,2,1按顺序进栈,问下列哪一个不是合法的出栈顺序?

A:5 4 3 6 1 2 (√)B:4 5 3 2 1 6 (√)C:3 4 6 5 2 1 (×)D:2 3 4 1 5 6 (√)

题目所说的按顺序进栈指的不是一次性全部进栈,而是有进有出,进栈顺序为6 -> 5 -> 4 -> 3 -> 2 -> 1。

解析:

  • A答案:65进栈,5出栈,4进栈出栈,3进栈出栈,6出栈,21进栈,1出栈,2出栈(整体入栈顺序符合654321);
  • B答案:654进栈,4出栈,5出栈,3进栈出栈,2进栈出栈,1进栈出栈,6出栈(整体的入栈顺序符合654321);
  • C答案:6543进栈,3出栈,4出栈,之后应该5出栈而不是6,所以错误;
  • D答案:65432进栈,2出栈,3出栈,4出栈,1进栈出栈,5出栈,6出栈。符合入栈顺序;

栈常见的操作:

  • push(element):添加一个新元素到栈顶位置;
  • pop():移除栈顶的元素,同时返回被移除的元素;
  • peek():返回栈顶的元素,不对栈做任何修改(该方法不会移除栈顶的元素,仅仅返回它);
  • isEmpty():如果栈里没有任何元素就返回true,否则返回false;
  • size():返回栈里的元素个数。这个方法和数组的length属性类似;
  • toString():将栈结构的内容以字符串的形式返回。

2.2.封装栈类

代码实现:

// 封装栈类
  function Stack(){
   // 栈中的属性
   this.items =[]

   // 栈的相关操作
   // 1.push():将元素压入栈
   //方式一(不推荐):给对象添加方法,其他对象不能复用
   // this.push = () => {
   // }
   
   //方式二(推荐):给Stack类添加方法,能够多对象复用
   Stack.prototype.push = function(element) {
   // 利用数组item的push方法实现Stack类的pop方法
    this.items.push(element)
   }

   // 2.pop():从栈中取出元素
   Stack.prototype.pop = () => {
   // 利用数组item的pop方法实现Stack类的pop方法
    return this.items.pop()
   }

   // 3.peek():查看一下栈顶元素
   Stack.prototype.peek = () => {
    return this.items[this.items.length - 1]
   }

   // 4.isEmpty():判断栈是否为空
   Stack.prototype.isEmpty = () => {
   // 两个小时的教训啊不是this.length(不是Stack对象的length,Stack类没有length属性啊),而是      Stack类中定义的数组items才有length属性呀
    return this.items.length == 0 
   }

   // 5.size():获取栈中元素的个数
   Stack.prototype.size = () => {
    return this.items.length
   }

   // 6.toString():以字符串形式输出栈内数据
   Stack.prototype.toString = () => {
    //希望输出的形式:20 10 12 8 7
    let resultString = ''
    for (let i of this.items){
     resultString += i + ' '
    }
    return resultString
   }
  }

测试代码:

// 栈的使用
  let s = new Stack()
  s.push(20)
  s.push(10)
  s.push(100)
  s.push(77)
  console.log(s)                         //65
  console.log(s.pop());                      //68
  console.log(s.pop());                      //69
  
  console.log(s.peek());                     //71
  console.log(s.isEmpty());                    //72
  
  console.log(s.size());                     //74
  console.log(s.toString());                   //75

测试结果:

JavaScript实现栈结构Stack过程详解

栈结构的简单应用:

利用栈结构的特点封装十进至转换为二进至的函数:

//简单应用:
  //封装函数:将十进制转成二进制(十转二的运算最后倒叙取余的特点符合栈'先进后出')
  let dec2bin = decNumber => {
   //1.定义一个栈对象,保存余数
   var stack = new Stack()

   // 2.循环操作
   while(decNumber > 0){
    // 2.1.获取余数并放入栈中
    stack.push(decNumber % 2)
    // 2.2.获取整除后的结果作为下一次运算的数字(floor:向下取整)
    decNumber = Math.floor(decNumber / 2)
   }

   // 3.从栈中取出0和1
   let binaryString = '';
   let a = stack.items.length
   while(stack.items.length != 0){
    binaryString += stack.pop();
   }
   return binaryString;
  }
  
  //测试代码
  console.log(dec2bin(10));                    //103
  console.log(dec2bin(100));                   //104
  console.log(dec2bin(1000));                   //105

测试结果:

JavaScript实现栈结构Stack过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
Jquery倒计时源码分享
May 16 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
node创建Vue项目步骤详解
Mar 06 #Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 #Javascript
vue-router 路由传参用法实例分析
Mar 06 #Javascript
You might like
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python检索特定内容的文本文件实例
2018/06/05 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
12.4全国法制宣传日活动总结
2014/11/01 职场文书
幼儿园开学通知
2015/04/24 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电