js：堆栈和队列

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浏览器控制台输出的效果如下图所示：

push方法

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浏览器控制台输出的效果如下图所示：

pop方法

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浏览器控制台输出的效果如下图所示：

unshift方法

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浏览器控制台输出的效果如下图所示：

shift方法

简单得回忆一下：

  • 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浏览器控制台输出的效果如下图所示：

JavaScript实现类似栈的行为

实现类似队列的行为

将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浏览器控制台输出的效果如下图所示：

JavaScript实现类似队列的行为

除此之外，还可以同时使用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浏览器控制台输出的效果如下图所示：

JavaScript实现类似队列的行为

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/568591.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Python爬虫】微信公众号历史文章和文章评论API分析

【Python爬虫】微信公众号历史文章和文章评论API分析

上一篇文章爬取微信公众号文章信息准备工作介绍了微信公众号历史文章和文章评论API的组成情况&#xff0c;历史文章API格式&#xff1a;https://mp.weixin.qq.com/mp/profile_ext?actiongetmsg&__bizMjM5NjAxOTU4MA&fjson&offset10&count10&is_ok1&sc…
阅读更多...
【Python】Python简介和Python解释器

【Python】Python简介和Python解释器

计算机语言的种类非常的多&#xff0c;总的来说可以分成机器语言&#xff0c;汇编语言&#xff0c;高级语言三大类。 机器语言(二进制)→汇编语言→&#xff08;前面两种语言是与硬件进行交互&#xff09; →高级语言&#xff08;面向过程语言(C语言)→面向对象语言&#xff09…
阅读更多...
【Python】单线程异步多线程多进程实例

【Python】单线程异步多线程多进程实例

上一篇文章主要介绍了多任务场景下单线程异步、多线程、多进程如何选择&#xff0c;链接&#xff1a;多任务场景下单线程异步多线程多进程 这里主要通过三个实例去验证一下简单的多任务场景下&#xff0c;三种方式的耗时情况&#xff0c;假设有10个互不关联的10个任务 多进程版…
阅读更多...
python及pycharm2018软件安装教程

python及pycharm2018软件安装教程

python及pycharm2018软件安装教程 python 3.6.5及pycharm2018.1.1 Win版32/64位下载地址&#xff1a; https://pan.baidu.com/s/1KdECgnrARK4HubPeFSKCTw 密码&#xff1a;bwc5 Python及PyCharm简介&#xff1a; Python 是一种面向对象的解释型计算机程序设计语言。是纯粹的自由…
阅读更多...
2059 - authentication plugin 'caching_sha2_password' -navicat连接异常问题解决

2059 - authentication plugin 'caching_sha2_password' -navicat连接异常问题解决

使用navicat 连接 mysql 8.0.11 报 "2059 - authentication plugin caching_sha2_password ..." 解决办法&#xff1a; 进入mysql命令行然后输入 ALTER USER root% IDENTIFIED WITH mysql_native_password BY root1;
阅读更多...
【测试工具】在linux测试环境安装bug管理工具禅道

【测试工具】在linux测试环境安装bug管理工具禅道

在我们测试中&#xff0c;为了方便管理测试流程&#xff0c;提交测试发现的bug&#xff0c;我们需要使用到bug管理工具。有些大公司可能会自己开发一些bug管理工具&#xff0c;但是我们也会用一些开源的bug管理工具&#xff0c;比如Bugzilla&#xff0c;Redmine&#xff0c;Tra…
阅读更多...
【测试工具】在linux测试环境访问禅道数据库

【测试工具】在linux测试环境访问禅道数据库

上一篇文章我们介绍了如何在linux测试环境安装bug管理工具禅道&#xff0c;现在我们来介绍一下如何访问禅道的数据库&#xff0c;访问数据库有什么用呢&#xff1f;首先&#xff0c;我们可以更改我们安装后的管理系统的名称&#xff08;改为自己公司名称&#xff09;&#xff0…
阅读更多...
在命令提示符（cmd）下怎样复制粘贴（详细版）

在命令提示符（cmd）下怎样复制粘贴（详细版）

我们的命令提示符面板&#xff0c;不能选中复制。应该怎么办呢&#xff1f; 按照下面的方法即可解决 输入“cmd”&#xff0c;确认。 此时打开了cmd窗口&#xff0c;在图中位置右键选择“属性”。 4 在弹出的窗口中&#xff0c;勾选“快速编辑模式”。 5 复制方框1中的文字…
阅读更多...
python各种库安装

python各种库安装

1、安装django pip install django 安装成功测试&#xff1a;进入cmd--》输入python--》输入import django-->输入 django.get_version(),若正常显示则说明安装成功 2、更新pip python -m pip install --upgrade pip 3、安装pymysql pip install pymysql 出现错误&…
阅读更多...
【工具】SecureCRT安装和注册

【工具】SecureCRT安装和注册

