WEB前端教程：队列和栈
学习使用数组编写队列和栈这两种数据结构
课程目标
学习使用数组编写队列和栈这两种数据结构
阅读
- MDN 数组(opens new window)
- JavaScript Array（数组） 对象(opens new window)
- 队列(opens new window)
- 栈(opens new window)
编码一
练习如何使用数组来实现队列，综合考虑使用数组的 push、pop、shift、unshift 操作
<input id="queue-input" type="text" /> <p id="queue-cont">队列内容：apple->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<-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
- 阅读 ( 552 )
- 分类：WEB前端开发
