一、栈的概念
这里我们不去了解教科书上面的“教条概念”,其实“栈”的概念和古代的时候的“客栈”是有异曲同工之妙的。
在这里我们把客栈看成“栈”,旅客看作“栈元素”
1.当旅客进来住店时,叫做“入栈”;
2.当旅客退房时,叫做“出栈”;
3.当客栈里面都住满了旅客时,叫做“栈满”;
4.当客栈里面一个旅客也没有的时候,叫做“栈空”;
这里我们去创建一个“羊村栈”,去进行操作演示整个过程,以别于更好理解
二、栈实现思路
1.初始化一个空列表用于存储“羊村栈”
class sheep_village_stack:
def __init__(self):
self.sheep = [] # 初始化一个空列表用于存储“羊村栈”
2.检查栈是否为空
def is_empty(self):
return len(self.sheep) == 0 # 检查栈是否为空
3.添加一只羊到栈顶
def push(self, sheep):
self.sheep.append(sheep) # 添加一只羊到栈顶
4.移除并返回栈顶的羊
def pop(self):
if not self.is_empty():
return self.sheep.pop() # 移除并返回栈顶的羊
5.如果栈为空,则抛出异常
else:
raise IndexError("羊村小栈为空") # 如果栈为空,则抛出异常
6.返回栈顶的羊,但不移除它
def peek(self):
if not self.is_empty():
return self.sheep[-1] # 返回栈顶的羊,但不移除它
7.如果栈为空,则抛出异常
else:
raise IndexError("羊村小栈为空") # 如果栈为空,则抛出异常
8.返回栈中羊的数量
def size(self):
return len(self.sheep) # 返回栈中羊的数量
9.创建一个羊村小栈实例
# 创建一个羊村小栈实例
stack = sheep_village_stack()
10.加入喜羊羊、美羊羊、慢羊羊
# 加入喜羊羊、美羊羊、慢羊羊
stack.push('喜羊羊')
stack.push('美羊羊')
stack.push('慢羊羊')
11.输出当前栈的大小
# 输出当前栈的大小
print("当前栈的大小:", stack.size()) # 应输出 3
12.查看栈顶的羊
# 查看栈顶的羊
print("栈顶的羊是:", stack.peek()) # 应输出 '慢羊羊'
13.出栈操作
# 出栈操作
print("出栈的羊是:", stack.pop()) # 应输出 '慢羊羊'
print("出栈的羊是:", stack.pop()) # 应输出 '美羊羊'
14.再次查看栈顶的羊
# 再次查看栈顶的羊
print("现在栈顶的羊是:", stack.peek()) # 应输出 '喜羊羊'
15.最后出栈
# 最后出栈
print("最后出栈的羊是:", stack.pop()) # 应输出 '喜羊羊'
16.尝试从空栈中出栈
# 尝试从空栈中出栈
try:
print(stack.pop())
except IndexError as e:
print(e) # 应输出 "羊村小栈为空"
三、python代码实现
class sheep_village_stack:
def __init__(self):
self.sheep = [] # 初始化一个空列表用于存储“羊村栈”
def is_empty(self):
return len(self.sheep) == 0 # 检查栈是否为空
def push(self, sheep):
self.sheep.append(sheep) # 添加一只羊到栈顶
def pop(self):
if not self.is_empty():
return self.sheep.pop() # 移除并返回栈顶的羊
else:
raise IndexError("羊村小栈为空") # 如果栈为空,则抛出异常
def peek(self):
if not self.is_empty():
return self.sheep[-1] # 返回栈顶的羊,但不移除它
else:
raise IndexError("羊村小栈为空") # 如果栈为空,则抛出异常
def size(self):
return len(self.sheep) # 返回栈中羊的数量
# 创建一个羊村小栈实例
stack = sheep_village_stack()
# 加入喜羊羊、美羊羊、慢羊羊
stack.push('喜羊羊')
stack.push('美羊羊')
stack.push('慢羊羊')
# 输出当前栈的大小
print("当前栈的大小:", stack.size()) # 应输出 3
# 查看栈顶的羊
print("栈顶的羊是:", stack.peek()) # 应输出 '慢羊羊'
# 出栈操作
print("出栈的羊是:", stack.pop()) # 应输出 '慢羊羊'
print("出栈的羊是:", stack.pop()) # 应输出 '美羊羊'
# 再次查看栈顶的羊
print("现在栈顶的羊是:", stack.peek()) # 应输出 '喜羊羊'
# 最后出栈
print("最后出栈的羊是:", stack.pop()) # 应输出 '喜羊羊'
# 尝试从空栈中出栈
try:
print(stack.pop())
except IndexError as e:
print(e) # 应输出 "羊村小栈为空"
四、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="stackSelect">选择要入栈的角色:</label>
<select id="stackSelect">
<option value="喜羊羊">喜羊羊</option>
<option value="美羊羊">美羊羊</option>
<option value="沸羊羊">沸羊羊</option>
<option value="懒羊羊">懒羊羊</option>
<option value="暖羊羊">暖羊羊</option>
</select>
<button onclick="push()">入栈 (Push)</button>
</div>
<div class="input-group">
<button onclick="pop()">出栈 (Pop)</button>
</div>
<div class="input-group">
<button onclick="peek()">查看栈顶 (Peek)</button>
</div>
<div class="result-group">
<h3>当前栈的状态</h3>
<ul id="stackDisplay"></ul>
</div>
</div>
<script>
// 初始化栈
let stack = [];
// 更新栈显示
function updateStackDisplay() {
const stackDisplay = document.getElementById('stackDisplay');
stackDisplay.innerHTML = '';
for (let i = stack.length - 1; i >= 0; i--) {
const li = document.createElement('li');
li.textContent = stack[i];
stackDisplay.appendChild(li);
}
}
// 入栈操作
function push() {
const value = document.getElementById('stackSelect').value;
if (value) {
stack.push(value);
updateStackDisplay();
} else {
alert("请选择一个角色");
}
}
// 出栈操作
function pop() {
if (stack.length > 0) {
stack.pop();
updateStackDisplay();
} else {
alert("栈为空,无法出栈");
}
}
// 查看栈顶操作
function peek() {
if (stack.length > 0) {
alert(`栈顶元素是: ${stack[stack.length - 1]}`);
} else {
alert("栈为空,没有栈顶元素");
}
}
</script>
</body>
</html>