JavaScript数据结构与算法之栈与队列


Posted in Javascript onJanuary 29, 2016

学习起因

曾经有一次在逛V2EX时,碰到这么一个帖子。
数学完全还给老师了,想学回一些基础数学,大概是高中程度的,有什么书籍推荐?
发帖的楼主大学没有高数课程,出去工作时一直在从事前端的工作。感觉到数学知识的匮乏,所以想补一补数学。
看了看帖子,感觉和我很像,因为我的专业是不开高数的,我学的也是前端。也同样感觉到了数学知识匮乏所带来的困顿。同时因为自己的数学思维实在是不怎么好,所以决定努力补习数学与计算机基础知识。
当时也有人说:”前端需要什么数据结构与算法”,但是对于这个事情我有自己的看法。
我并不认为前端不需要算法之类的知识,在我看来前端具备坚实的计算机基础,对自身发展是极其有利的。我想做程序员。而不是一辈子的初级前端和码农。
也算是给自己的勉励吧。毕竟基础决定上限,再加上自己对计算机真的很感兴趣,所以学起来就算很累,但也是很幸福的。于是去网上选购了《学习JavaScript数据结构与算法》这本书,配合着去图书馆借阅的《大话数据结构》,开始了数据结构与算法的初步学习。

JavaScipt之数组操作

接下来就是数据结构的第一部分,栈。
栈是一种遵从后进先出原则(LIFO,全称为Last In First Out)的有序集合。栈顶永远是最新的元素。
举个例子就是:栈就像放在箱子里的一叠书 你要拿下面的书先要把上面的书拿开。(当然,你不能先拿下面的书。)

JavaScipt中栈的实现
首先,创建一个构造函数。

/**
 * 栈的构造函数
 */
function Stack() {

 // 用数组来模拟栈
 var item = [];
}

栈需要有如下的方法:
push(element(s)): 添加几个元素到栈顶
pop(): 移除并返回栈顶元素
peek(): 返回栈顶元素
isAmpty: 检查栈是否为空,为空则返回true
clear: 移除栈中所有元素
size: 返回栈中元素个数。
print: 以字符串显示栈中所有内容
push方法的实现
说明: 需要往栈中添加新元素,元素位置在队列的末尾。也就是说,我们可以用数组的push方法来模拟实现。

实现:

/**
 * 将元素送入栈,放置于数组的最后一位
 * @param {Any} element 接受的元素,不限制类型
 */
this.push = function(element) {
 items.push(element);
};

pop方法的实现

说明: 需要把栈顶元素弹出,同时返回被弹出的值。可以用数组的pop方法来模拟实现。
实现:

/**
 * 弹出栈顶元素
 * @return {Any} 返回被弹出的值
 */
this.pop = function() {
 return items.pop();
};

peek方法的实现
说明: 查看栈顶元素,可以用数组长度来实现。
实现:

/**
 * 查看栈顶元素
 * @return {Any} 返回栈顶元素
 */
this.peek = function() {
 return items[items.length - 1];
}

其余方法的实现
说明: 前三个是栈方法的核心,其余方法则在此一次性列出。因为下文要讲的队列,会与这部分有很大重合。
实现:

/**
 * 确定栈是否为空
 * @return {Boolean} 若栈为空则返回true,不为空则返回false
 */
this.isAmpty = function() {
 return items.length === 0
};

/**
 * 清空栈中所有内容
 */
this.clear = function() {
 items = [];
};

/**
 * 返回栈的长度
 * @return {Number} 栈的长度
 */
this.size = function() {
 return items.length;
};

/**
 * 以字符串显示栈中所有内容
 */
this.print = function() {
 console.log(items.toString());
};

实际应用

栈的实际应用比较多,书中有个十进制转二进制的函数。(不懂二进制怎么算的话可以百度)下面是函数的源代码。
原理就是输入要转换的数字,不断的除以二并取整。并且最后运用while循环,将栈中所有数字拼接成字符串输出。

