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 表单下所有元素的隐藏
Jul 25 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP中ADODB类详解
2008/03/25 PHP
php 三维饼图的实现代码
2008/09/28 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python 统计字数的思路详解
2018/05/08 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python获取时间戳代码实例
2019/09/24 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
三项教育活动实施方案
2014/03/30 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
结婚典礼致辞
2015/07/28 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Java 在线考试云平台的实现
2021/11/23 Java/Android