iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0

今天用前面兩週學到的知識練習做一個的待辦清單
這個小專案先不用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();

上一篇
Day13:this與 bind / call / apply
系列文
30天入門Java Script14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言