前端上机面试题大全_2024最新前端开发笔试真题解析

JavaScript 核心手写题解析

① 实现 Promise.all

Promise.all 是前端面试中的高频考点，考察对异步编程、状态管理及数组处理的掌握程度。面试官通常要求手写实现，并处理异常情况。

const promiseAll = (promises) => {
  return new Promise((resolve, reject) => {
    const results = [];
    let completedCount = 0;
    promises.forEach((p, index) => {
      Promise.resolve(p)
        .then(res => {
          results[index] = res;
          completedCount++;
          if (completedCount === promises.length) {
            resolve(results);
          }
        })
        .catch(err => reject(err));
    });
  });
};
                    

异步编程 Promise 状态机

② 实现深拷贝 DeepClone

简单的赋值会导致引用类型共享内存，深拷贝则是创建一个新的独立对象。面试中常考察递归实现及循环引用的处理（如WeakMap）。

function deepClone(obj, map = new WeakMap()) {
  if (obj === null) return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (map.has(obj)) return map.get(obj);
  const cloneObj = new Object(obj.constructor);
  map.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], map);
    }
  }
  return cloneObj;
}
                    

数据结构递归内存管理

③ 实现防抖与节流

在搜索框输入、窗口resize等高频事件场景中，防抖（Debounce）和节流（Throttle）是优化性能的关键手段。理解两者区别是前端基础中的重点。

// 防抖：最后一次触发后执行
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
// 节流：单位时间内只执行一次
function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}
                    

性能优化事件处理定时器

CSS 布局陷阱与高级技巧

Flexbox 居中与自适应

Flexbox 是现代 CSS 布局的核心。在前端上机面试题中，经常考察如何实现垂直居中、等高布局以及响应式排列。

/ 万能居中方案 /
.container {
  display: flex;
  justify-content: center; / 水平居中 /
  align-items: center; / 垂直居中 /
  height: 100vh;
}
/ 圣杯布局 / 双飞翼布局简化版 /
.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar { width: 200px; }
.main { flex: 1; }
                    

考点解析：面试官可能会问 justify-content 和 align-items 的区别，或者在 flex 容器中使用 margin: auto 实现特殊对齐的原理。

Grid 网格布局进阶

CSS Grid 适合二维布局。在复杂后台管理系统或数据展示页面中，Grid 能极大简化代码结构。

/ 自动适应列宽 /
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
/ 区域命名 /
.dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 60px 1fr 60px;
}
                    

考点解析：重点考察 fr 单位、minmax 函数以及 grid-template-areas 的使用场景。

BFC 块级格式化上下文

BFC 是 CSS 中一个隐含的概念，理解它是解决浮动塌陷、外边距合并等经典问题的关键。

/ 触发 BFC 的常见方式 /
.trigger-bfc {
  overflow: hidden; / 最常用 /
  display: flow-root; / 推荐，副作用最小 /
  float: left;
  display: inline-block;
}
                    

考点解析：需解释 BFC 的规则：内部盒子垂直排列、不受浮动元素影响、计算高度包含浮动子元素。

Vue & React 框架核心机制

Vue 响应式原理

Vue 2 使用 Object.defineProperty 进行劫持，Vue 3 升级为 Proxy。上机题常要求实现一个简单的响应式系统，理解 get/set/dep 或 Proxy 的 trap 方法是核心。

// Vue 3 简单 Proxy 示例
const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      // 收集依赖
      return target[key];
    },
    set(target, key, value) {
      // 触发更新
      target[key] = value;
      notifyUpdate();
    }
  });
};
                        

React 虚拟 DOM 与 Diff 算法

React 的核心优势在于虚拟 DOM 和高效的 Diff 算法。面试题常问：为什么需要虚拟 DOM？Key 的作用是什么？如何优化重渲染？

// Key 的重要性
// 列表渲染时，稳定的 Key 帮助 React 识别哪些元素被修改、添加或删除，
// 避免不必要的 DOM 操作。
{list.map(item => <div key={item.id} >...</div>)}
                        

组件通信与状态管理