SecureCRT是一款支持SSH&#xff08;SSH1和SSH2&#xff09;的终端仿真程序&#xff0c;简单地说是Windows下登录UNIX或Linux服务器主机的软件。 SecureCRT支持SSH&#xff0c;同时支持Telnet和rlogin协议。SecureCRT是一款用于连接运行包括Windows、UNIX和VMS的理想工具。通过…
阅读更多...
Windows下如何查看某个端口被谁占用并强制关闭

Windows下如何查看某个端口被谁占用并强制关闭

一、查看那个端口被调用 我告诉大家一个方法&#xff0c;^_^。 1、 开始—->运行—->cmd&#xff0c;或者是windowR组合键&#xff0c;调出命令窗口&#xff1b; 2、输入命令&#xff1a;netstat -ano&#xff0c;列出所有端口的情况。在列表中我们观察被占用的端口&a…
阅读更多...
【性能测试】性能测试的基础理论

【性能测试】性能测试的基础理论

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5456855.html &#xff0c;有删减。 随着软件行业的快速发展&#xff0c;现代的软件系统越来越复杂&#xff0c;功能越来越多&#xff0c;测试人员除了需要保证基本的功能测试质量&#xff0c;性能也随越来越受…
阅读更多...
MySQL 处理插入重主键唯一键重复值办法

MySQL 处理插入重主键唯一键重复值办法

本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法&#xff0c;主要涉及到IGNORE,ON DUPLICATE KEY UPDATE,REPLACE&#xff1b;接下来就分别看看这三种方式的处理办法。 IGNORE 当使用INSERT语句向表中添加一些行数据并且在处理期间发生错误时&#xff0c;…
阅读更多...
【性能测试】性能测试的基本流程

【性能测试】性能测试的基本流程

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5463477.html&#xff0c;有删减。 本文主要介绍下性能测试的基本流程&#xff0c;性能测试从实际执行层面来看&#xff0c;测试的过程一般分为这么几个阶段&#xff0c;如下图&#xff1a; 下面分别介绍下每个…
阅读更多...
【性能测试】性能测试工具选择

【性能测试】性能测试工具选择

转发自博客园贺满&#xff1a;https://www.cnblogs.com/puresoul/p/5503134.html&#xff0c;有删减。 本篇文章主要简单总结下性能测试工具的原理以及如何选型。性能测试和功能测试不同&#xff0c;性能测试的执行是基本功能的重复和并发&#xff0c;需要模拟多用户&#xff0…
阅读更多...
【测试工具】禅道项目管理工具设置触发邮箱

【测试工具】禅道项目管理工具设置触发邮箱

禅道支持邮件提醒&#xff0c;当需求、任务、bug等发生变化的时候&#xff0c;可以发邮件提醒。 禅道提醒邮件默认通知范围&#xff08;禅道9.8版本&#xff0c;可以在 后台-消息-设置中设置哪些动作需要发信&#xff09;&#xff1a; 1、Bug&#xff1a;指派给抄送 添加&#…
阅读更多...
【性能测试】Linux系统监控-Top命令

【性能测试】Linux系统监控-Top命令

前面转载的三篇文章主要介绍了性能测试的相关概念&#xff0c;其中有提到服务器&#xff0c;服务器的配置是性能测试中必须考虑的&#xff0c;而且性能测试中也必须监控服务器。 这篇文章主要介绍一下如何通过Linux服务器自带的top命令监控运行情况&#xff0c;以下是直接top命…
阅读更多...
【性能测试】Linux系统监控-CPU信息

【性能测试】Linux系统监控-CPU信息

我们知道CPU对于服务器来说非常重要&#xff0c;下面我们从几个方面介绍linux服务器CPU相关信息&#xff1a; 先要理解以下几个概念&#xff1a; 1、一台物理机的物理CPU的个数 2、一个CPU上的核数 3、一个核上面支持的线程数 有下面的计算公式&#xff1a; 总核数 物理C…
阅读更多...
【Linux】Linux简介以及 与UNIX区别

【Linux】Linux简介以及 与UNIX区别

一直以来对Linux、Unix、linux内核、linux发行版的概念比较模糊&#xff0c;最近查找资料并经过自己的整理&#xff0c;主要总结了Linux和UNIX的区别和联系、内核和操作系统的关系、Linux操作系统和结构、发行版本CentOS介绍。 Linux 和 UNIX 的关系/区别 Linux 是一个类似 U…
阅读更多...
【视频】视频文件格式和视频编码

【视频】视频文件格式和视频编码

我们经常在电脑、电视、手机或者其他终端产品看视频&#xff0c;我们对视频有个大概了解&#xff0c;比如清晰度、大小、视频类型等&#xff0c;但是对于视频内部结构我们应该一无所知&#xff0c;现在我们来一步一步解开视频的神秘面纱。 首先大家要清楚两个概念&#xff0c;视…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023