2026年4年前端面试题及答案

2026年4年前端面试题及答案

一、单项选择题（总共10题，每题2分）1.下列哪个不是JavaScript的基本数据类型？A.stringB.numberC.booleanD.array2.在CSS中，以下哪个属性用于设置元素的外边距？A.paddingB.marginC.borderD.spacing3.关于ReactHooks，以下说法错误的是？A.Hooks只能在函数组件中使用B.useState用于在函数组件中添加状态C.useEffect可以模拟componentDidMount生命周期D.Hooks可以替代Redux进行状态管理4.以下哪个HTTP状态码表示“资源未找到”？A.200B.301C.404D.5005.关于Vue.js中的计算属性（computed）和侦听器（watch），以下描述正确的是？A.计算属性适合执行异步操作B.侦听器适合基于依赖关系缓存结果C.计算属性默认有缓存机制D.侦听器在组件初始化时立即执行6.下列哪个方法可以向数组末尾添加一个或多个元素？A.push()B.pop()C.shift()D.unshift()7.关于Webpack，以下说法正确的是？A.Webpack只能打包JavaScript文件B.Loader用于转换非JavaScript模块C.Plugin用于执行更复杂的任务，如优化D.Entry指定了打包的起始文件8.以下哪个不是HTML5新增的语义化标签？A.<section>B.<article>C.<div>D.<nav>9.关于Promise，以下描述错误的是？A.Promise有三种状态：pending、fulfilled、rejectedB.then()方法用于处理Promise的成功结果C.catch()方法用于处理Promise的失败结果D.Promise一旦创建就会立即执行10.在ES6中，以下哪个关键字用于声明一个常量？A.varB.letC.constD.static二、填空题（总共10题，每题2分）1.在JavaScript中，使用__________关键字可以声明一个块级作用域的变量。2.CSS3中，__________属性用于创建元素过渡动画效果。3.React中，__________用于在组件之间传递数据，避免逐层传递。4.HTTP协议中，GET和__________是两种常见的请求方法。5.Vue.js中，__________指令用于将数据绑定到元素的属性上。6.在Node.js中，__________模块用于处理文件系统操作。7.浏览器的事件循环机制中，__________队列用于存放宏任务。8.在TypeScript中，__________关键字用于定义接口。9.前端性能优化中，__________技术可以减少HTTP请求次数。10.在ES6中，__________语法可以方便地从数组或对象中提取数据。三、判断题（总共10题，每题2分）1.JavaScript是一门单线程语言。（）2.CSS的盒模型包括内容、内边距、边框和外边距。（）3.React中的虚拟DOM可以提高页面渲染性能。（）4.Vue.js和Angular都是基于MVVM模式的前端框架。（）5.localStorage存储的数据在浏览器关闭后会自动清除。（）6.WebSocket协议可以实现服务器主动向客户端推送消息。（）7.Babel是一个JavaScript编译器，主要用于将ES6+代码转换为ES5代码。（）8.在CSS中，z-index属性只对定位元素（position不为static）有效。（）9.JavaScript中的事件冒泡是指事件从目标元素向上传播到文档根节点。（）10.TypeScript是JavaScript的超集，增加了静态类型检查。（）四、简答题（总共4题，每题5分）1.请简述什么是跨域问题，以及常见的解决方案。2.请解释React中的虚拟DOM是如何工作的。3.请描述CSS中的BFC（块级格式化上下文）及其作用。4.请说明前端工程化主要包括哪些内容。五、讨论题（总共4题，每题5分）1.请比较React、Vue和Angular三大框架的优缺点。2.如何优化前端项目的性能？请从多个角度阐述。3.请讨论微前端架构的优势和挑战。4.在前端开发中，如何保证代码的可维护性和可扩展性？答案和解析一、单项选择题1.D。array是引用类型，不是基本数据类型。2.B。margin用于设置外边距。3.D。Hooks不能完全替代Redux，复杂状态管理仍需Redux等工具。4.C。404表示资源未找到。5.C。计算属性基于依赖关系缓存结果。6.A。push()向数组末尾添加元素。7.B、C、D均正确，但A错误，Webpack可打包多种资源。8.C。<div>是通用容器，非HTML5新增。9.D。Promise创建后不会立即执行，需调用then()或catch()。10.C。const用于声明常量。二、填空题1.let2.transition3.Context4.POST5.v-bind6.fs7.TaskQueue8.interface9.文件合并/雪碧图等10.解构赋值三、判断题1.对2.对3.对4.对（Vue基于MVVM，Angular基于MVC但类似）5.错（localStorage数据持久保存）6.对7.对8.对9.对10.对四、简答题1.跨域问题源于浏览器的同源策略，限制不同源之间的资源交互。常见解决方案包括JSONP、CORS、代理服务器、WebSocket等。JSONP利用<script>标签不受同源策略限制的特性；CORS通过服务器设置响应头允许跨域请求；代理服务器将请求转发至目标服务器；WebSocket协议本身支持跨域。2.虚拟DOM是React中的轻量级JavaScript对象，表示真实DOM的抽象。当状态变化时，React会创建新的虚拟DOM树，通过Diff算法对比新旧树，找出最小变更，最后批量更新真实DOM，减少直接操作DOM的开销，提升性能。3.BFC是Web页面中一个独立的渲染区域，内部元素布局不受外部影响。触发条件包括float不为none、position为absolute/fixed、display为inline-block等。BFC可解决margin重叠、清除浮动、防止元素被浮动元素覆盖等问题。4.前端工程化主要包括模块化开发、组件化架构、构建工具（如Webpack）、代码规范（ESLint）、自动化测试、持续集成/部署等。旨在提升开发效率、代码质量和项目可维护性。五、讨论题1.React灵活性高、生态丰富，但学习曲线较陡；Vue易于上手、文档友好，但大型项目生态相对较弱；Angular功能全面、适合企业级应用，但体积庞大、学习成本高。选择需根据团队技术栈、项目规模等因素权衡。2.性能优化可从减少HTTP请求（合并文件、雪碧图）、压缩资源（Gzip）、使用CDN、代码分割、懒加载、缓存策略、减少重绘重排等方面入手。同时，监控工具（如L