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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
浅谈React高阶组件
Mar 28 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
php常用表单验证类用法实例
2015/06/18 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
学习ExtJS border布局
2009/10/08 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
公开服务承诺制度
2014/03/26 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
车间安全生产管理制度
2015/08/06 职场文书
小学运动会开幕词
2016/03/04 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python