python之数据结构与算法(数据结构篇)—— 线性表
由于博主之前在”数据结构与算法“上踩了很多坑,发现大多教”数据结构与算法“的书籍都是教概念,很容易半知半解的,特此写这个系列。使用python代码和Java Scriopt代码+HTML可视化动画帮助大家去理解这些枯燥的概念!!!
一、线性表的概念
假设你有一个书架,书架上可以放多本书,每本书都按照一定的顺序排列。这个书架就是一个简单的线性表模型:
-
你可以把书一本一本放在书架上。
-
你可以从书架上取走一本书。
-
你可以知道书架上有多少本书。
-
你可以找到特定位置的书。
-
你可以根据书名查找书的位置。
二、python代码实现思路
- 初始化:创建一个空列表来存储书籍。
- 添加书籍:向列表中添加新的书籍。
- 删除书籍:从列表中删除指定的书籍。
- 查找书籍:在列表中查找特定的书籍。
- 显示所有书籍:打印当前列表中的所有书籍。
三、python实现
class Bookshelf:
def __init__(self):
# 初始化一个空的书籍列表
self.books = []
def add_book(self, title):
# 向书籍列表中添加新书
self.books.append(title)
print(f"Added book: {title}")
def remove_book(self, title):
# 从书籍列表中移除指定的书
if title in self.books:
self.books.remove(title)
print(f"Removed book: {title}")
else:
print(f"Book not found: {title}")
def find_book(self, title):
# 查找书籍并返回其索引,如果找不到则返回-1
try:
index = self.books.index(title)
print(f"Found book '{title}' at index {index}")
return index
except ValueError:
print(f"Book not found: {title}")
return -1
def display_books(self):
# 显示当前书籍列表
if self.books:
print("Current books in the shelf:")
for i, book in enumerate(self.books):
print(f"{i}: {book}")
else:
print("The bookshelf is empty.")
# 创建一个Bookshelf对象
bookshelf = Bookshelf()
# 添加一些书籍
bookshelf.add_book("Python Programming")
bookshelf.add_book("Data Structures and Algorithms")
bookshelf.add_book("Web Development with JavaScript")
# 显示所有书籍
bookshelf.display_books()
# 查找一本书
bookshelf.find_book("Data Structures and Algorithms")
# 删除一本书
bookshelf.remove_book("Web Development with JavaScript")
# 再次显示所有书籍
bookshelf.display_books()
四、python代码解释
-
类定义:
Bookshelf
类用于封装书籍管理的功能。__init__
方法初始化一个空的书籍列表self.books
。
-
添加书籍:
add_book
方法接受一个书名title
,并将其添加到self.books
列表中。- 打印一条消息表示书籍已添加。
-
删除书籍:
remove_book
方法接受一个书名title
,检查该书是否存在于self.books
中。- 如果存在,则移除该书并打印一条消息;如果不存在,则打印一条错误消息。
-
查找书籍:
find_book
方法接受一个书名title
,尝试找到该书在self.books
中的索引。- 如果找到,则打印索引并返回索引值;如果未找到,则打印错误消息并返回
-1
。
-
显示所有书籍:
display_books
方法遍历self.books
列表,并打印每本书及其索引。- 如果列表为空,则打印一条消息表示书架是空的。
使用示例
- 创建一个
Bookshelf
对象。 - 添加几本书。
- 显示当前的书籍列表。
- 查找并删除一本书。
- 再次显示书籍列表以确认变化。
五、HTML可视化加深理解线性表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linear List Example - Bookshelf</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#bookList {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
min-height: 100px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bookItem {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 5px 10px;
margin: 5px 0;
transition: all 0.5s ease;
}
.added { animation: fadeIn 0.5s; }
.removed { animation: fadeOut 0.5s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
</style>
</head>
<body>
<h1>Bookshelf (Linear List)</h1>
<div id="controls">
<input type="text" id="newBook" placeholder="Enter book title">
<button onclick="addBook()">Add Book</button>
<button onclick="removeLastBook()">Remove Last Book</button>
</div>
<div id="bookList"></div>
<script>
const books = [];
const listContainer = document.getElementById('bookList');
function addBook() {
const newBookTitle = document.getElementById('newBook').value.trim();
if (newBookTitle) {
const listItem = document.createElement('div');
listItem.className = 'bookItem added';
listItem.textContent = newBookTitle;
setTimeout(() => {
listItem.classList.remove('added'); // 移除动画类
}, 500);
listContainer.appendChild(listItem);
books.push(newBookTitle);
document.getElementById('newBook').value = ''; // 清空输入框
}
}
function removeLastBook() {
if (books.length > 0) {
const lastBook = listContainer.lastChild;
lastBook.classList.add('removed');
setTimeout(() => {
listContainer.removeChild(lastBook);
}, 500);
books.pop();
}
}
</script>
</body>
</html>
解释
-
HTML结构:
- 页面有一个标题
<h1>
。 - 一个包含输入框和两个按钮(用于添加和删除书籍)的控制区域
<div id="controls">
。 - 一个用于显示书籍列表的容器
<div id="bookList">
。
- 页面有一个标题
-
CSS样式:
- 设置了基本的字体和边距。
- 定义了书籍项的基本样式和动画效果。
fadeIn
和fadeOut
动画分别用于新添加项的淡入和移除项的淡出。
-
JavaScript逻辑:
addBook
函数读取用户输入的新书名,并将其添加到books
数组和DOM中的#bookList
容器里。removeLastBook
函数从books
数组和DOM中移除最后一本书。- 使用
setTimeout
来控制动画结束后才真正移除DOM元素或移除动画类。