JavaScript数组实现数据结构中的队列与堆栈


Posted in Javascript onMay 26, 2016

一、队列和堆栈的简单介绍

1.1、队列的基本概念

队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出!

如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

1.2、堆栈的基本概念

堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!

如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

二、 在JavaScript中实现队列和堆栈

在JavaScript中实现队列和数组主要是通过数组,js数组中提供了以下几个方法可以让我们很方便实现队列和堆栈:

•shift:从数组中把第一个元素删除,并返回这个元素的值。

•unshift: 在数组的开头添加一个或更多元素,并返回新的长度

•push:在数组的中末尾添加元素,并返回新的长度

•pop:从数组中把最后一个元素删除,并返回这个元素的值。

2.1、实现队列

<script type="text/javascript">
//创建一个数组来模拟队列
var a=new Array();
console.log(a);
//unshift: 在数组的开头添加一个或更多元素,并返回新的长度
console.log("入队");
a.unshift()
console.log(a);//----->
a.unshift();
console.log(a);//----->,
a.unshift();
console.log(a);//----->,,
a.unshift();
console.log(a);//----->,,,
console.log("出队,先进先出");
console.log(a);
//pop:从数组中把最后一个元素删除,并返回这个元素的值
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
</script>

在google浏览器控制台输出的效果如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

2.2、实现堆栈

<script type="text/javascript">
//创建一个数组来模拟堆栈
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素,并返回新的长度
console.log("入栈");
a.push()
console.log(a);//----->
a.push();
console.log(a);//----->,
a.push();
console.log(a);//----->,,
a.push();
console.log(a);//----->,,,
console.log("出栈,后进先出");
console.log(a);
//pop:从数组中把最后一个元素删除,并返回这个元素的值
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
a.pop();//----->
console.log(a);
</script>

在google浏览器控制台输出的效果如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

2.3、push方法和unshift方法的性能测试

Array的push与unshift方法都能给当前数组添加元素,不同的是,push是在末尾添加,而unshift则是在开头添加,从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来简单测试一下。

<script type="text/javascript">
/*
关于代码中"var s=+newDate();"的技巧说明
解释如下:=+这个运算符是不存在的;
+相当于.valueOf();
+new Date()相当于new Date().valueOf()
//个结果一样返回当前时间的毫秒数
alert(+new Date());
alert(+new Date);
var s=new Date();
alert(s.valueOf());
alert(s.getTime());
*/
var arr = [ ];
var startTime = +new Date(); //+new Date()相当于new Date().valueOf(),返回当前时间的毫秒数
// push性能测试 
for (var i = ; i < ; i++) { 
arr.push(i); 
}
var endTime = +new Date();
console.log("调用push方法往数组中添加个元素耗时"+(endTime-startTime)+"毫秒"); 
startTime = +new Date(); 
arr = [ ]; 
// unshift性能测试 
for (var i = ; i < ; i++) { 

arr.unshift(i); 
}
endTime = +new Date();
console.log("调用unshift方法往数组中添加个元素耗时"+(endTime-startTime)+"毫秒"); 
</script>

这段代码分别执行了100000次push和unshift操作,在Google浏览器运行一次,得到的结果如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

可见,unshift比push要慢差不多100倍!因此,平时还是要慎用unshift,特别是对大数组。那如果一定要达到unshift的效果,可以借助于Array的reverse方法,Array的reverse的方法能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果。比如:

<script type="text/javascript">
//创建一个数组来模拟堆栈
var a=new Array();
//使用push方法在数组的末尾添加元素
a.push()
a.push();
a.push();
a.push();
console.log("数组反转之前数组中的元素顺序");
console.log(a);//----->,,,
//Array有一个叫做reverse的方法,能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果
a.reverse();//使用reverse方法将数组进行反转
console.log("数组反转之后数组中的元素顺序");
console.log(a);
</script>

在google浏览器控制台输出的效果如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

从运行结果来看,数组元素的顺序已经反转过来了。

2.4、reverse方法的性能测试

reverse的性能又如何呢,下面再来测试:

<script type="text/javascript">
var arr = [ ], s = +new Date; 
for (var i = ; i < ; i++) { 
 arr.push(i); 
}
//调用reverse方法将数组里面的元素的顺序反转
arr.reverse(); 
console.log("调用reverse方法将数组里面的元素的顺序反转耗时:"+(+new Date - s)+"毫秒");
</script>

在google浏览器控制台输出的效果如下图所示:

JavaScript数组实现数据结构中的队列与堆栈

从运行效果中可以看到,reverse方法的性能极高,可以放心使用。

以上就是关于在javascript中通过数组来实现队列和堆栈的总结,并且简单测试了一下push、unshift、reverse这几个方法在操作大数组方面的性能优劣。

以上所述是小编给大家介绍的JavaScript数组实现数据结构中的队列与堆栈,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
js异或加解密效果代码
Jun 25 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 #Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 #Javascript
jquery获取所有选中的checkbox实现代码
May 26 #Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 #Javascript
动态加载js、css的简单实现代码
May 26 #Javascript
JS hashMap实例详解
May 26 #Javascript
jQuery验证插件validate使用方法详解
Sep 13 #Javascript
You might like
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python实现比较文件内容异同
2018/06/22 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
Java程序员面试题
2013/07/15 面试题
教师岗位聘任书范文
2014/03/29 职场文书
超市理货员岗位职责
2014/07/04 职场文书
内乡县衙导游词
2015/02/05 职场文书
北京天坛导游词
2015/02/12 职场文书
老公婚前保证书
2015/02/28 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
赤壁观后感(2)
2015/06/15 职场文书
《落花生》教学反思
2016/02/16 职场文书