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 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
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
Chrome Web App开发小结
2014/09/04 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
详解Document.Cookie
2015/12/25 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python web基础之加载静态文件实例
2018/03/20 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python实现石头剪刀布游戏
2021/01/20 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
财务学生的职业生涯发展
2014/02/11 职场文书
节约用水演讲稿
2014/05/21 职场文书
村安全生产责任书
2014/08/25 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