名校出品2026年度前端开发工程师独家发布冲刺训练一键下载习题含答案

名校出品2026年度前端开发工程师独家发布冲刺训练一键下载习题含答案前言本习题集由国内知名高校计算机科学与技术系联合一线互联网企业技术专家共同打造，专为2026年度前端开发工程师招聘考试冲刺训练而设计。内容覆盖前端开发核心知识点，包括HTML5、CSS3、JavaScript、主流前端框架、工程化工具、性能优化等，题型多样，难度由浅入深，旨在帮助考生系统梳理知识体系，提升实战能力，顺利通过前端开发工程师岗位考核。本习题集包含选择题、填空题、判断题、简答题、编程题和项目实践题六大题型，总计100道题目，全面考察前端开发工程师所需的专业知识和实践能力。每道题目均附有详细解析，帮助考生理解知识点，掌握解题思路。习题部分一、选择题（每题2分，共40分）1.以下关于HTML5的语义化标签说法正确的是：A.`<section>`标签用于定义文档中的节，如章节、页眉、页脚或文档中的其他部分B.`<article>`标签用于定义独立的内容，如博客文章、新闻故事、评论等C.`<nav>`标签用于定义导航链接的部分D.以上说法都正确2.在CSS3中，以下哪个属性可以实现元素的圆角效果？A.`border-radius`B.`corner-radius`C.`border-corner`D.`element-round`3.以下JavaScript代码的输出结果是：```javascriptconsole.log(typeofnull);console.log(typeofundefined);console.log(typeofNaN);console.log(typeof[]);console.log(typeof{});```A."object","undefined","number","object","object"B."null","undefined","NaN","array","object"C."object","undefined","NaN","array","object"D."object","undefined","number","array","object"4.在React中，以下哪个方法用于在组件挂载后执行副作用？A.`componentDidMount`B.`componentWillMount`C.`componentDidUpdate`D.`componentWillUnmount`5.以下关于Vue.js的说法错误的是：A.Vue.js是一个渐进式JavaScript框架B.Vue.js的核心库只关注视图层，易于与其他库或已有项目整合C.Vue.js不支持服务端渲染D.Vue.js的模板语法是HTML的扩展，允许开发者声明式地将DOM绑定至底层Vue实例的数据6.在CSS中，以下哪个选择器优先级最高？A.元素选择器B.类选择器C.ID选择器D.伪类选择器7.以下哪个HTTP状态码表示"未授权"？A.200B.401C.403D.5008.在JavaScript中，以下哪个方法可以用来深拷贝一个对象？A.`Object.assign()`B.`JSON.parse(JSON.stringify())`C.`Array.slice()`D.`Object.create()`9.以下关于闭包的说法正确的是：A.闭包是指有权访问另一个函数作用域中变量的函数B.闭包会导致内存泄漏C.闭包只能在函数内部使用D.闭包可以用来优化性能10.在HTML5中，以下哪个API可以用于本地存储数据？A.WebSQLB.IndexedDBC.LocalStorageD.以上都是11.在CSS中，以下哪个属性可以用来实现元素的弹性布局？A.`display:flex`B.`display:grid`C.`display:block`D.`display:inline`12.在ReactHooks中，以下哪个Hook用于在组件渲染后执行副作用？A.`useState`B.`useEffect`C.`useContext`D.`useReducer`13.以下哪个不是JavaScript的数据类型？A.StringB.NumberC.BooleanD.Float14.在Vue.js中，以下哪个指令用于双向数据绑定？A.`v-bind`B.`v-model`C.`v-on`D.`v-if`15.以下哪个CSS属性可以用来设置元素的过渡效果？A.`transition`B.`animation`C.`transform`D.`keyframes`16.在JavaScript中，以下哪个方法可以用来遍历数组？A.`forEach()`B.`map()`C.`filter()`D.以上都是17.以下哪个不是HTML5新增的表单输入类型？A.`email`B.`date`C.`color`D.`table`18.在React中，以下哪个方法用于在组件接收到新的props时执行？A.`componentWillReceiveProps`B.`shouldComponentUpdate`C.`componentDidUpdate`D.`getDerivedStateFromProps`19.以下关于CSS盒模型的说法正确的是：A.标准盒模型的宽度和高度只包含contentB.IE盒模型的宽度和高度包含content、padding和borderC.可以通过`box-sizing`属性切换盒模型D.以上都正确20.在JavaScript中，以下哪个方法可以用来防抖函数？A.`setTimeout()`B.`clearTimeout()`C.`lodash.debounce()`D.`setInterval()`二、填空题（每空1分，共20分）1.HTML5中用于绘制图形的元素是______，它提供了一个通过JavaScript绘制图形的画布。2.CSS3中用于创建平滑过渡效果的属性是______，它可以指定过渡效果的持续时间、速度曲线等。3.JavaScript中用于声明变量的关键字有______、______和______，其中______声明的变量具有块级作用域。4.React中用于管理组件状态的Hook是______，用于处理副作用的Hook是______。5.Vue.js中用于定义组件的选项式API有______、______和______等。6.CSS中用于设置元素浮动效果的属性是______，清除浮动的属性是______。7.HTTP协议中，GET请求和POST请求的主要区别是______和______。8.JavaScript中用于处理异步操作的现代语法是______，它比传统的回调函数更易于阅读和维护。9.在HTML5中，用于存储结构化数据的本地存储API是______，它支持更复杂的数据类型和更大的存储空间。10.CSS中用于创建动画的关键帧是使用______规则定义的，它指定了动画在不同时间点的样式。三、判断题（每题1分，共10分）1.在HTML5中，`<canvas>`元素可以用于绘制图形，但不支持文本渲染。（）2.CSS3中的`transform`属性可以改变元素的位置、大小、形状等，但不会影响布局。（）3.JavaScript中的`==`操作符在比较时会进行类型转换，而`===`操作符不会进行类型转换。（）4.在React中，`useState`Hook用于在函数组件中添加状态管理功能。（）5.Vue.js的响应式系统是通过Object.defineProperty实现的，无法检测数组索引和长度的变化。（）6.HTTP是无状态协议，意味着服务器不会保存客户端的会话信息。（）7.JavaScript中的`let`和`const`声明的变量存在变量提升现象。（）8.CSS中的`z-index`属性用于控制元素在垂直方向上的堆叠顺序，数值越大，元素显示越靠前。（）9.在JavaScript中，`Promise`对象代表一个异步操作的最终完成或失败。（）10.HTML5中的`localStorage`和`sessionStorage`都是用于客户端存储数据，但`sessionStorage`的数据在页面关闭后会被清除。（）四、简答题（每题5分，共20分）1.简述HTML5语义化标签的作用及其主要标签有哪些。2.解释JavaScript中的事件冒泡和事件捕获机制，并说明如何阻止事件冒泡。3.简述React中的虚拟DOM及其工作原理。4.解释CSS盒模型及其两种模式（标准盒模型和IE盒模型）的区别，以及如何切换盒模型。五、编程题（每题10分，共20分）1.编写一个函数，实现数组去重功能。要求：不能使用ES6的Set，且保持原始顺序。2.实现一个简单的React组件，该组件接收一个数字作为props，并显示该数字的阶乘结果。六、项目实践题（每题10分，共10分）1.设计并实现一个简单的待办事项列表应用，要求使用React框架，具有添加、删除、标记完成状态等功能，并将数据保存在浏览器的localStorage中。答案部分一、选择题答案1.答案：D解析：`<section>`、`<article>`和`<nav>`都是HTML5引入的语义化标签。`<section>`用于定义文档中的节，如章节、页眉、页脚或文档中的其他部分；`<article>`用于定义独立的内容，如博客文章、新闻故事、评论等；`<nav>`用于定义导航链接的部分。因此，所有选项都正确。2.答案：A解析：在CSS3中，`border-radius`属性用于实现元素的圆角效果。它可以设置一个或多个值来定义元素四个角的圆角半径。其他选项都不是有效的CSS属性。3.答案：A解析：在JavaScript中，`typeof`操作符返回一个字符串，表示未经计算的操作数的类型。`typeofnull`返回"object"（这是JavaScript的一个历史遗留问题）；`typeofundefined`返回"undefined"；`typeofNaN`返回"number"（NaN是一个特殊的数值，表示"不是数字"）；`typeof[]`返回"object"（数组在JavaScript中是一种特殊的对象）；`typeof{}`返回"object"（普通对象）。4.答案：A解析：在React类组件中，`componentDidMount`方法在组件挂载后立即执行，可以在这里执行副作用操作，如订阅事件、请求数据等。`componentWillMount`在组件挂载前执行，但不推荐使用；`componentDidUpdate`在组件更新后执行；`componentWillUnmount`在组件卸载前执行，用于清理工作。5.答案：C解析：Vue.js确实支持服务端渲染，通过Nuxt.js等框架可以实现。Vue.js是一个渐进式JavaScript框架，核心库只关注视图层，易于与其他库或已有项目整合；Vue.js的模板语法是HTML的扩展，允许开发者声明式地将DOM绑定至底层Vue实例的数据。因此，选项C是错误的。6.答案：C解析：在CSS中，选择器的优先级从高到低依次是：内联样式>ID选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪元素选择器>通用选择器。因此，ID选择器的优先级最高。7.答案：B解析：HTTP状态码表示请求的处理结果。200表示请求成功；401表示"未授权"，请求未经授权，需要身份验证；403表示"禁止"，服务器理解请求但拒绝执行；500表示"内部服务器错误"，服务器遇到了不知道如何处理的情况。8.答案：B解析：`JSON.parse(JSON.stringify())`是一种常见的深拷贝方法，它先将对象转换为JSON字符串，然后再解析为新的对象。`Object.assign()`用于对象的浅拷贝，只会拷贝对象自身的可枚举属性；`Array.slice()`用于数组切片，不是深拷贝方法；`Object.create()`用于创建新对象，使用现有的对象来提供新创建的对象的`__proto__`。9.答案：A解析：闭包是指有权访问另一个函数作用域中变量的函数。闭包常用于数据私有化、函数工厂等场景。闭包可能会导致内存泄漏，因为闭包会持有外部函数的引用，导致外部函数无法被垃圾回收。闭包不仅可以在函数内部使用，还可以在函数外部使用。闭包本身不会优化性能，反而可能因为作用链查找而影响性能。10.答案：D解析：WebSQL、IndexedDB和LocalStorage都是HTML5中用于本地存储数据的API。WebSQL是一个基于SQLite的数据库API，但已不再推荐使用；IndexedDB是一个事务性数据库系统，适合存储大量结构化数据；LocalStorage是一种简单的键值存储机制，适合存储小量数据。它们各有特点和适用场景。11.答案：A解析：在CSS中，`display:flex`用于创建弹性布局容器，可以轻松实现元素的排列、对齐和分布。`display:grid`用于创建网格布局；`display:block`用于块级元素；`display:inline`用于内联元素。弹性布局和网格布局都是现代CSS中强大的布局方式，但`display:flex`是专门用于弹性布局的属性。12.答案：B解析：在ReactHooks中，`useEffect`用于在组件渲染后执行副作用，如数据获取、订阅或手动修改DOM等。`useState`用于在函数组件中添加状态管理功能；`useContext`用于访问React上下文；`useReducer`用于处理复杂的状态逻辑。13.答案：D解析：JavaScript的数据类型包括：String、Number、Boolean、Undefined、Null、Object、Symbol（ES6新增）和BigInt（ES10新增）。Float不是JavaScript的独立数据类型，它是Number类型的一种。14.答案：B解析：在Vue.js中，`v-model`指令用于双向数据绑定，它可以在表单元素上创建双向数据绑定。`v-bind`用于单向数据绑定，将表达式的值绑定到元素的属性；`v-on`用于事件监听；`v-if`用于条件渲染。15.答案：A解析：在CSS中，`transition`属性用于创建平滑的过渡效果，可以指定过渡效果的属性、持续时间、速度曲线等。`animation`用于创建关键帧动画；`transform`用于对元素进行变换（如平移、旋转、缩放等）；`keyframes`用于定义动画的关键帧。16.答案：D解析：在JavaScript中，`forEach()`、`map()`和`filter()`都是用于遍历数组的方法。`forEach()`用于遍历数组，执行回调函数但不返回新数组；`map()`用于遍历数组，执行回调函数并返回新数组；`filter()`用于遍历数组，执行回调函数并返回满足条件的元素组成的新数组。17.答案：D解析：HTML5新增的表单输入类型包括`email`、`date`、`color`等，用于提供更丰富的输入体验和表单验证。`table`不是表单输入类型，而是用于定义表格的HTML元素。18.答案：A解析：在React中，`componentWillReceiveProps`方法在组件接收到新的props时执行，可以在这里更新组件的状态。`shouldComponentUpdate`用于控制组件是否重新渲染；`componentDidUpdate`在组件更新后执行；`getDerivedStateFromProps`在渲染之前调用，无论props是否改变都会调用。19.答案：D解析：CSS盒模型定义了元素如何显示以及如何相互影响。标准盒模型的宽度和高度只包含content；IE盒模型的宽度和高度包含content、padding和border；可以通过`box-sizing`属性切换盒模型，`box-sizing:content-box`表示标准盒模型，`box-sizing:border-box`表示IE盒模型。20.答案：C解析：在JavaScript中，`lodash.debounce()`是Lodash库提供的一个防抖函数，它可以将函数调用延迟一段时间，如果在这段时间内再次调用函数，则会取消之前的调用并重新计时。`setTimeout()`和`clearTimeout()`是原生JavaScript方法，可以用来实现简单的防抖功能；`setInterval()`用于设置定时器，与防抖无关。二、填空题答案1.答案：`<canvas>`解析：HTML5中的`<canvas>`元素提供了一个通过JavaScript绘制图形的画布，可以绘制图形、文本、图像等，是Web图形编程的重要工具。2.答案：`transition`解析：CSS3中的`transition`属性用于创建平滑的过渡效果，可以指定过渡效果的属性、持续时间、速度曲线等，使元素的状态变化更加自然。3.答案：`var`、`let`、`const`、`let`解析：JavaScript中用于声明变量的关键字有`var`、`let`和`const`。`var`声明的变量具有函数作用域，存在变量提升；`let`和`const`声明的变量具有块级作用域，不存在变量提升；`const`声明的变量是常量，不能重新赋值。4.答案：`useState`、`useEffect`解析：ReactHooks提供了在函数组件中使用状态和其他React特性的方法。`useState`用于在函数组件中添加状态管理功能；`useEffect`用于在组件渲染后执行副作用，如数据获取、订阅或手动修改DOM等。5.答案：`data`、`methods`、`computed`解析：Vue.js的选项式API包括多个选项，其中`data`用于定义组件的数据；`methods`用于定义组件的方法；`computed`用于定义计算属性，是基于它们的响应式依赖进行缓存的。6.答案：`float`、`clear`解析：CSS中用于设置元素浮动效果的属性是`float`，它可以取值`left`、`right`、`none`等；清除浮动的属性是`clear`，它可以取值`left`、`right`、`both`、`none`等。7.答案：请求数据的方式不同、安全性不同解析：HTTP协议中，GET请求和POST请求的主要区别包括：请求数据的方式不同（GET请求将数据附加在URL后面，POST请求将数据放在请求体中）；安全性不同（POST请求比GET请求更安全，因为数据不会显示在URL中）；数据大小限制不同（GET请求对URL长度有限制，POST请求可以发送大量数据）；缓存机制不同（GET请求可以被缓存，POST请求默认不会被缓存）。8.答案：Promise/async-await解析：JavaScript中用于处理异步操作的现代语法是Promise和async-await。Promise代表一个异步操作的最终完成或失败；async-await是基于Promise的语法糖，使异步代码看起来更像同步代码，更易于阅读和维护。9.答案：IndexedDB解析：在HTML5中，IndexedDB是一个事务性数据库系统，用于存储结构化数据。它支持更复杂的数据类型（如JavaScript对象）和更大的存储空间（通常超过250MB），适合存储大量数据。10.答案：`@keyframes`解析：在CSS中，`@keyframes`规则用于定义动画的关键帧，它指定了动画在不同时间点的样式。通过定义多个关键帧，可以创建复杂的动画效果。三、判断题答案1.答案：×解析：在HTML5中，`<canvas>`元素不仅可以绘制图形，还支持文本渲染。可以使用`fillText()`和`strokeText()`方法在画布上绘制文本。2.答案：√解析：CSS3中的`transform`属性可以改变元素的位置、大小、形状等，但它不会影响布局，因为它只改变元素的视觉呈现，而不改变文档流中的位置。3.答案：√解析：在JavaScript中，`==`操作符在比较时会进行类型转换（宽松相等），而`===`操作符不会进行类型转换（严格相等）。例如，`"5"==5`返回true，而`"5"===5`返回false。4.答案：√解析：在React中，`useState`Hook用于在函数组件中添加状态管理功能。它返回一个状态值和一个更新该状态的函数，可以在组件中使用它们来管理状态。5.答案：×解析：Vue.js的响应式系统在Vue2中是通过Object.defineProperty实现的，确实无法检测数组索引和长度的变化；但在Vue3中，响应式系统已经改为使用Proxy，可以完美支持数组索引和长度的变化。6.答案：√解析：HTTP是无状态协议，意味着服务器不会保存客户端的会话信息。每次请求都是独立的，服务器不会记住之前请求的信息。为了保持状态，可以使用Cookie、Session等技术。7.答案：×解析：在JavaScript中，`let`和`const`声明的变量不存在变量提升现象，而`var`声明的变量存在变量提升。这意味着在声明之前访问`let`和`const`变量会抛出ReferenceError，而访问`var`变量会返回undefined。8.答案：√解析：在CSS中，`z-index`属性用于控制元素在垂直方向上的堆叠顺序，数值越大，元素显示越靠前。需要注意的是，`z-index`只有在元素设置了定位属性（如`position:relative`、`position:absolute`等）时才有效。9.答案：√解析：在JavaScript中，`Promise`对象代表一个异步操作的最终完成或失败。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦状态改变，就不会再变。10.答案：√解析：在HTML5中，`localStorage`和`sessionStorage`都是用于客户端存储数据，但它们的生命周期不同。`localStorage`的数据没有过期时间，除非手动删除，否则会一直存在；`sessionStorage`的数据在页面关闭后会被清除。四、简答题答案1.答案：HTML5语义化标签的作用是提高网页的可读性和可访问性，使代码更加清晰，便于维护和SEO优化。语义化标签明确地告诉浏览器和开发者每个部分的用途，有助于屏幕阅读器等辅助技术理解网页结构，提高网站的可访问性。HTML5主要语义化标签包括：-`<header>`：定义文档或节的页眉，通常包含导航、标题等-`<nav>`：定义导航链接的部分-`<section>`：定义文档中的节，如章节、页眉、页脚或文档中的其他部分-`<article>`：定义独立的内容，如博客文章、新闻故事、评论等-`<aside>`：定义页面内容之外的内容，如侧边栏、相关链接等-`<footer>`：定义文档或节的页脚，通常包含版权信息、联系方式等-`<main>`：定义文档的主要内容，每个文档只能有一个`<main>`元素-`<figure>`和`<figcaption>`：用于表示带标题的图片、图表等-`<mark>`：定义有标记/highlight的文本-`<time>`：定义日期/时间-`<details>`和`<summary>`：用于描述文档的细节，可以点击展开/折叠2.答案：JavaScript中的事件冒泡和事件捕获是两种事件传播机制：事件捕获：事件从最外层元素开始向内传播，直到目标元素。例如，点击一个按钮，事件会先从document开始，逐层向下传播到按钮元素。事件冒泡：事件从目标元素开始向外传播，直到最外层元素。例如，点击一个按钮，事件会从按钮元素开始，逐层向上传播到document。在现代浏览器中，事件的完整传播过程包括三个阶段：1.捕获阶段：事件从window对象开始，逐级向下传播到目标元素2.目标阶段：事件到达目标元素3.冒泡阶段：事件从目标元素开始，逐级向上传播到window对象阻止事件冒泡的方法：-在事件处理函数中调用`event.stopPropagation()`方法-对于IE8及以下版本，可以使用`event.cancelBubble=true`例如：```javascriptdocument.getElementById('myButton').addEventListener('click',function(event){event.stopPropagation();//阻止事件冒泡//处理点击事件});```3.答案：虚拟DOM是React中的一个核心概念，它是一个轻量级的JavaScript对象，是真实DOM的抽象表示。虚拟DOM的工作原理如下：1.创建：当组件的状态或props发生变化时，React会创建一个新的虚拟DOM树来表示更新后的UI。2.比较：React使用"diffing"算法比较新旧两个虚拟DOM树，找出它们之间的差异。3.更新：React将找出的差异以最小化操作的方式应用到真实DOM上，只更新需要变化的部分，而不是重新渲染整个DOM。虚拟DOM的优势：-提高性能：通过减少直接操作DOM的次数，提高渲染性能-跨平台：虚拟DOM可以在不同平台上运行，如Web、ReactNative等-简化开发：开发者只需要关注状态变化，而不需要手动操作DOM4.答案：CSS盒模型是用于描述HTML元素如何显示以及如何相互影响的一个模型。每个元素都被表示为一个矩形的盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒模型有两种模式：-标准盒模型（W3C盒模型）：元素的宽度和高度只包含content，不包括padding和border。-IE盒模型（怪异盒模型）：元素的宽度和高度包含content、padding和border。区别：在标准盒模型中，设置元素的宽度和高度只影响content部分；而在IE盒模型中，设置元素的宽度和高度会影响整个盒子，包括content、padding和border。切换盒模型的方法：通过设置`box-sizing`属性。`box-sizing:content-box`表示标准盒模型（默认值），`box-sizing:border-box`表示IE盒模型。例如：```css.standard-box{box-sizing:content-box;/标准盒模型/width:200px;padding:10px;border:1pxsolidblack;/实际占用的宽度为200+102+12=222px/}.ie-box{box-sizing:border-box;/IE盒模型/width:200px;padding:10px;border:1pxsolidblack;/实际占用的宽度为200px/}```在现代前端开发中，通常推荐使用`box-sizing:border-box`，因为它更符合直觉，计算元素尺寸更加方便。五、编程题答案1.答案：```javascriptfunctionremoveDuplicates(arr){constresult=[];constseen={};for(leti=0;i<arr.length;i++){constitem=arr[i];if(!seen[item]){seen[item]=true;result.push(item);}}returnresult;}//测试console.log(removeDuplicates([1,2,2,3,4,4,5]));//[1,2,3,4,5]console.log(removeDuplicates(['a','b','a','c','b']));//['a','b','c']console.log(removeDuplicates([{a:1},{a:2},{a:1}]));//[{a:1},{a:2}]```解析：这个函数实现了一个数组去重的功能，保持原始顺序。它使用了一个对象`seen`来记录已经出现过的元素，遍历数组时，如果元素没有在`seen`中出现过，就将其添加到结果数组中，并标记为已出现。对于对象类型的元素，这种方法可能无法正确识别重复的对象，因为对象比较的是引用而不是值。如果需要处理对象数组，可以使用其他方法，如JSON.stringify：```javascriptfunctionremoveDuplicates(arr){constresult=[];constseen={};for(leti=0;i<arr.length;i++){constitem=arr[i];constkey=typeofitem==='object'?JSON.stringify(item):item;if(!seen[key]){seen[key]=true;result.push(item);}}returnresult;}```2.答案：```jsximportReact,{useState,useEffect}from'react';functionFactorialCalculator({number}){const[factorial,setFactorial]=useState(1);useEffect(()=>{if(number>=0){letresult=1;for(leti=1;i<=number;i++){result=i;}setFactorial(result);}else{setFactorial('NaN');}},[number]);return(<div><p>Thefactorialof{number}is:{factorial}</p></div>);}//使用示例functionApp(){const[inputValue,setInputValue]=useState(5);return(<div><inputtype="number"value={inputValue}onChange={(e)=>setInputValue(parseInt(e.target.value)||0)}/><FactorialCalculatornumber={inputValue}/></div>);}```解析：这个React组件实现了一个阶乘计算器。它接收一个数字作为props，并显示该数字的阶乘结果。组件使用了`useState`来管理阶乘结果，使用`useEffect`来在props变化时重新计算阶乘。计算阶乘的函数使用循环来实现，从1乘到输入的数字。组件还包含一个简单的输入框，允许用户输入数字，并将输入的数字传递给`FactorialCalculator`组件。注意：这个实现没有处理负数的情况，在实际应用中可能需要添加更多的错误处理和边界条件检查。六、项目实践题答案1.答案：```jsximportReact,{useState,useEffect}from'react';functionTodoApp(){//状态管理const[todos,setTodos]=useState([]);const[newTodo,setNewTodo]=useState('');//从localStorage加载数据useEffect(()=>{conststoredTodos=localStorage.getItem('todos');if(storedTodos){setTodos(JSON.parse(storedTodos));}},[]);//保存数据到localStorageuseEffect(()=>{localStorage.setItem('todos',JSON.stringify(todos));},[todos]);//添加新待办事项constaddTodo=()=>{if(newTodo.trim()!==''){constnewTodoItem={id:Date.now(),text:newTodo,completed:false};setTodos([...todos,newTodoItem]);setNewTodo('');}};//删除待办事项constdeleteTodo=(id)=>{setTodos(todos.filter(todo=>todo.id!==id));};//切换完成状态consttoggleTodo=(id)=>{setTodos(todos.map(todo=>todo.id===id?{...todo,completed:!pleted}:todo));};return(<divclassName="todo-app"><h1>TodoList</h1><divclassName="input-container"><inputtype="text"value={newTodo}onChange={(e)=>setNewTodo(e.target.value)}placeholder="Addanewtodo"/><buttononClick={addTodo}>Add</button></div><ulclassName="todo-list">{todos.map(todo=>(<li