前端初级面试题目和答案

前端初级面试经典题目和答案考试时间：______分钟总分：______分姓名：______一、单项选择题1.在JavaScript中，以下哪个关键字声明的变量拥有暂时性死区特性？A.varB.letC.constD.function2.执行以下代码，输出的结果是？```javascriptconsole.log(typeofnull);```A."object"B."null"C."undefined"D."number"3.以下关于CSS盒模型的描述，正确的是？A.标准盒模型中，width属性包含padding和borderB.IE盒模型中，width属性包含padding和borderC.标准盒模型也被称为content-boxD.IE盒模型也被称为border-box4.在Flex布局中，要让子元素在交叉轴上居中对齐，应使用哪个属性？A.justify-contentB.align-itemsC.align-contentD.flex-direction5.以下关于HTTP协议的说法，错误的是？A.GET请求通常用于获取数据，POST请求通常用于提交数据B.GET请求参数会显示在URL中，POST请求参数在请求体中C.HTTPS是在HTTP协议下加入SSL/TLS协议的安全传输协议D.GET请求是无状态的，但POST请求是有状态的6.在JavaScript中，`[]==![]`的结果是？A.trueB.falseC.undefinedD.报错7.以下关于`this`指向的说法，错误的是？A.全局作用域中，`this`指向window对象B.普通函数调用中，`this`指向调用者C.箭头函数没有自己的`this`，它会捕获其所在上下文的`this`值D.在事件监听器中，`this`始终指向绑定的DOM元素8.浏览器缓存中，`Cache-Control:no-cache`的作用是？A.禁止浏览器缓存该资源B.每次请求都强制向服务器验证资源（协商缓存）C.资源永久有效D.资源过期时间为09.以下哪个属性用于改变HTML元素的背景颜色？A.colorB.backgroundC.background-colorD.fill10.JavaScript中，以下哪个方法用于向数组末尾添加元素？A.push()B.pop()C.shift()D.unshift()二、多项选择题1.关于JavaScript闭包，以下说法正确的是？A.闭包是指有权访问另一个函数作用域中变量的函数B.闭包会导致内存泄漏，因此应尽量避免使用C.闭包常用于模块化开发、数据私有化D.闭包是函数嵌套函数的一种形式2.以下哪些是HTML5新增的语义化标签？A.`<header>`B.`<footer>`C.`<section>`D.`<div>`3.以下哪些是JavaScript的基本数据类型？A.StringB.NumberC.BooleanD.Array4.关于事件冒泡和事件捕获，以下说法正确的是？A.事件捕获是从外向内触发B.事件冒泡是从内向外触发C.`addEventListener`的第三个参数默认为false，表示监听冒泡阶段D.可以通过`e.stopPropagation()`阻止事件冒泡5.以下哪些HTTP状态码表示“未授权”？A.200B.401C.403D.4046.关于`var`、`let`、`const`的区别，以下说法正确的是？A.`var`声明的变量存在变量提升，可以在声明前使用B.`let`和`const`声明的变量不存在变量提升C.`const`声明的变量一旦赋值就不能重新赋值D.`let`和`const`声明的变量拥有块级作用域7.以下哪些属性可以用于CSS定位布局？A.position:absoluteB.position:relativeC.position:fixedD.display:flex8.关于JavaScript的原型链，以下说法正确的是？A.每个对象都有`__proto__`属性B.每个函数都有`prototype`属性C.`null`的原型链指向`Ototype`D.原型链用于实现继承三、简答题1.请简述`var`、`let`和`const`的主要区别，并说明各自的使用场景。2.什么是闭包？闭包在实际开发中有什么应用场景？3.请解释浏览器的“事件循环”机制，并说明宏任务和微任务的执行顺序。4.给出以下代码的输出结果，并解释原因：```javascriptconsole.log('1');setTimeout(function(){console.log('2');},0);Promise.resolve().then(function(){console.log('3');});console.log('4');```5.什么是Flex布局？请列举至少两个常用的Flex属性及其作用。试卷答案一、单项选择题1.B解析：`var`声明的变量存在函数作用域提升，没有暂时性死区；`let`和`const`声明的变量拥有块级作用域，且存在暂时性死区，即在声明之前无法访问。因此只有B符合题意。2.A解析：这是JavaScript历史遗留的一个经典Bug。虽然`null`的类型是Object，但`typeofnull`在JavaScript规范中被定义为"object"。这源于早期实现时的类型标记错误。3.B,D解析：标准盒模型（W3C模型）中，width仅包含content，padding和border会增加总宽度；IE盒模型（兼容盒模型）中，width包含content、padding和border，总宽度由width决定。标准盒模型也被称为`content-box`，IE盒模型也被称为`border-box`。4.B解析：`justify-content`控制主轴（默认为水平方向）上的对齐方式；`align-items`控制交叉轴（默认为垂直方向）上的对齐方式。要实现垂直居中，应使用`align-items`。5.D解析：HTTP协议本身是无状态的，GET和POST请求本质上都是无状态的。POST请求通常用于提交数据，但并不意味着它是有状态的。D选项说法错误。6.A解析：首先计算右边的`![]`，布尔值取反，空数组转换为布尔值为`true`，取反后为`false`。表达式变为`[]==false`。接着进行类型转换，空数组`[]`转换为数字为`0`。最后`0==false`结果为`true`。注意这里使用的是`==`，会进行类型转换。7.D解析：选项A、B、C的描述均正确。选项D错误，在事件监听器中，普通函数（非箭头函数）的`this`指向绑定该事件的对象（即DOM元素）；而箭头函数没有自己的`this`，它会捕获其所在上下文的`this`值（通常是window）。8.B解析：`Cache-Control:no-cache`表示浏览器在缓存资源之前，需要先向服务器验证资源是否过期（即协商缓存）。它并不禁止浏览器缓存资源（这与`no-store`不同，`no-store`是完全不缓存）。9.C解析：`color`属性用于设置文本颜色；`background`是简写属性；`background-color`用于设置背景颜色。10.A解析：`push()`方法用于向数组末尾添加一个或多个元素，并返回新的长度；`pop()`是删除末尾元素；`shift()`是删除开头元素；`unshift()`是向开头添加元素。二、多项选择题1.A,B,C,D解析：A是闭包的定义；B是闭包的特性（如果不及时释放，会导致内存泄漏）；C是闭包的典型应用场景；D是闭包形成的条件（函数嵌套）。2.A,B,C解析：`<header>`、`<footer>`、`<section>`都是HTML5引入的语义化标签，用于表达文档结构。`<div>`在HTML5之前是通用的块级容器，不属于新的语义化标签。3.A,B,C解析：String、Number、Boolean是JavaScript的基本数据类型（原始类型）。Array是对象类型。4.A,B,C,D解析：事件捕获是从外向内触发；事件冒泡是从内向外触发；`addEventListener`的第三个参数默认为`false`，表示监听冒泡阶段；`stopPropagation`可以阻止事件冒泡。5.B,C解析：401表示“未授权”，通常需要登录；403表示“禁止访问”，表示已登录但权限不足。200是成功，404是未找到。6.A,B,C,D解析：`var`存在变量提升且是函数作用域；`let`和`const`不存在变量提升且是块级作用域；`const`声明常量后不可重新赋值引用，但如果是对象，可以修改其内部属性。7.A,B,C解析：`position:absolute/relative/fixed`用于定位布局。`display:flex`是一种布局模式，用于定义Flex容器。8.A,B,C,D解析：每个对象都有`__proto__`属性指向其原型；每个函数都有`prototype`属性；`null`是特殊的，它的原型链顶端是`null`，不指向`Ototype`；原型链是实现继承的基础。三、简答题1.答案：*var：存在变量提升（可以在声明前使用），作用域为函数作用域，可以重复声明。*let：不存在变量提升，作用域为块级作用域（`{}`内），不能重复声明。*const：不存在变量提升，作用域为块级作用域，不能重复声明，声明后必须初始化，且声明的引用类型变量其属性可修改，但变量名本身不可重新绑定其他引用。解析思路：考察对ES6新特性的掌握程度。需要从“变量提升”、“作用域”、“重复声明”、“初始化”四个维度进行对比。`var`是ES5的产物，存在很多坑；`let`和`const`是现代开发的标配，重点在于块级作用域和防止重复声明。2.答案：*定义：闭包是指有权访问另一个函数作用域中变量的函数。通常是在一个函数内部定义另一个函数。*应用场景：1.模块化开发：利用闭包封装私有变量。2.函数防抖与节流：保存上一次执行的状态。3.异步回调中保持数据状态。解析思路：考察对JS作用域链的理解。不仅要回答定义，还要结合代码场景解释“为什么”能访问外部变量（作用域链的延伸），并列举实际开发中的具体用途，避免空谈理论。3.答案：*机制：浏览器主线程在执行脚本时，会先执行同步任务。同步任务执行完毕后，主线程会检查微任务队列（Promise.then,MutationObserver等），如果有微任务则全部执行。微任务执行完毕后，会从宏任务队列中取出一个任务执行，然后再清空微任务，如此循环。*顺序：同步任务->微任务->宏任务。解析思路：考察对JS异步执行机制的理解。核心在于“微任务优先于宏任务”这一规则。需要解释清楚主线程与任务队列的关系，以及每次循环的执行流程。4.答案：输出结果为：`1`、`4`、`3`、`2`。解析思路：1.执行`console.log('1')`，输出`1`。2.遇到`setTimeout`，将其回调函数放入宏任务队列。3.遇到`Promise.resolve().then()`，将其回调函数放入微任务队列。4.执行`console.log('4')`，输出`4`。5.同步代码执行完毕，开始检查微任务队列，执行`Promise`的回调，输出`3`。6.微任务队列清空，开始执行宏任务队列中的第一个任务（`setTimeout`回调），输出`2`。5.答案：*定义：Flex布局（弹性盒子布局）是一种一维布局模型，它可以在容器中分配空间，使得子元素能够适应不同的屏幕尺寸。*常用属性：1.`f