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 相关文章推荐
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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开发文件系统实例讲解
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
2014年度考核工作总结
2014/12/24 职场文书
中班下学期个人总结
2015/02/12 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
SQL Server表分区删除详情
2021/10/16 SQL Server
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server