待办事项列表的核心是状态与UI同步：状态统一存于todos数组，增删改操作均返回新数组，render函数负责重绘UI，事件委托处理动态元素。
用 JavaScript 实现待办事项列表，核心是让数据（状态）和界面（UI）保持同步：添加、完成、删除任务时，既要更新内部数组，又要实时反映在页面上。关键不在写多少代码，而在理清“状态在哪”“谁负责更新”“怎么触发重绘”。
状态统一存放在一个数组里
别把任务散落在 DOM 节点的属性或多个变量中。用一个干净的数组（比如 todos）集中管理所有任务对象：
let todos = [ { id: 1, text: '买牛奶', completed: false }, { id: 2, text: '回邮件', completed: true }];
每个任务带 id（方便精准定位）、text（内容）、completed（完成状态）。增删改都只操作这个数组，不碰 DOM。
用函数封装 UI 渲染逻辑
写一个 render() 函数，它读取当前 todos 数组，清空容器，再遍历生成所有任务的 HTML 并插入：
立即学习“Java免费学习笔记（深入）”；
function render() { const listEl = document.getElementById('todo-list'); listEl.innerHTML = todos.map(todo => ` 每次状态变化后调用 render()，UI 就自动更新。不用手动找节点改文字或加 class —— 整个列表“重画”更可靠。
事件委托处理动态元素
新添加的任务，其复选框和删除按钮是后来生成的，直接绑事件会失效。用事件委托，在父容器（如 #todo-list）监听，再判断目标：
document.getElementById('todo-list').addEventListener('click', e => { const li = e.target.closest('li'); if (!li) return; const id = Number(li.dataset.id); if (e.target.classList.contains('delete')) { todos = todos.filter(todo => todo.id !== id); } else if (e.target.type === 'checkbox') { todos = todos.map(todo => todo.id === id ? { ...todo, completed: e.target.checked } : todo ); } render(); // 状态变了，立刻重绘});
添加任务也一样：输入框 + 按钮触发，push 新对象进 todos，再调 render()。
避免直接修改原数组，优先用不可变方式
用 filter、map、concat 等返回新数组的方法，而不是 push、splice 原地修改。这样能减少意外副作用，也方便未来接入 React 或 Vue 的响应机制：
添加：todos = […todos, { id: nextId++, text: input.value, completed: false }]; 切换完成：todos = todos.map(t => t.id === id ? {…t, completed: !t.completed} : t); 删除：todos = todos.filter(t => t.id !== id);
基本上就这些。状态管住、渲染包圆、事件兜底，待办列表就稳了。
以上就是如何用JavaScript实现一个待办事项列表_如何管理状态和更新UI？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542900.html
微信扫一扫 
支付宝扫一扫 
