一、队列的概念
1.“队列”这个概念,其实可能我们在进行排队的时候是差不多的。
2.例如,在结账时,顾客按照到达顺序排队等待付款,这是现实生活中的一个队列示例。同样地,在计算机程序中,当多个任务需要按顺序处理时,可以使用队列来管理这些任务,确保它们按照进入队列的顺序被执行。
二、队列的实现思路
我们这里去让羊村的小羊们排队放学直观地实现“队列”
1. 创建一个“小羊队列”
class SheepQueue: # 创建“小羊队列”def __init__(self):self.sheeps = [] # 初始化空队列
2.判断“小羊队列”为空
# 判断队列是否为空def is_empty(self):return len(self.sheeps) == 0
3.向队列中添加小羊
# 向队列中添加小羊def enqueue(self, sheep):self.sheeps.append(sheep)
4.从队列中移除并返回第一只小羊
# 从队列中移除并返回第一只小羊def dequeue(self):if not self.is_empty():return self.sheeps.pop(0)else:raise IndexError("dequeue from empty queue")
5.返回队列中的第一只小羊但不移除它
# 返回队列中的第一只小羊但不移除它def peek(self):if not self.is_empty():return self.sheeps[0]else:raise IndexError("peek from empty queue")
6.返回队列中小羊的数量
# 返回队列中小羊的数量def size(self):return len(self.sheeps)
7.创建一个小羊队列
sheep_queue = SheepQueue()
8.添加一些小羊
# 添加一些小羊
sheep_queue.enqueue("喜羊羊")
sheep_queue.enqueue("美羊羊")
sheep_queue.enqueue("懒羊羊")
sheep_queue.enqueue("沸羊羊")
9.输出队列信息
# 输出队列信息
print("队列是否为空:", sheep_queue.is_empty()) # False
print("队列大小:", sheep_queue.size()) # 4
print("队首的小羊:", sheep_queue.peek()) # 喜羊羊
10.移除并输出队首的小羊
# 移除并输出队首的小羊
print("移除的小羊:", sheep_queue.dequeue()) # 喜羊羊
print("队列大小:", sheep_queue.size()) # 3
print("新的队首小羊:", sheep_queue.peek()) # 美羊羊
三、完整的Python代码实现
class SheepQueue: # 创建“小羊队列”def __init__(self):self.sheeps = [] # 初始化空队列# 判断队列是否为空def is_empty(self):return len(self.sheeps) == 0# 向队列中添加小羊def enqueue(self, sheep):self.sheeps.append(sheep)# 从队列中移除并返回第一只小羊def dequeue(self):if not self.is_empty():return self.sheeps.pop(0)else:raise IndexError("dequeue from empty queue")# 返回队列中的第一只小羊但不移除它def peek(self):if not self.is_empty():return self.sheeps[0]else:raise IndexError("peek from empty queue")# 返回队列中小羊的数量def size(self):return len(self.sheeps)# 创建一个小羊队列
sheep_queue = SheepQueue()# 添加一些小羊
sheep_queue.enqueue("喜羊羊")
sheep_queue.enqueue("美羊羊")
sheep_queue.enqueue("懒羊羊")
sheep_queue.enqueue("沸羊羊")# 输出队列信息
print("队列是否为空:", sheep_queue.is_empty()) # False
print("队列大小:", sheep_queue.size()) # 4
print("队首的小羊:", sheep_queue.peek()) # 喜羊羊# 移除并输出队首的小羊
print("移除的小羊:", sheep_queue.dequeue()) # 喜羊羊
print("队列大小:", sheep_queue.size()) # 3
print("新的队首小羊:", sheep_queue.peek()) # 美羊羊
四、HYTML可视化实现
效果展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>羊村角色队列的可视化</title>
<style>body {font-family: Arial, sans-serif;margin: 20px;text-align: center;}.container {max-width: 600px;margin: 0 auto;text-align: left;}.input-group {margin-bottom: 20px;}.input-group label {display: block;margin-bottom: 5px;}.input-group select {width: 100%;padding: 10px;font-size: 16px;}.input-group button {padding: 10px 20px;font-size: 16px;cursor: pointer;}.result-group {border: 2px solid #ccc;padding: 15px;background-color: #f9f9f9;}.result-item {margin-bottom: 10px;}
</style>
</head>
<body>
<h1>羊村角色队列的可视化</h1><div class="container"><div class="input-group"><label for="queueSelect">选择要入队的角色:</label><select id="queueSelect"><option value="喜羊羊">喜羊羊</option><option value="美羊羊">美羊羊</option><option value="沸羊羊">沸羊羊</option><option value="懒羊羊">懒羊羊</option><option value="暖羊羊">暖羊羊</option></select><button onclick="enqueue()">入队 (Enqueue)</button></div><div class="input-group"><button onclick="dequeue()">出队 (Dequeue)</button></div><div class="input-group"><button onclick="peek()">查看队首 (Peek)</button></div><div class="result-group"><h3>当前队列的状态</h3><ul id="queueDisplay"></ul></div>
</div><script>
// 初始化队列
let queue = [];// 更新队列显示
function updateQueueDisplay() {const queueDisplay = document.getElementById('queueDisplay');queueDisplay.innerHTML = '';for (let i = 0; i < queue.length; i++) {const li = document.createElement('li');li.textContent = queue[i];queueDisplay.appendChild(li);}
}// 入队操作
function enqueue() {const value = document.getElementById('queueSelect').value;if (value) {queue.push(value);updateQueueDisplay();} else {alert("请选择一个角色");}
}// 出队操作
function dequeue() {if (queue.length > 0) {queue.shift(); // 移除队列的第一个元素updateQueueDisplay();} else {alert("队列为空,无法出队");}
}// 查看队首操作
function peek() {if (queue.length > 0) {alert(`队首元素是: ${queue[0]}`);} else {alert("队列为空,没有队首元素");}
}
</script></body>
</html>