首页 / JAVASCRIPT / 深入详解JavaScript数组的堆栈和队列的操作方法

深入详解JavaScript数组的堆栈和队列的操作方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了深入详解JavaScript数组的堆栈和队列的操作方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9683字，纯文字阅读大概需要14分钟。

内容图文

堆栈和队列

要了解JavaScript数组的堆栈和队列方法的操作，需要先对堆栈和队列基础知识有所了解。在继续后面的内容之前，我们先简单的了解一下堆栈和队列的概念。

栈和队列都是动态的集合，在栈中，可以去掉的元素是最近插入的那一个。栈实现了后进先出。在队列中，可以去掉的元素总是在集合中存在的时间最长的那一个。队列实现了先进先出的策略。

堆栈的基本概念

图示：

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。

最开始栈中不含有任何数据，叫做空栈，此时栈顶就是栈底。然后数据从栈顶进入，栈顶栈底分离，整个栈的当前容量变大。数据出栈时从栈顶弹出，栈顶下移，整个栈的当前容量变小。

比如说，我们在一个箱子中放了很多本书，如果你要拿出第二书，那么你要先把第一本书拿出来，才能拿第二本书出来；拿出第二本书之后，再把第一本书放进去。

ECMAScript为数组专门提供了 push()和 pop()方法，以便实现类似栈的行为。 push() 方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而 pop() 方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

队列的基本概念

栈数据结构的访问规则是LIFO(后进先出)，而队列数据结构的访问规则是FIFO(Fist-In-First-Out,先进先出)。队列在列表的末端添加项，从列表的前端移除项。如下图所示：

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

比如说火车站排队买票，先到的先买，买好的先走。

入队列操作其实就是在队尾追加一个元素，不需要任何移动，时间复杂度为O(1)。出队列则不同，因为我们已经架设下标为0的位置是队列的队头，因此每次出队列操作所有元素都要向前移动。如下图所示：

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

简单得回忆一下：

1、push()方法可以在数组的末属添加一个或多个元素

2、pop()方法把数组中的最后一个元素删除

3、shift()方法把数组中的第一个元素删除

4、unshift()方法可以在数组的前端添加一个或多个元素

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()方法的性能测试

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浏览器运行一次，得到的结果如下图所示：

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

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

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

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

总结

深入详解JavaScript数组的堆栈和队列的操作方法 - 文章图片

本文主要介绍了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

希望本文能够帮助到初学JavaScript的同学，不对的地方请指出，不胜感激！

更多JavaScript相关问题请访问PHP中文网：https://www.gxlcms.com/

以上就是深入详解JavaScript数组的堆栈和队列的操作方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的深入详解JavaScript数组的堆栈和队列的操作方法全部内容，希望文章能够帮你解决深入详解JavaScript数组的堆栈和队列的操作方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/282192.html

来源：【匿名】

【上一篇】关于js中this、原型与闭包的深入理解【下一篇】javascript 怎么调用php方法

更多 ►

【深入详解JavaScript数组的堆栈和队列的操作方法】教程文章相关的互联网学习教程文章

javaScript之数组（二）【代码】

