今天在学习js中发现push()、pop()、shift()、unshift()四种方法在栈和队列中的使用,发现结果和自己想像的不太一样,下面我们看代码和运行结果:

var stack = [];
	stack.push("栈1");       //push(ele):元素入栈,返回入栈后数组的长度
	stack.push("栈2");
	stack.push("栈3");
	console.log("这是堆栈");
	console.log(stack.push());
	console.log(stack.pop());	 //pop():元素入栈,返回出栈的数组元素
	console.log(stack.pop());
	console.log(stack.push());

	var queue = [];
	queue.unshift("队列1");//unshift(ele):元素入队列,返回入队后数组的长度
	queue.unshift("队列2");
	queue.unshift("队列3");
	console.log("这是队列");
	console.log(queue.unshift());
	console.log(queue.shift()); //shift():元素入队列,返回出队列的数组元素
	console.log(queue.shift());
	console.log(queue.unshift());

栈按照先进后出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始读出数据。

队列只允许在一端插入,在另一端删除,所以只有最早进入队列的元素才能最先从队列中删除,故队列又称为先进先出线性表。

这样看来,栈是先入后出,队是先入先出,按照这个思路来看,上面代码的输出结果应该是:
栈3 先出栈
栈2 后出栈

队列1 先出队列
队列2 后出队列

实际结果(在浏览器按F12):

JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解_数组元素


栈是先进后出没有问题,但是队列怎么感觉是先进后出了,哪里出错了???

我们应该仔细看一下数据结构,了解下面概念就不难理解了:

1、push()是用来在数组末端添加项,并且返回添加后数组的长度;
2、pop()在数组末端移除项,返回移除的数组元素;
3、unshift()在数组前端添加项,并且返回添加后数组的长度;
4、shift()在数组的第一个项(前端)移除,返回移除的数组元素。

所以队列还是符合先入先出的原则,只是我们要注意unshift()和shift()方法,都是在数组前端插入,在数组前端移除的。

我们上图理解:

使用unshift()方法:在数组前端插入

JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解_数组元素_02


使用shift()方法:在数组前端移除

JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解_入栈_03


所以当我们使用unshift()和shift()方法共同操作队列的时候,输出结果是受影响的,并不是队列不符合先进先出的原则。

我们可以使用push()和shift()组合或者使用pop()和unshift()组合来使得队列的输出结果也是展示先进先出的效果。

示例代码:

var queue = [];
	queue.unshift("队列1");
	queue.unshift("队列2");
	queue.unshift("队列3");
	console.log("这是队列");
	console.log(queue.unshift());
	console.log(queue.pop());
	console.log(queue.pop());
	console.log(queue.unshift());

运行结果:

JavaScript总结:关于堆栈、队列中push()、pop()、shift()、unshift()使用方法的理解_数组元素_04


探究之后便能理解了,希望可以帮助大家!