Web前端实习生-初级工程师笔试题（含真实答题答案）

Web前端实习生/初级工程师笔试题（含真实答题答案）适用人群：前端实习生、初级前端开发、校招面试笔试考试时长：60分钟满分：100分一、选择题（每题3分，共30分）1.以下哪个不是HTML5新增的标签？（）A.headerB.footerC.divD.article2.CSS中，以下哪个属性可以实现元素水平垂直居中（绝对定位元素）？（）A.margin:0autoB.top:50%;left:50%;transform:translate(-50%,-50%)C.text-align:centerD.vertical-align:middle3.关于JS变量提升，下列说法正确的是？（）A.var、let、const都会变量提升B.let和const存在提升，但有暂时性死区，不能提前访问C.只有let存在变量提升D.所有变量都没有提升4.以下JS数据类型中，不属于基本数据类型的是？（）A.StringB.ObjectC.NullD.Undefined5.下列关于flex布局说法错误的是？（）A.flex-direction可以设置主轴方向B.justify-content控制侧轴对齐方式C.align-items控制侧轴对齐方式D.flex-wrap可以设置是否自动换行6.以下哪个方法不会改变原数组？（）A.push()B.splice()C.map()D.reverse()7.关于this指向，普通函数独立调用时，浏览器环境下this指向？（）A.函数本身B.windowC.undefinedD.null8.CSS中z-index的生效前提是？（）A.元素必须浮动B.元素必须有定位（relative/absolute/fixed/sticky）C.元素必须是块级元素D.无需任何前提9.ES6中箭头函数的特点说法错误的是？（）A.没有自己的thisB.可以作为构造函数C.没有argumentsD.不能绑定this10.以下事件流顺序正确的是？（）A.捕获阶段=>目标阶段=>冒泡阶段B.冒泡阶段=>捕获阶段=>目标阶段C.目标阶段=>捕获阶段=>冒泡阶段D.捕获阶段=>冒泡阶段=>目标阶段二、填空题（每题2分，共20分）1.HTML中，________标签用于引入外部CSS样式表。2.CSS盒模型由内容区、________、________、外边距四部分组成。3.JS中判断数组的精准方法是________。4.阻止事件冒泡的方法是________，阻止默认事件的方法是________。5.ES6中声明块级作用域变量的关键字是________和________。6.实现CSS弹性布局需要给父元素设置________。7.JS中null和undefined的区别：________是定义未赋值，________是空对象。8.数组去重最简单的ES6方法是________。9.异步JS的解决方案有回调函数、________、________、async/await。10.清除浮动的常用方法（写一种即可）________。三、简答题（每题6分，共30分）1.简述px、em、rem、vw的区别和使用场景？2.讲讲JS的原型和原型链？3.什么是闭包？闭包的用途和缺点是什么？4.简述Vue2和Vue3的主要区别（基础版）？5.说说你对前端防抖和节流的理解，以及适用场景？四、编程题（每题10分，共20分）1.手写一个数组去重函数，兼容所有基础数据类型。2.手写一个简单的防抖函数。参考答案一、选择题答案1.C解析：div是传统标签，HTML5新增语义化标签包含header、footer、article、section等。2.B解析：margin:0auto只能水平居中；text-align只对行内元素生效；vertical-align不用于整体居中。3.B解析：var有变量提升无暂时性死区，let/const有提升但存在暂时性死区，声明前不能访问。4.B解析：JS基本数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt；Object是引用类型。5.B解析：justify-content控制主轴对齐，align-items控制侧轴对齐。6.C解析：map、filter、slice不会改原数组；push、splice、reverse、sort会修改原数组。7.B解析：浏览器全局环境中，普通函数独立调用this指向window；严格模式下为undefined。8.B解析：z-index只对开启定位的元素生效，默认static定位无效。9.B解析：箭头函数没有this、没有prototype、不能new、没有arguments，无法作为构造函数。10.A解析：DOM事件流固定顺序：捕获（从上到下）→目标触发→冒泡（从下到上）。二、填空题答案1.link2.内边距（padding）、边框（border）3.Array.isArray()4.e.stopPropagation()、e.preventDefault()5.let、const6.display:flex7.undefined、null8.[...newSet(arr)]9.Promise、Generator10.给父元素设置overflow:hidden（或伪元素清除浮动）1.px、em、rem、vw的区别和使用场景px是固定像素，写多少就是多少，不会随屏幕变化，适合固定尺寸的按钮、边框。em是相对父元素字体大小的单位，父字体变它就变，层级多的时候容易乱，现在很少用。rem是相对根节点html字体大小，统一适配方便，移动端适配首选，常用于字体、间距、宽高适配。vw是视口宽度单位，1vw等于屏幕宽度的1%，适合做全屏适配、自适应布局，比如全屏banner、自适应间距。2.讲讲JS的原型和原型链JS里每个函数都有prototype原型对象，每个实例对象都有__proto__属性，指向构造函数的原型。当访问对象的属性或方法时，自身没有就会顺着__proto__往上找，一直找到Ototype，最后到null，这个查找链条就是原型链。原型主要用来实现方法共享、节省内存，原型链是JS实现继承的核心。3.什么是闭包？用途和缺点闭包就是内层函数访问外层函数的变量，并且外层函数执行结束后，内层函数依然可以使用外层的变量，这种组合就是闭包。用途：可以保存私有变量、实现函数柯里化、防抖节流封装、循环绑定事件存变量。缺点：变量会一直驻留内存，不会被垃圾回收，使用不当容易造成内存泄漏。4.Vue2和Vue3基础区别（1）底层：Vue2是OptionsAPI，选项式写法；Vue3支持组合式API，代码更集中，适合大型项目。（2）响应式：Vue2用Object.defineProperty，监听对象属性，数组需要重写方法；Vue3用Proxy，直接监听对象和数组，支持新增删除属性监听。（3）性能：Vue3打包更小、渲染更快，新增tree-shaking，按需引入API。（4）TS支持：Vue3原生支持TS，类型提示更友好。5.防抖和节流的理解和场景防抖：频繁触发事件时，只在最后一次触发后延迟执行一次，中间频繁触发会重置计时。适合输入框搜索、窗口resize、输入联想。节流：固定时间内只执行一次，不管触发多少次，按时间间隔匀速执行。适合滚动加载、鼠标移动、按钮频繁点击、页面拖拽。四、编程题答案（可直接运行）1.数组去重函数javascript

//基础通用数组去重（支持所有基础类型）

functionuniqueArr(arr){

if(!Array.isArray(arr))return[]

return[...newSet(arr)]

}

//测试

console.log(uniqueArr([1,2,2,3,3,'1','1',null,null]))

2.手写防抖函数javascript

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

//每次触发清除之前的定时器

if(timer)clearTimeout(timer)

//重新计时

timer=setTimeout((