前端开发面试题及JavaScript高频题含答案.docxVIP

第PAGE页共NUMPAGES页

2026年前端开发面试题及JavaScript高频题含答案

一、HTML/CSS基础（5题，每题2分）

1.题目：简述HTML5中新增的语义化标签及其作用。

答案：

-`header`：定义页面或区块的页眉。

-`nav`：定义导航链接。

-`article`：定义独立的、可独立分配的内容（如博客文章）。

-`section`：定义文档中的一个区段或章节。

-`aside`：定义与页面内容相关但可独立的内容（如侧边栏）。

-`footer`：定义页面或区块的页脚。

解析：语义化标签有助于SEO和可访问性，让代码结构更清晰。

2.题目：如何实现一个两栏布局，左侧固定宽度，右侧自适应？

答案：

css

.container{

display:flex;

}

.sidebar{

width:200px;

background:#f0f0f0;

}

.main-content{

flex:1;

margin-left:200px;

}

解析：使用Flexbox实现，左侧固定宽度，右侧占剩余空间。

3.题目：CSS中`box-sizing:border-box`的作用是什么？

答案：`border-box`使元素的`padding`和`border`包含在宽度和高度内，避免布局问题。

解析：默认`content-box`会从宽高中减去`padding`和`border`。

4.题目：如何实现一个响应式轮播图，在小屏幕上隐藏部分控制按钮？

答案：

css

@media(max-width:600px){

.controls{

display:none;

}

}

解析：使用媒体查询在小屏幕隐藏非必要元素。

5.题目：解释CSS中的`flex-grow`、`flex-shrink`和`flex-basis`。

答案：

-`flex-grow`：元素在空间充足时扩展的比例。

-`flex-shrink`：元素在空间不足时收缩的比例。

-`flex-basis`：元素初始的宽度或高度。

解析：用于控制Flex布局中子元素的伸缩行为。

二、JavaScript基础（10题，每题2分）

1.题目：解释JavaScript中的闭包是什么？

答案：闭包是函数及其词法环境的组合，允许函数访问外部作用域的变量。

解析：常见于模块化开发，如自执行函数。

2.题目：`let`和`const`的区别是什么？

答案：

-`let`：可重新赋值，存在块级作用域。

-`const`：不可重新赋值，存在块级作用域。

解析：推荐使用`const`，避免变量误改。

3.题目：如何判断一个变量是否为数组？

答案：

javascript

Array.isArray(variable);

解析：官方推荐的方法，比`typeof`更准确。

4.题目：解释JavaScript中的原型链。

答案：对象通过`__proto__`或`Object.getPrototypeOf()`链接到原型对象，最终到`Ototype`。

解析：实现继承的基础机制。

5.题目：`Promise`的状态有哪些？如何实现异步操作？

答案：

-状态：`pending`（等待）、`fulfilled`（成功）、`rejected`（失败）。

-异步操作：使用`Promise`或`async/await`。

解析：`async/await`是`Promise`的语法糖。

6.题目：`this`关键字在函数中的指向规则是什么？

答案：

-普通函数：`this`指向全局对象（浏览器中为`window`）。

-构造函数：`this`指向新创建的实例。

-`arrowfunction`：`this`继承自定义作用域。

解析：需注意不同场景下的`this`行为。

7.题目：如何实现一个深拷贝函数？

答案：

javascript

functiondeepCopy(obj){

if(obj===null||typeofobj!==object)returnobj;

if(objinstanceofDate)returnnewDate(obj);

if(objinstanceofRegExp)returnnewRegExp(obj);

letcopy=Array.isArray(obj)?[]:{};

for(letkeyinobj){

copy[key]=deepCopy(obj[key]);

}

returncopy;

}

解析：递归处理对象和数组，注意特殊类型。

8.题目：解释事件冒泡和事件委托的原理。

答案：

-