JavaScript 栈的详解及实例代码


Posted in Javascript onJanuary 22, 2017

JavaScript 栈

栈是一种遵从先进后出(LIFO)原则的有序集合。

新添加或待删除的元素都保存在栈的末尾,称作栈顶,另一端就叫栈底。

在栈里,新元素都靠近栈顶,旧元素都接近栈底

昨天因为有点事没有更新,今天打算给大家讲讲JavaScript实现的数据结构

数据结构与算法是程序语言的灵魂,是解决一切编程问题的基础

以前学C/C++的时候,感觉算法还是非常重要的,但是前端涉及的并不多

不管怎样,作为技术人员,理解一些基本数据结构和算法应该是必须的

而且我们的JavaScript实现数据结构和算法更加容易

下面我们就先来看看其中一个最基本的

栈的理解

栈这种数据结构其实很好理解

JavaScript 栈的详解及实例代码

可以把它想象成一个刚好能容下书大小的小箱子

推栈/压栈就是把一本书书放在箱子中,但是只能放在箱子的最上面

弹栈/出栈就是从箱子中拿出一本书

JavaScript 栈的详解及实例代码

栈顶是箱子中最顶上的书

栈底是箱子中对低下的书

生活中栈的例子比比皆是,比如堆放盘子,子弹夹推子弹等等

这可以帮助我们更好的理解栈

栈也被用在我们编程语言的编译器和内存中保存变量、方法调用等等

栈的创建

那么现在我们来用JavaScript实现一个栈

首先我们需要考虑一种数据结构来保存栈元素,毫无疑问数组是合适的选择

然后我们要实现栈的功能,同样以装书为例

  1. 向栈顶中添加元素(向箱子了扔一本书)
  2. 移除栈顶元素(从箱子中取出一本书)
  3. 查看栈顶元素(看看箱子里最上面的书是什么)
  4. 判断栈是否为空(看看箱子里有没有书)
  5. 移除栈内全部元素(把箱子里的书全倒出来)
  6. 查看栈里元素个数(查看箱子里有几本书)

毫无疑问如果箱子里有很多书我们不能直接把箱子低下的书拿出来 所以我们不能直接操作栈底

也许我们有很多这样的箱子,有很多栈 ,所以我们最好把它声明为一个“类”,完整代码如下

function Stack() {
  var items = [];
  this.push = function (ele) {
    items.push(ele);
  };//推栈
  this.pop = function () {
    return items.pop();
  };//弹栈
  this.peek = function () {
    return items[items.length - 1];
  };//查看栈顶元素
  this.isEmpty = function () {
    return items.length === 0;
  };//判断栈是否为空
  this.size = function () {
    return items.length;
  };//栈大小
  this.clear = function () {
    items = [];
  };//清空栈
  this.print = function () {
    console.log(items.toString());
  };//打印栈
}
var stack = new Stack(); //声明栈的实例

栈的应用

下面我们就用栈解决一些问题

比如把十进制转化为二进制

要把十进制转化为二进制,可以把这个数字和2整除,直到0为止
JavaScript 栈的详解及实例代码
比如把50转化为二进制就是10010

下面是算法实现

function convertBinary(decNum) {  //十进制转换为二进制
  var remStack = new Stack(),
    rem,
    binaryStr = '';
  while(decNum) {
    rem = Math.floor(decNum % 2);
    decNum = Math.floor(decNum / 2);
    remStack.push(rem);   //余数放到栈中
  }
  while(!remStack.isEmpty()) {
    binaryStr += remStack.pop();  //利用pop把栈内元素逐一弹出,将余数拼接成为一个字符串
  }
  return binaryStr;
}
console.log(convertBinary(50));//输出10010

还可以修改这个算法,让这个函数能够把十进制转化为任何进制

function baseConverter(decNum, base) { //十进制转换为任意进制    
  var base = (base >= 2 && base <= 16) ? base : 10,
    remStack = new Stack(),
    rem,
    baseStr = '',
    digits = '0123456789ABCDEF';
  while(decNum) {
    rem = Math.floor(decNum % base);
    decNum = Math.floor(decNum / base);
    remStack.push(rem);   //余数放到栈中
  }
  while(!remStack.isEmpty()) {
    baseStr += digits[remStack.pop()]; //利用pop把栈内元素逐一弹出,将余数拼接成为一个字符串
  }
  return baseStr;
}

其实用数组也可以实现,为了练习一下栈,就用栈来实现这个算法

通过这个小应用我们可以简单理解栈

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js创建数组的简单方法
Jul 27 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
You might like
Laravel学习教程之本地化模块
2017/08/18 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
详解vue2 $watch要注意的问题
2017/09/08 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Django model序列化为json的方法示例
2018/10/16 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
医学院四年学习生活的自我评价
2013/11/06 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
员工安全生产承诺书
2014/05/22 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2014年英语工作总结
2014/12/20 职场文书
运动会1000米加油稿
2015/07/21 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis