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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
angular.element方法汇总
Jan 07 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
js实现随机点名小功能
Aug 17 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python读写json文件的简单实现
2017/04/11 Python
用Python实现KNN分类算法
2017/12/22 Python
python判断设备是否联网的方法
2018/06/29 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
Internet体系结构
2014/12/21 面试题
打架检讨书300字
2014/02/02 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL