js实现类似栈和队列的行为,以及push和unshift两个方法的性能测试
JavaScript数组的栈和队列的操作方法。
堆栈和队列
要了解JavaScript数组的堆栈和队列方法的操作,需要先对堆栈和队列基础知识有所了解。在继续后面的内容之前,我们先简单的了解一下堆栈和队列的概念。
栈和队列都是动态的集合,在栈中,可以去掉的元素是最近插入的那一个。栈实现了后进先出。在队列中,可以去掉的元素总是在集合中存在的时间最长的那一个。队列实现了先进先出的策略。
堆栈的基本概念
先上张图:
栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。
最开始栈中不含有任何数据,叫做空栈,此时栈顶就是栈底。然后数据从栈顶进入,栈顶栈底分离,整个栈的当前容量变大。数据出栈时从栈顶弹出,栈顶下移,整个栈的当前容量变小。
比如说,我们在一个箱子中放了很多本书,如果你要拿出第二书,那么你要先把第一本书拿出来,才能拿第二本书出来;拿出第二本书之后,再把第一本书放进去。
ECMAScript为数组专门提供了 push()
和 pop()
方法,以便实现类似栈的行为。 push()
方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而 pop()
方法则从数组末尾移除最后一项,减少数组的length
值,然后返回移除的项。
队列的基本概念
栈数据结构的访问规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(Fist-In-First-Out,先进先出)。队列在列表的末端添加项,从列表的前端移除项。如下图所示:
比如说火车站排队买票,先到的先买,买好的先走。
入队列操作其实就是在队尾追加一个元素,不需要任何移动,时间复杂度为O
(1
)。出队列则不同,因为我们已经架设下标为0
的位置是队列的队头,因此每次出队列操作所有元素都要向前移动。如下图所示:
ECMAScript为数组专门提供了 shift()
和 unshift()
方法,以便实现类似队列的行为。由于 push()
是向数组末端添加数组项的方法,因此要模拟队列只需一个从数组前端取得数组项的方法。实现这一操作的数组方法就是 shift()
,它能够移除数组中的第一个项并返回该项,同时将数组长度减1
。
顾名思义, unshift()
与 shift()
的用途相反:它能在数组前端添加任意个数组项并返回新数组的长度。因此,同时使用 unshift()
和 pop()
方法,可以从相反的方向来模拟队列,即在数组的前端添加数组项,从数组末端移除数组项。
push()
方法
该方法是向数组末尾添加一个或者多个元素,并返回新的长度。
push()
方法可以接收任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度。如:
var arr = []; //创建一个空数组
console.log(arr); // []
console.log("入栈"); // 入栈
arr.push(1); // 将1添加到数组arr中
console.log(arr); // [1]
arr.push(2); //将2添加到数组arr中
console.log(arr); //[1,2]
arr.push([3,4]); // 将数组[3,4]添加到arr中
console.log(arr); // [1,2,[3,4]]
console.log(arr.length); // 3
在Chrome浏览器控制台输出的效果如下图所示:
pop()
方法
pop()
方法刚好和push()
方法相反。pop()
方法删除数组的最后一个元素,把数组的长度减1
,并且返回它被删除元素的值,如果数组变为空,则该方法不改变数组,返回undefine
值。如下代码演示:
var arr = [1,2,3,4]; //创建一个数组
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4
console.log("出栈,后进先出"); // 出栈,后进先出
arr.pop();
console.log(arr); // // [1,2,3]
arr.pop();
console.log(arr); // [1,2]
arr.pop();
console.log(arr); // [1]
arr.pop();
console.log(arr); // []
在Chrome浏览器控制台输出的效果如下图所示:
unshift()
方法
unshift()
方法是向数组的开头添加一个或多个元素,并且返回新的长度。
var arr = []; //创建一个空的数组
console.log(arr); // []
console.log("入队"); // 入队
arr.unshift(1,2,3,4); // 将1,2,3,4推入到数组arr
console.log(arr); // [1,2,3,4]
console.log(arr.length); // 4
在Chrome浏览器控制台输出的效果如下图所示:
shift()
方法
shift()
方法和unshift()
方法恰恰相反。该方法用于把数组的第一个元素从其中删除,并返回被删除的值。如果数组是空的,shift()
方法将不进行任何操作,返回undefined
的值。
var arr = [1,2,3,4]; // 创建一个数组
console.log(arr); // [1,2,3,4]
arr.shift(); // 取得第一项
console.log(arr); // [2,3,4]
arr.shift(); // 取得第一项
console.log(arr); // [3,4]
arr.shift(); // 取得第一项
console.log(arr); // [4]
arr.shift(); // 取得第一项
console.log(arr); // []
在Chrome浏览器控制台输出的效果如下图所示:
简单得回忆一下:
push()
方法可以在数组的末属添加一个或多个元素shift()
方法把数组中的第一个元素删除unshift()
方法可以在数组的前端添加一个或多个元素pop()
方法把数组中的最后一个元素删除
JavaScript实现类似栈和队列的行为
了解这几种方法之后,我们就可以将它们结合起来,轻松的实现类似栈和队列的行为。
实现类似栈的行为
将push()
和pop()
结合在一起,我们就可以实现类似栈的行为:
//创建一个数组来模拟堆栈
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素,并返回新的长度
console.log("入栈");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出栈,后进先出");
console.log(a);
//pop:从数组中把最后一个元素删除,并返回这个元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);
在Chrome浏览器控制台输出的效果如下图所示:
实现类似队列的行为
将shift()
和push()
方法结合在一起,可以像使用队列一样使用数组。即在数组的后端添加项,从数组的前端移除项:
//创建一个数组来模拟队列
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素,并返回新的长度
console.log("入队");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出队,先进先出");
console.log(a);
//shift:从数组中把第一个元素删除,并返回这个元素的值
a.shift();//----->1
console.log(a);
a.shift();//----->2
console.log(a);
a.shift();//----->3
console.log(a);
a.shift();//----->4
console.log(a);
在Chrome浏览器控制台输出的效果如下图所示:
除此之外,还可以同时使用unshift()
和pop()
方法,从相反的方向来模拟队列,即在数组的前端添加项,从数组的后端移除项。如下面的示例所示:
//创建一个数组来模拟队列
var a=new Array();
console.log(a);
//unshift: 在数组的前端添加一个或更多元素,并返回新的长度
console.log("入队");
a.unshift(1)
console.log(a);//----->1
a.unshift(2);
console.log(a);//----->2,1
a.unshift(3);
console.log(a);//----->3,2,1
a.unshift(4);
console.log(a);//----->4,3,2,1
console.log("出队,先进先出");
console.log(a);
//pop:从数组中把最一个元素删除,并返回这个元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);
在Chrome浏览器控制台输出的效果如下图所示:
push()
方法和unshift()
方法的性能测试
以下这部分内容来自于《JavaScript学习:JavaScript的数组实现队列与堆栈的方法》一文。
Array的push()
与unshift()
方法都能给当前数组添加元素,不同的是,push()
是在末尾添加,而unshift()
则是在开头添加,从原理就可以知道,unshift()
的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来简单测试一下。
/*
关于代码中"var s=+newDate();"的技巧说明
解释如下:=+这个运算符是不存在的;
+相当于.valueOf();
+new Date()相当于new Date().valueOf()
//4个结果一样返回当前时间的毫秒数
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 = 0; i < 100000; i++) {
arr.push(i);
}
var endTime = +new Date();
console.log("调用push方法往数组中添加100000个元素耗时"+(endTime-startTime)+"毫秒");
startTime = +new Date();
arr = [ ];
// unshift性能测试
for (var i = 0; i < 100000; i++) {
arr.unshift(i);
}
endTime = +new Date();
console.log("调用unshift方法往数组中添加100000个元素耗时"+(endTime-startTime)+"毫秒");
这段代码分别执行了100000
次push()
和unshift()
操作,在chrome浏览器运行一次,得到的结果如下图所示:
可见,unshift()
比push()
要慢差不多100
倍!因此,平时还是要慎用unshift()
,特别是对大数组。那如果一定要达到unshift()
的效果,可以借助于Array的reverse()
方法,Array的reverse()
的方法能够把一个数组反转。先把要放进数组的元素用push()
添加,再执行一次reverse()
,就达到了unshift()
的效果。比如:
//创建一个数组来模拟堆栈
var a=new Array();
//使用push方法在数组的末尾添加元素
a.push(1)
a.push(2);
a.push(3);
a.push(4);
console.log("数组反转之前数组中的元素顺序");
console.log(a);//----->1,2,3,4
//Array有一个叫做reverse的方法,能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果
a.reverse();//使用reverse方法将数组进行反转
console.log("数组反转之后数组中的元素顺序");
console.log(a);
在chrome浏览器控制台输出的效果如下图所示:
从运行结果来看,数组元素的顺序已经反转过来了。
reverse()
方法的性能测试
var arr = [ ], s = +new Date;
for (var i = 0; i < 100000; i++) {
arr.push(i);
}
//调用reverse方法将数组里面的100000元素的顺序反转
arr.reverse();
console.log("调用reverse方法将数组里面的100000元素的顺序反转耗时:"+(+new Date - s)+"毫秒");
在chrome浏览器控制台输出的效果如下图所示:
从运行效果中可以看到,reverse()
方法的性能极高,可以放心使用。
总结
本文主要介绍了JavaScript数组的push()
、pop()
、shift()
和unshift()
方法。并且如何通过组合这几种方法实现类似栈和队例的行为。
js中删除堆栈:
1:js中的splice方法
splice(index,len,[item]) 注释:该方法会改变原始数组。
splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值
index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空
如:arr = ['a','b','c','d']
删除 ---- item不设置
arr.splice(1,1) //['a','c','d'] 删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变
arr.splice(1,2) //['a','d'] 删除起始下标为1,长度为2的一个值,len设置的2
替换 ---- item为替换的值
arr.splice(1,1,'ttt') //['a','ttt','c','d'] 替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1
arr.splice(1,2,'ttt') //['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1
添加 ---- len设置为0,item为添加的值
arr.splice(1,0,'ttt') //['a','ttt','b','c','d'] 表示在下标为1处添加一项‘ttt’
看来还是splice最方便啦
2:delete delete删除掉数组中的元素后,会把该下标出的值置为undefined,数组的长度不会变
如:delete arr[1] //['a', ,'c','d'] 中间出现两个逗号,数组长度不变,有一项为undefined
还有其他几种自定义方法,参考这里
原文: https://www.w3cplus.com/javascript/array-part-3.html © w3cplus.com
转载自:https://www.w3cplus.com/javascript/array-part-3.html
https://www.cnblogs.com/Joans/p/3981122.html
js实现类似栈和队列的行为,以及push和unshift两个方法的性能测试相关推荐
- 限界分支法优先级队列方式出口和追踪解的两种方法总结
在优先级队列分支限界法法中,何时为出接口,也就是while循环何时退出了? 解空间为[0,1,2-,n-1],当depth = n-1时,就可以记录结果了,可以考虑循环体退出了(实际上能不能出,还要看 ...
- 数据结构 (3)栈与队列之粗心的人如何写oj血的教训
栈 栈是种特殊的线性表,他先入后出,后进先出 入数据为压栈,且在栈顶入,出数据为弹栈或者出栈,且在栈顶出 栈好比是枪,压子弹为入栈,射击为出栈 压栈 出栈 就像你啃鸡爪子一样,你从包装袋里拿出来,从上 ...
- 《剑指offer》-- 构建乘积数组、求1+2+3+...+n、不用加减乘除做加法、包含min函数的栈、用两个栈实现队列
一.构建乘积数组: 1.题目: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*. ...
- 纸上得来终觉浅,可以这里看一眼---->栈和队列(下)
目录 括号匹配问题 用两个队列实现栈 用两个栈实现队列 设计循环队列 在上一篇博客里面,我们讲了栈和队列的性质以及栈和队列的模拟实现,那么这两个数据结构的特殊性质有什么应用场景呢?或者更直接一点,面试 ...
- 【数据结构】第六站:栈和队列
目录 一.栈 1.栈的概念和结构 2.栈的实现方案 3.栈的具体实现 4.栈的完整代码 5.有效的括号 二.队列 1.队列的概念及结构 2.队列的实现方案 3.队列的实现 4.队列实现的完整代码 一. ...
- 用两个栈实现队列(Java实现)
用两个栈实现队列 题目 剑指 Offer 09. 用两个栈实现队列 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整 ...
- js删除指定html及子标签,js中如何删除某个元素下面的所有子元素?(两种方法)...
js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...
- 数据结构-js实现栈和队列
我们都知道数据结构对我们非常重要,我在几场笔试题中遇到了非常多的有关数据结构的问题.因为我学习数据结构在一年多以前了,有点忘了,所以今天想好好温习一下数据结构的知识,先从简单的数据结构说起吧. 栈 我 ...
- js进栈出栈_[js]数组栈和队列操作
写在前面 在项目中,对数组的操作还是比较常见的,有时候,我们需要模拟栈和队列的特性才能实现需求,这里记录一下这个知识点. 栈 栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一 ...
- 用JS描述的数据结构及算法表示——栈和队列(基础版)
前言:找了上课时数据结构的教程来看,但是用的语言是c++,所以具体实现在网上搜大神的博客来看,我看到的大神们的博客都写得特别好,不止讲了最基本的思想和算法实现,更多的是侧重于实例运用,一边看一边在心里 ...
最新文章
- 再谈 BigInteger - 使用快速傅里叶变换
- Android 禁止更换桌面,Android中如何禁用其他应用,并且不在桌面显示
- MySQL服务MySQL+MHA高可用服务集群搭建
- excel下划线转驼峰公式
- 解决redis-cli command not found问题
- Reading papers_6(Pattern Recognition And Machine Learning一书,ing...)
- quartus的modelsim仿真
- 2021年中国宠物食品加工设备市场趋势报告、技术动态创新及2027年市场预测
- 企业计算机仿真技术应用,基于计算机仿真技术的企业生产物流系统优化研究
- 卸载office 2003出现pro11.msi
- 8乘8led点阵显示数字_光立方8乘8乘8立体点阵
- 【食安云桥】python 文件内批量长度除以3.5替换
- 三角函数在c语言中应用,三角函数在前端动画中的应用
- 巧用 Dummy 解决断网情况下的网络访问问题
- cad断点快捷键_CAD打断(BREAK)命令的使用技巧
- 阿额企鹅我恶趣味企鹅我去恶趣味
- Blurry 高斯模糊库的使用
- 雷军再次承诺:小米9下周二开放购买
- 【资讯分享】云帆加速将P2P技术免费,该服务量级已突破1.5T
- TPC/IP 协议头部说明