今天用前面兩週學到的知識練習做一個的待辦清單
這個小專案先不用HTML和CSS,專注在JS陣列、物件與函式操作
目標:
1.新增一個待辦事項
2.列出所有待辦
3.標記待辦為已完成
4.刪除待辦
我們用一個陣列存放待辦物件,每個物件包含:
id:唯一編號
text:待辦內容
done:是否完成(true/false)
1.基本資料結構
let todos = [
{ id: 1, text: '寫第14天稿子', done: false },
{ id: 2, text: '買咖啡', done: true }
];
2. 新增待辦
function addTodo(text) {
const id = todos.length ? todos[todos.length - 1].id + 1 : 1;
todos.push({ id, text, done: false });
}
3. 顯示待辦清單
function listTodos() {
console.log('待辦清單:');
todos.forEach(todo => {
console.log(`[${todo.done ? '✔' : ' '}] ${todo.id}: ${todo.text}`);
});
}
4.標記完成
function toggleDone(id) {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.done = !todo.done;
}
}
5.刪除待辦
function removeTodo(id) {
todos = todos.filter(t => t.id !== id);
}
6.測試一下
addTodo('學 JavaScript');
addTodo('寫待辦清單專案');
listTodos();
toggleDone(1);
listTodos();
removeTodo(2);
listTodos();