前端不需要掌握队列和栈

概述

答案肯定是需要的。

首先js 中没有队列 和栈的概念。

我相信大部分前端人对这两个数据结构的概念仅仅存在，在大学学习数据机构时，课堂上老师讲的队列和栈的结构，用c语言实现的版本。

我们先来重温一下大学课堂

队列：先入先出，后入后出。

栈：先入后出，后入先出。

理解

其实也没啥好理解的，字面意思很清晰了。

今天我去做核酸，排了很长的队伍。

队列就可以想象是我们做核酸排队，只能一个一个往队伍后面排队，从前到后一个一个做核酸，来得早，早做核酸，早点离开，来得晚，晚做核酸，晚点离开。

北京的冬天除了冷还是冷。

栈就可以想象成我们冬天穿衣服和脱衣服。 先穿一件保暖内衣，再套一件卫衣，再套一件羽绒服。脱衣服时，不可能先直接脱掉内衣，需要从外到内一件一件脱掉，先脱羽绒服，再脱卫衣，最后是内衣。

最先穿的是内衣，最后脱的是内衣，这就先入后出，最后穿的是羽绒服，最先脱的是羽绒服，这就是后入先出。

实现

js没有这个数据结构，也不要问我，怎么用c语言实现，不好意思，现在的我全忘光了。

虽然没有这个数据结构，但是我们每个前端开发肯定用过，只是没注意到罢了。

js中对数组的封装已经非常完美了，以下四个方法，各位小可爱们肯定是用过

js Array.prototype.push() Array.prototype.pop() Array.prototype.shift() Array.prototype.unshfit()

每个API是什么意思，不解释，只要使用过，那就肯定能实现队列和栈的数据结构。

既然队列只能头部出，尾部插入

那就是数组的shift() push()

既然栈只能 尾部插入，尾部出

那就是数组的 push() pop()

一次面试的经历

我相信数组的这四个方法，各位大帅比都会了，我们有封装更好的数组结构，还掌握队列和数组结构干什么，

但是，作为一个前端工程师，一个工程师最重要的就是数据结构，栈和队列是数据结构的基础中的基础。

这不，字节的面试官，在3月份的一个晚上，就问我，用队列实现一个栈结构。

面试官：你自己想一下栈的结构和特点，想一下栈应该具备什么方法，想一下怎么实现。

我：前端都用数组了，很少用这个结构，我有点懵逼。

面试官：对，知道前端用数组用得多，但是大学肯定学过嘛，你想一下用数组的什么方法来实现这个栈。

我：呃呃呃，我想一哈

......后面事情就不说了

通过这个事情，我总结出两点

• 字节的面试算法咩有想象得那么难
• 前提是你至少得刷一些简单的中等难度的算法题，不然可能题都读不懂

刷题

所以下面我们来点真实的，一起看两道算法题，不想看的，您可以点在赞，关闭页面了，因为算法题甚是索然无味。

题目就是这两道：

225.用队列实现栈

232.用栈实现队列

怕你么有思路，我把题目改改。

用双队列实现栈

描述

实现 MyStack 类：

void push(int x) 将元素 x 压入栈顶。

int pop() 移除并返回栈顶元素。

int top() 返回栈顶元素。

boolean empty() 如果栈是空的，返回 true ；否则，返回 false 。

思路

用数组的 shift() push() 表示队列来实现栈的 push() pop() shift() empty()

答案就在题目中

双队列，两个队列来存储栈，主队列queue1 来表示 主队列，queue2 表示 辅助队列

当入栈操作时，先把入栈元素放入辅助队列，我们先将主队列内容导入辅助队列。此时主队列空，交换辅助队列和主队列

js this.queue2.push(x) while(this.queue1.length){ this.queue2.push(this.queue1.shift()) } [this.queue1,this.queue2] = [this.queue2,this.ueue1]

pop 需要删除队列最后一个元素，执行queue1.shift()方法

top 返回栈顶元素，返回第0个元素即可

代码实现

```js var MyStack = function() { this.queue1() = [] this.queue2() = [] }

MyStack.prototype.push = function(x) { this.queue2.push(x) while (this.queue1.length) this.queue2.push(this.queue1.shift()); [queue1,queue2] = [queue2,queue1] }

MyStack.prototype.pop = function() { return this.queue1.shift(); }

MyStack.prototype.top = function() { return this.queue1[0]; }

MyStack.prototype.empty = function() { return !this.queue1.length; } ```

用双栈实现队列

描述

实现 MyQueue 类：

void push(int x) 将元素 x 推到队列的末尾

int pop() 从队列的开头移除并返回元素

int peek() 返回队列开头的元素

boolean empty() 如果队列为空，返回 true ；否则，返回 false

思路

用数组，来表示栈，用push() pop() 方法来实现

双栈，两个数组，将一个栈 stack1当作输入栈，用于压入 push 传入的数据；

另一个栈当作stack2 输出栈，用于 pop 和 peek 操作。

pop 时，先把stack1 全部倒入stack2 然后返回最后一个元素，就是队列顶部元素，此时stack1 为空了，stack2 存储了全部的元素

peek 时，先看stack2 中是否有无元素，如果有，直接返回最后一个。如果stack2 为空，则说明此时元素都在stack1中，返回第一个即可

代码实现

```js var MyQueue = function() { this.stack1 = [] this.stack2 = [] };

/** * @param {number} x * @return {void} */ MyQueue.prototype.push = function(x) { this.stack1.push(x) };

/** * @return {number} */ MyQueue.prototype.pop = function() { if(!this.stack2.length){ while(this.stack1.length){ this.stack2.push(this.stack1.pop()) } } return this.stack2.pop() };

/** * @return {number} */ MyQueue.prototype.peek = function() { if(this.stack2.length){ return this.stack2[this.stack2.length-1] }else{ return this.stack1[0]
} };

/** * @return {boolean} */ MyQueue.prototype.empty = function() { return this.stack1.length === 0 }; ```

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1micexf2qoli3