百度前端技术学园

# 队列和栈

# 课程目标

学习使用数组编写队列和栈这两种数据结构

# 阅读

# 编码一

练习如何使用数组来实现队列，综合考虑使用数组的 push、pop、shift、unshift 操作

<input id="queue-input" type="text" />
<p id="queue-cont">队列内容：apple-&gt;pear</p>
<button id="in-btn">入队</button>
<button id="out-btn">出队</button>
<button id="font-btn">打印队头元素内容</button>
<button id="empty-btn">判断队列是否为空</button>

<script>
  var queue = ["apple", "pear"];
</script>

基于以上代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关入队、出队、获取队头、判空的操作
  • 队头对应数组中最后一个元素
  • 入队和出队操作后，需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容，队头在最右侧，中间用 -> 连接（练习使用数组的 join 方法）

# 编码二

对上面练习稍作小调整：

<input id="queue-input" type="text" />
<p id="queue-cont">队列内容：apple&lt;-pear</p>
<button id="in-btn">入队</button>
<button id="out-btn">出队</button>
<button id="font-btn">打印队头元素内容</button>
<button id="empty-btn">判断队列是否为空</button>

<script>
  var queue = ["apple", "pear"];
</script>

基于以上代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关入队、出队、获取队头、判空的操作
  • 队头对应数组中第一个元素
  • 入队和出队操作后，需要在 id 为 queue-cont 的 p 标签中更新显示队列中的内容，队头在最左侧，中间用 <- 连接（练习使用数组的 join 方法）

# 编码三

练习如何使用数组来实现栈，综合考虑使用数组的 push、pop、shift、unshift 操作

<input id="stack-input" type="text" />
<p id="stack-cont">栈内容：apple-gt;pear</p>
<button id="push-btn">进栈</button>
<button id="pop-btn">退栈</button>
<button id="font-btn">打印栈顶元素内容</button>
<button id="empty-btn">判断栈是否为空</button>

<script>
  var stack = ["apple", "pear"];
</script>

基于以上代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中最后一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最右侧，中间用 -> 连接（练习使用数组的 join 方法）

# 编码四

对上面练习进行小调整

<input id="stack-input" type="text" />
<p id="stack-cont">栈内容：applelt;-pear</p>
<button id="push-btn">进栈</button>
<button id="pop-btn">退栈</button>
<button id="font-btn">打印栈顶元素内容</button>
<button id="empty-btn">判断栈是否为空</button>

<script>
  var stack = ["apple", "pear"];
</script>

基于以上代码，实现如按钮中描述的功能：

  • 实现如阅读材料中，队列的相关进栈、退栈、获取栈顶、判空的操作
  • 栈顶对应数组中第一个元素
  • 进栈和退栈操作后，需要在 id 为 stack-cont 的 p 标签中更新显示栈中的内容，栈顶在最左侧，中间用 <- 连接（练习使用数组的 join 方法）

# 进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

# 提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

# 总结

依然把今天的学习用时，收获，问题进行记录。

← JavaScript 排序算法 →