前端开发2026年秋招笔试基础知识点速刷

前端开发2026年秋招笔试基础知识点速刷一、单选题（共10题，每题2分）1.JavaScript中，以下哪个方法用于向数组末尾添加一个或多个元素，并返回新的数组长度？A.`push()`B.`pop()`C.`shift()`D.`unshift()`2.CSS中，如何实现元素的绝对定位？A.`position:static;`B.`position:relative;`C.`position:absolute;`D.`position:fixed;`3.React中，用于存储组件内部状态的钩子是？A.`useEffect()`B.`useState()`C.`useContext()`D.`useReducer()`4.HTML5中，哪个标签用于定义文章内容？A.`<section>`B.`<article>`C.`<div>`D.`<span>`5.Vue.js中，绑定动态样式时，使用哪个指令？A.`v-bind:style`B.`v-style`C.`v-bind:`style`D.`v-on-style`6.CSS3中，哪个属性用于实现元素的动画效果？A.`transition`B.`animation`C.`transform`D.`animation-name`7.HTTP协议中，以下哪个状态码表示“请求成功”？A.200B.404C.500D.3028.TypeScript中，以下哪个关键字用于定义一个不可变数组？A.`const`B.`let`C.`var`D.`readonly`9.Web性能优化中，以下哪个方法可以减少页面加载时间？A.压缩图片B.使用CDNC.代码懒加载D.以上都是10.浏览器缓存中，以下哪个字段用于控制缓存过期时间？A.`Expires`B.`Cache-Control`C.`Pragma`D.`Max-Age`二、多选题（共5题，每题3分）1.CSS布局中，以下哪些属于盒模型属性？A.`margin`B.`padding`C.`border`D.`box-sizing`2.JavaScript中，以下哪些方法可以用来遍历数组？A.`forEach()`B.`map()`C.`filter()`D.`reduce()`3.ReactHooks中，以下哪些是官方推荐的Hooks？A.`useState`B.`useEffect`C.`useContext`D.`useReducer`4.Web安全中，以下哪些属于常见的XSS攻击类型？A.ReflectedXSSB.StoredXSSC.DOM-basedXSSD.CSRF5.前端工程化中，以下哪些工具可以用于代码打包？A.WebpackB.RollupC.ParcelD.Vite三、判断题（共10题，每题1分）1.`undefined`和`null`在JavaScript中是等价的。（×）2.CSS中的`flexbox`布局可以用于水平或垂直排列元素。（√）3.Vue.js中的`v-model`可以用于双向绑定输入框和组件状态。（√）4.HTTP协议中，`GET`请求和`POST`请求都可以传输大量数据。（×）5.TypeScript中的`interface`和`type`可以互相替代。（×）6.JavaScript中的`async/await`可以替代Promise。（√）7.CSS中的`inherit`属性可以继承父元素的样式。（√）8.WebWorkers可以用于执行复杂计算，而不会阻塞主线程。（√）9.浏览器缓存可以完全避免重复请求资源。（×）10.React中的`Context`可以用于跨组件传递数据。（√）四、简答题（共5题，每题5分）1.简述CSS中的盒模型（BoxModel）及其组成部分。答案：CSS盒模型由四个部分组成：-内容（Content）：元素的实际内容区域。-边框（Border）：围绕内容的边框。-外边距（Margin）：元素与其他元素之间的空白区域。-内边距（Padding）：内容与边框之间的空白区域。默认情况下，盒模型的宽度和高度不包括边框和内边距，但可以通过`box-sizing:border-box`改为包含边框和内边距。2.解释React中的`props`和`state`的区别。答案：-`props`（属性）：从父组件传递给子组件的数据，子组件只能读取`props`，不能修改。-`state`（状态）：组件内部维护的数据，可以随时修改，并触发组件重新渲染。`props`用于组件间数据传递，`state`用于组件内部状态管理。3.简述HTTP缓存的工作原理。答案：HTTP缓存通过存储响应内容（如HTML、图片）来减少重复请求，主要流程：-浏览器发送请求时，会检查缓存中是否有对应的资源。-如果缓存有效，浏览器直接使用缓存内容，无需网络请求。-如果缓存失效，浏览器重新请求资源，并更新缓存。缓存控制字段（如`Cache-Control`、`Expires`）用于管理缓存过期时间。4.解释JavaScript中的闭包（Closure）及其应用场景。答案：闭包是指内部函数可以访问外部函数的变量，即使外部函数已执行完毕。应用场景：-隐藏内部状态，防止外部直接访问。-实现函数柯里化（Currying）。-延迟执行（如事件处理器）。5.简述Web性能优化的关键点。答案：-资源压缩：减小文件体积（如CSS、JS压缩）。-代码拆分：按需加载代码（如Webpack的`code-splitting`）。-CDN加速：将静态资源部署到CDN，减少延迟。-缓存优化：利用浏览器缓存（`Cache-Control`）。-请求合并：减少HTTP请求次数（如CSS、JS合并）。五、代码题（共5题，每题10分）1.编写JavaScript代码，实现一个函数，接收一个数组，返回数组中所有奇数之和。答案：javascriptfunctionsumOdds(arr){returnarr.filter(num=>num%2!==0).reduce((acc,curr)=>acc+curr,0);}//示例：sumOdds([1,2,3,4,5])→92.编写CSS代码，实现一个居中显示的圆形按钮，按钮背景为渐变色。答案：css.circle-button{width:100px;height:100px;border-radius:50%;background:linear-gradient(toright,#ff0,#f0f);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;}3.编写Vue.js代码，实现一个输入框，输入内容后实时显示在页面上。答案：html<template><div><inputv-model="inputValue"placeholder="输入内容"/><p>输入内容：{{inputValue}}</p></div></template><script>exportdefault{data(){return{inputValue:'',};},};</script>4.编写React代码，实现一个简单的计数器组件，包含“+”和“-”按钮，点击按钮可以增加或减少计数。答案：jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><p>当前计数：{count}</p><buttononClick={()=>setCount(count-1)}>-</button><buttononClick={()=>setCount(count+1)}>+</button></div>);}exportdefaultCounter;5.编写HTML和JavaScript代码，实现一个简单的轮播图，包含左右切换按钮。答案：html<divclass="carousel"><buttononclick="prevSlide()">←</button><divclass="slides"><imgsrc="img1.jpg"alt="Slide1"/><imgsrc="img2.jpg"alt="Slide2"/><imgsrc="img3.jpg"alt="Slide3"/></div><buttononclick="nextSlide()">→</button></div><script>letcurrentSlide=0;constslides=document.querySelectorAll('.slidesimg');functionshowSlide(index){slides.forEach(slide=>(slide.style.display='none'));slides[index].style.display='block';}functionnextSlide(){currentSlide=(currentSlide+1)%slides.length;showSlide(currentSlide);}functionprevSlide(){currentSlide=(currentSlide-1+slides.length)%slides.length;showSlide(currentSlide);}//初始化显示第一张showSlide(0);</script>答案与解析单选题答案与解析1.A-`push()`用于添加元素，返回新长度。其他选项：`pop()`删除末尾元素，`shift()`删除开头元素，`unshift()`添加开头元素。2.C-`position:absolute`使元素脱离文档流，相对于最近的相对定位父元素或`body`定位。3.B-`useState`用于声明组件内部状态，`useEffect`处理副作用，`useContext`读取上下文，`useReducer`管理复杂状态。4.B-`<article>`表示独立内容（如博客文章），`<section>`表示页面分区。5.A-`v-bind:style`或简写为`:style`用于绑定动态样式。6.B-`animation`实现复杂动画，`transition`实现简单过渡，`transform`用于变形。7.A-200表示请求成功，404表示未找到，500表示服务器错误，302表示重定向。8.D-`readonly`用于声明只读属性，`const`用于声明常量，`let`和`var`用于变量声明。9.D-以上都是性能优化方法：压缩图片减小体积，CDN加速传输，懒加载减少初始加载。10.B-`Cache-Control`控制缓存策略，`Expires`已过时，`Pragma`用于旧浏览器，`Max-Age`表示缓存有效期（秒）。多选题答案与解析1.A,B,C,D-盒模型包含`margin`、`padding`、`border`和`box-sizing`属性。2.A,B,C,D-以上都是常用数组遍历方法：`forEach`遍历，`map`映射，`filter`筛选，`reduce`累加。3.A,B,C,D-以上都是官方推荐的ReactHooks。4.A,B,C-XSS分为反射型、存储型和DOM型，CSRF是跨站请求伪造。5.A,B,C,D-以上都是常用的代码打包工具。判断题答案与解析1.×-`undefined`表示未定义，`null`表示空值，不等价。2.√-`flexbox`支持一行或一列排列。3.√-`v-model`实现双向绑定。4.×-`GET`请求参数在URL中，不适合传输大量数据，`POST`更安全。5.×-`interface`和`type`用途不同，`interface`用于类型声明，`type`更灵活。6.√-`async/await`基于Promise，简化异步操作。7.√-`inherit`可以继承父元素样式。8.√-WebWorkers运行在独立线程，不阻塞主线程。9.×-缓存可能失效，仍需请求。10.√-`Context`用于跨组件传值。简答题答案与解析1.盒模型-解析：盒模型包含内容、边框、内边距和外边距，默认不包括边框和内边距，可通过`box-sizing:border-box`改为包含。2.`props`与`state`-解析：`props`是父传子，只读；`state`是子自己维护，可变，触发更新。3.HTTP缓存-解析：浏览器检查缓存有效性（`Cache-Control`等），有效则使用缓存，无效则重新请求。4.闭包-解析：内部函数访问外部函数变量，即使外部函数已执行，变量仍存在，用于状态隐