父子组件、跨级组件、非亲缘组件之间的通信方式是必考题。Props/emit、Context、Redux/Pinia 等方案的选型依据。

⚡ Props Down, Events Up：基础通信原则。
⚡ Provide/Inject：解决跨级组件通信。
⚡ Pinia/Redux：全局状态管理，适合大型应用。

前端算法与数据结构

前端上机考试不仅考框架，更考基础逻辑。以下精选三道高频算法题。

① 数组扁平化 (Flatten)

将多维数组转化为一维数组。考察递归、reduce 及 toString 等技巧。

const flatten = arr => arr.reduce((acc, val) =>
  Array.isArray(val)
    ? acc.concat(flatten(val))
    : acc.concat(val), []);
                    

② 实现栈结构 (Stack)

后进先出 (LIFO)。考察对基本数据结构接口的实现，如 push, pop, peek。

class Stack {
  constructor() { this.items = []; }
  push(item) { this.items.push(item); }
  pop() { return this.items.pop(); }
  peek() { return this.items[this.items.length - 1]; }
  isEmpty() { return this.items.length === 0; }
}
                    

③ 二叉树遍历

前序、中序、后序遍历是树结构的基础。递归实现简洁，迭代实现需借助栈或队列。

// 前序遍历：根 -> 左 -> 右
const preorder = (root) => {
  if (!root) return;
  console.log(root.val);
  preorder(root.left);
  preorder(root.right);
};
                    

网友们还关心

🔥 前端上机面试题相关周边知识深度拓展

除了代码本身，面试官往往也会考察对前端工程化、浏览器原理及网络协议的理解。以下内容为考生高频搜索的关联知识点：

① 浏览器缓存机制 (Cache-Control vs ETag)

在前端性能优化中，强缓存和协商缓存是核心。上机题可能要求你编写一个 Service Worker 来模拟缓存策略，或者解释 HTTP 响应头中 Cache-Control 各指令的含义（如 no-cache, no-store, max-age）。

指令	含义	是否验证
no-store	禁止任何缓存	是
no-cache	缓存但需验证	协商缓存
max-age=3600	缓存1小时	强缓存

② Webpack/Vite 打包原理

现代前端开发离不开构建工具。理解 Loader（转换文件）和 Plugin（扩展功能）的区别是进阶必考题。Vite 利用 ES Module 实现极速热更新，与 Webpack 的 Bundle 模式有本质区别，面试中常对比两者优劣。

示例：自定义一个简单的 Webpack Loader 或 Plugin 来修改打包后的 HTML 标题。
③ 安全：XSS 与 CSRF

前端安全是上机题中容易被忽视但极重要的部分。如何防止 XSS（跨站脚本攻击）？通常涉及输入过滤、输出编码及 CSP 策略。CSRF（跨站请求伪造）则通常通过 Token 验证或 SameSite Cookie 属性来防御。

// 简单防 XSS 示例：转义 HTML 实体 function escapeHtml(str) { return str .replace(/&/g, "&") .replacereplace/g, ">") .replacereplace
④ HTTP/2 与 HTTP/3 新特性

随着网络环境改善，HTTP/2 的多路复用、头部压缩和服务器推送成为标配。了解这些协议如何提升前端加载速度，是展示技术视野加分项。HTTP/3 基于 QUIC 协议，进一步解决了队头阻塞问题。

模拟上机考试流程指引

为了确保大家在真实考试中从容应对，以下是典型的前端上机考试流程及注意事项：

环境准备：确认是否允许使用本地 IDE（如 VS Code）或在线编辑器。检查 Node.js 版本及包管理器（npm/yarn/pnpm）可用性。
审题环节：仔细阅读需求文档，特别是边界条件（如空数组、null 值、特殊字符）。不要急于写代码，先画流程图。
编码实现：优先实现核心功能，再处理边缘情况。保持代码整洁，变量命名规范，适当添加注释。
测试用例：编写单元测试或手动构造测试数据验证结果。注意时间复杂度和空间复杂度优化。
提交与复盘：提交前检查是否有 Console 报错或 Warning。考后及时复盘错题，查漏补缺。