/**
 * 将10进制数字转为2进制数字
 * @param {Number} decNumber 要转换的10进制数字
 * @return {Number}      转换后的2进制数字
 */
function divideBy2(decNumber) {

 var remStack = new Stack(),
  rem,
  binaryString = '';

 while (decNumber > 0) {
  rem = Math.floor(decNumber % 2);
  remStack.push(rem);
  decNumber = Math.floor(decNumber / 2);
 }

 while (!remStack.isAmpty()) {
  binaryString += remStack.pop().toString();
 }

 return binaryString;
};

到此而言,栈的学习就告一段落了。因为源代码中注释较多,所以这儿就不贴出源代码的内容了。

队列

队列与栈是很相像的数据结构,不同之处在于队列是是先进先出(FIFO:First In First Out)的。
举个例子: 火车站排队买票,先到的先买。(插队的不算),是不是很好理解了~

JavaScipt中队列的实现

队列的实现和栈很像。首先依然是构造函数:

/**
 * 队列构造函数
 */
function Queue() {
 var items = [];
}

队列需要有如下的方法:
enqueue(element(s)): 向队列尾部添加几个项
dequeue(): 移除队列的第一项(也就是排在最前面的项)
front(): 返回队列的第一个元素,也就是最新添加的那个
其余方法与队列相同

enqueue方法的实现

说明: 向队列尾部添加几个项。
实现:

/**
 * 将元素推入队列尾部
 * @param {Any} ele 要推入队列的元素
 */
this.enqueue = function(ele) {
 items.push(ele);
};

dequeue方法的实现

说明: 移除队列的第一项。
实现:

/**
 * 将队列中第一个元素弹出
 * @return {Any} 返回被弹出的元素
 */
this.dequeue = function() {
 return items.shift()
};

front方法的实现

说明: 返回队列的第一个元素,也就是最新添加的那个。
实现:

/**
 * 查看队列的第一个元素
 * @return {Any} 返回队列中第一个元素
 */
this.front = function() {
 return items[0];
};

以上的三个方法,就是队列这种数据结构的核心方法了。其实很好理解的。

实际应用
书上的是个击鼓传花的小游戏。原理就是循环到相应位置时,队列弹出那个元素。最后留下的就是赢家。
源代码如下:

/**
 * 击鼓传花的小游戏
 * @param {Array} nameList 参与人员列表
 * @param {Number} num   在循环中要被弹出的位置
 * @return {String}     返回赢家(也就是最后活下来的那个)
 */
function hotPotato(nameList, num) {
 var queue = new Queue();

 for (var i = 0; i < nameList.length; i++) {
  queue.enqueue(nameList[i]);
 }

 var eliminated = '';

 while (queue.size() > 1) {
  for (var i = 0; i < num; i++) {
   queue.enqueue(queue.dequeue());
  }

  eliminated = queue.dequeue();
  console.log(eliminated + " Get out!")
 }

 return queue.dequeue()
}

队列的学习到此就告一段落了。下一期将讲述另外一种数据结构: 链表。

感想

很多时候看书,直接看算法导论或者一些数据结构的书,都是很迷糊的。后来才发现,看书从自己能看懂的开始,由浅入深才是适合自己的学习方式。

Javascript 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
跟我学习javascript的this关键字
May 28 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
javascript实现表单验证
Jan 29 #Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 #Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 #Javascript
基于javascript实现listbox左右移动
Jan 29 #Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 #Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 #Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 #Javascript
You might like
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
简单实现js浮动框
2016/12/13 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python代码太长换行的实现
2019/07/05 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
销售工作岗位职责
2013/12/24 职场文书
岗位职责风险点
2014/03/12 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
社区平安建设方案
2014/05/25 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
教师求职自荐信范文
2015/03/04 职场文书
大学生团日活动总结
2015/05/06 职场文书