***数组API： *栈和队伍：其实都是数组，只不过使用了不同的方法栈：一端封闭，只能从另一端进出的*数组* 何时使用栈：只能从数组一端进出结尾出入栈：入栈：arr.push(新值)； ==>arr.[arr.length]=新值；出栈：var last=arr.pop();案例：var bus=[];for(var i=0;i<5;i++){ bus.push("乘客"+i); alert(bus);}while(bus.length>0){ var cust=bus.pop(); alert(cust+...

Javascript基础知识盲点总结——数据类型和数组

一、javascript总的基本类型1.javascript中的基本类型共有五种：数字、字符串、布尔值、undefined、null其中null和undefined最大的区别在于，被赋予null的变量通常被认为是已经定义了的。2.除了以上五种基本类型外，其他的数据类型都属于对象。二、利用typeof方法查看数据类型在javascript中可以通过typeof方法来查看某个变量或值得数据类型。该方法会返回一个代表数据类型的字符串，可能返回的值包括：number,string, boolean, un...

javascript 笔试题之删除数组重复元素【代码】

笔试时紧张没写出来,静下心后发现简单的要死.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>删除数组重复元素</title></head><body><script>/*** 删除数组重复元素* @param array 目标数组* @return 返回去重后的数组*/function array_unique(arr) {//外层循环控制次...

JavaScript基础---一维数组转二维数组

var arr1=[1,2,3,4,5,6,7,8,9]// 方法一，用数组截取的方法 function fn(arr,n){arr=[].concat(arr)var newArr=[]while(arr.length){newArr.push(arr.splice(0,n))}return newArr}console.log(fn(arr1,2)) （注意不要改变原数组） //方法二 function fn1 (arr,n) { var newArr=[] for(var i=0;i<arr.length;i++){ //确定页数 var page=Math.floor(i/n) if(!newArr[page]){ newArr[pag...

JavaScript中的数组遍历forEach()与map()方法以及兼容写法【代码】

原文链接：https://www.cnblogs.com/jocyci/p/5508279.html 原理：高级浏览器支持forEach方法语法：forEach和map都支持2个参数：一个是回调函数（item,index,list）和上下文；forEach:用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；数组中有几项，那么传递进去的匿名回调函数就需要执行几次；每一次执行匿名函数的时候，还给其传递了三个参数值：数组中的当前项item,当前项的索引index,原始数组inpu...

JavaScript数组【代码】【图】

JavaScript数组：一个对象，可以放置一组数据。 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//字面量的方式创建数组var arr=["很好","不好","你好啊"]console.log(arr)//构造函数创建数组对象var arr1=new Array("雪梨","苹果","香蕉")console.log(arr1)//不需要固定长度，不会固定类型，可以放置任何的数据类型，也可以随意的增加大小和长度var arr2=[1,nul...

JavaScript中的数组【代码】

创建数组的两种方式var a=[]var a=new Array();数组的遍历var a=[1,2,3,4,5]; for(let i=0,len=a.length;i<len;i++){//三选一if(!a[i]) continue;//跳过null,undefinded和不存在的元素if(a[i]===undefined)continue;//跳过undefined和不存在的元素if(!(a[i] in a)) continue;//跳过不存在的元素 }数组的方法Array.join() //合并数组为字符串 Array.reverse() //将数组中元素倒序排列 Array.sort() //对数组元素进行排序 Array.conc...

JavaScript学习-js中的数组/Boolean类/字符串String类

JavaScript学习【js中的数组】 1、数组的概念：是在内存中连续储存对个有序元素的结构元素的顺序称为下标，通过下标查找对象元素。2、数组的声明：① 字面量声明：var arr1 = [];js中，同一数组，可以储存多种不同的数据类型：例如： var arr1 = [1,"2",true,{"name":"hahhah"},[1,2]]② new关键字声明： var arr2 = new Arry(参数)>>>参数可以为a.为空：声明一个，没有指定长度的数组；b.数组的length：声明一个指定长度的数组，...

JAVASCRIPT push() 将指定的数值添加到数组中【代码】

JAVASCRIPT push() 可向数组的末尾添加一个或多个元素，并返回新的长度。它是直接修改数组，而不是创建一个新的数组。push() 和 pop()使用数组提供的先进后出的功能。<!DOCTYPE html> <html> <head><title>push() 将指定的数值添加到数组中</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript">var arr = new Array(3)arr[0]="河南"arr[1]="河北"arr[2]="...

JavaScript数组知识网络【代码】

JavaScript数据类型基本数据类型BooleanNullNumberStringSymbolUndefined对象数据类型ObjectBuild-in objectArrayDateRegExpmore...Array定义：JavaScript数组是内置的对象之一，它可以用一个变量来存储多个同种类型或不同类型的值。构造方法 var newArr = new Array(values);var newArr = [values]; 判断是否数组Array.isArray(arr)arr instance of Array数据结构栈(stack) 后进先出(LIFO), 操作：进栈arr.push(element), 出栈arr...

javascript中去除数组中的重复元素【代码】

1 <script type="text/javascript">2var arr = ["b" ,"a" , "a", 2, 3, 3, 2, 1, 4, {}];3 Array.prototype.unique = function(){4var ret = [];5var o = {};//这个对象在这里其实是起一个临时容器的作用，在下面的操作中，每次从数组取一个元素，然后判断以这个元素为属性名的对象是否存在于对象 6//o中，如果是第一次使用这个元素（也即还没有出现重复的情况），那肯定不存在于对象o中，所以接下来要为这个属性随便赋个值（这...

javascript-数组简单的认识【代码】【图】

一起组团（什么是数组）我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5个学生成绩。数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。...

JavaScript中检测数组的几种方式【代码】

检测一个对象是否为数组的方式有：Array.isArray() // true或false(es5)toString.call([]); // [object Array]arr.constructor; // Array()instanceof Array　 // true或false 兼容性写法：if(typeof Array.isArray==="undefined"){Array.isArray = function(arg){return Object.prototype.toString.call(arg)==="[object Array]"}; } 示例代码：var aArr=[1,2,3]; console.log(Array.isArray(aArr)); /...

javascript原型：写一个合并后数组去掉同类项的方【代码】【图】

<!DOCTYPE html><html><head><title>test013_Array_prototype_unique()</title></head><script type="text/javascript">Array.prototype.unique =function() {var a = {};for (var i =0; i <this.length; i++) {if (typeof a[this[i]] =="undefined")a[this[i]] =1; }this.length =0;for(var i in a)this[this.length] = i;returnthis; }; </script><script type="text/javascript">var a = [1,2,3];var b = [2,3,4...

JavaScript实现对象数组按不同字段排序

如果有一个对象数组，我们想要依据某个对象属性对数组进行排序。而传递给数组sort（）方法的比較函数要接收两个參数，即要比較的值。但是。我们须要一种方式来指明依照哪个属性来排序。要解决问题，能够定义一个函数，它接收一个属性名，然后依据这个属性名来创建一个比較函数，以下就是这个函数的定义。function createComparionFun(propertyName) {return function(object1,object2){var value1=object1[propertyName];var value...

首页 / JAVASCRIPT / 深入详解JavaScript数组的堆栈和队列的操作方法

深入详解JavaScript数组的堆栈和队列的操作方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【深入详解JavaScript数组的堆栈和队列的操作方法】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程