前端面试题

yykygcd2026/1/15大约 3 分钟

前端面试题

HTML/CSS

1. 盒模型是什么？

标准盒模型：width = content
IE盒模型：width = content + padding + border
通过 box-sizing: border-box 切换

2. BFC 是什么？如何触发？

BFC（块级格式化上下文）是独立的渲染区域。

触发条件：float、position: absolute/fixed、display: inline-block/flex、overflow 不为 visible

应用：清除浮动、防止 margin 重叠

3. Flex 布局常用属性？

/* 容器 */
display: flex;
justify-content: center;  /* 主轴对齐 */
align-items: center;      /* 交叉轴对齐 */
flex-wrap: wrap;          /* 换行 */

/* 项目 */
flex: 1;                  /* 占比 */
align-self: center;       /* 单独对齐 */

4. 垂直居中的方法？

/* 1. Flex */
display: flex; justify-content: center; align-items: center;

/* 2. Grid */
display: grid; place-items: center;

/* 3. 定位 + transform */
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

/* 4. 定位 + margin */
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

JavaScript

5. var/let/const 的区别？

特性	var	let	const
作用域	函数	块级	块级
变量提升	是	否	否
重复声明	可以	不可以	不可以
修改	可以	可以	不可以

6. 闭包是什么？有什么用？

闭包是函数能够访问其词法作用域外的变量。

应用：模块化、柯里化、防抖节流、私有变量

7. 原型链是什么？

每个对象都有 __proto__ 指向其原型，原型也是对象，形成链式结构。

obj.__proto__ === Constructor.prototype
Constructor.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

8. this 指向规则？

默认绑定：全局对象（严格模式 undefined）
隐式绑定：调用对象
显式绑定：call/apply/bind
new 绑定：新创建的对象
箭头函数：继承外层 this

9. Promise 的状态？

pending：初始状态
fulfilled：成功
rejected：失败

状态一旦改变就不可逆。

10. async/await 原理？

async/await 是 Generator + Promise 的语法糖，使异步代码看起来像同步代码。

11. 事件循环机制？

宏任务 → 微任务队列清空 → 渲染 → 宏任务...

宏任务：setTimeout、setInterval、I/O
微任务：Promise.then、MutationObserver

12. 深拷贝实现？

function deepClone(obj, map = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (map.has(obj)) return map.get(obj);
  
  const clone = Array.isArray(obj) ? [] : {};
  map.set(obj, clone);
  
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], map);
    }
  }
  return clone;
}