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的手风琴图片展示效果实现方法
Dec 16 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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
第二节--PHP5 的对象模型
2006/11/16 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
php数组遍历类与用法示例
2019/05/24 PHP
js 学习笔记(三)
2009/12/29 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
深入理解js promise chain
2016/05/05 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Python中获取对象信息的方法
2015/04/27 Python
python类和继承用法实例
2015/07/07 Python
Python中扩展包的安装方法详解
2017/06/14 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python3实现名片管理系统
2020/11/29 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
诚信考试承诺书
2014/03/27 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
python xlwt模块的使用解析
2021/04/13 Python