WEB前端教程：队列和栈

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

课程目标

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

阅读

编码一

练习如何使用数组来实现队列，综合考虑使用数组的 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 后进行提交。

总结

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-02 14:48
阅读 ( 382 )
分类：WEB前端开发

WEB前端教程：队列和栈

课程目标

阅读

编码一

编码二

编码三

编码四

进阶任务

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »