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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
php常用Stream函数集介绍
2013/06/24 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python实现时钟显示效果思路详解
2018/04/11 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
如何教少儿学习Python编程
2020/07/10 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
简述安装Slackware Linux系统的过程
2012/05/08 面试题
员工薪酬福利制度
2014/01/17 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
大学生个人总结范文
2015/02/15 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书