面试题总结3本文档包含 17 个前端面试问题，覆盖网络基础、浏览器特性、JavaScript 核心、布局方案、Vue 框

1. 状态码有哪些？每个代表什么意思？

HTTP 状态码分为五类：

1xx：信息类，表示请求已接收，继续处理。
2xx：成功类，比如：
- 200 OK：请求成功。
- 201 Created：成功创建资源。
3xx：重定向，比如：
- 301 Moved Permanently：永久重定向。
- 302 Found：临时重定向。
4xx：客户端错误，比如：
- 400 Bad Request：请求参数错误。
- 401 Unauthorized：未授权。
- 404 Not Found：资源不存在。
5xx：服务器错误，比如：
- 500 Internal Server Error：服务器内部错误。
- 503 Service Unavailable：服务不可用。

类比解释： 把状态码比作“快递状态”：

1xx 像“已发货，正在处理中”；
2xx 像“签收成功”；
3xx 像“包裹转寄”；
4xx 像“收件地址错误”；
5xx 像“快递公司爆仓”。

2. 浏览器的存储有些什么？除了比较常见的本地存储，会话存储，cookie，还有能存储比较大的嘛？

常见存储方式包括：

Cookie：4KB，小，自动随请求发送，常用于身份验证。
localStorage：5MB，永久保存。
sessionStorage：5MB，标签页关闭就清除。
IndexedDB：支持几百 MB～GB 的结构化数据存储，适合大数据。
Cache Storage：Service Worker 的缓存，用于离线网页。

大文件或离线数据（如图片缓存、音乐、离线表单）我会选 IndexedDB 或 Cache API。

3. flex=1是哪些的简称，就是这个缩写代表了哪些东西？类似的还有border=1，也是一个缩写

flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的简写。
代表元素可以等比放大、缩小，占满剩余空间。

类似的缩写： border: 1px solid #000; 是 border-width、border-style、border-color 的简写。

4. grid布局你熟悉哪些？用在什么里面，就是说一下你熟悉的哪些布局操作？

核心属性：grid-template-columns/rows（定义行列）、gap（间距）、grid-area（区域划分）、justify-items/align-items（对齐）、fr（比例单位）
用途：复杂二维布局（仪表盘、多列卡片、页面主结构：头部 / 侧边栏 / 内容区）

5. flex和grid布局你要怎么抉择使用哪一个？就是遇到问题你要选择哪一个作为这个布局的？

答法：

Flex：一维布局（行或列），用于内容对齐、分布；
Grid：二维布局（行+列），用于复杂页面结构。

记法：

“Flex 排一行，Grid 排一盘。”

例子：

导航栏 → Flex；
后台管理页面 → Grid。

5. 浏览器的缓存，这个你要怎么解决？有哪些解决方式？

浏览器缓存主要有：

强缓存（Expires / Cache-Control） ：直接从缓存读取；
协商缓存（ETag / Last-Modified） ：询问服务器是否更新。

解决缓存更新问题：

文件名加 hash；
使用 meta 禁用缓存；
控制响应头：Cache-Control: no-cache。

6. 你用过ai工具辅助开发嘛？怎么利用这个工具提高你的开发效率？能不能举一个实际的例子来说明你是怎么使用AI工具解决问题的。

答法：

有，我经常用 AI 工具（如 ChatGPT、Copilot）来提升效率。

举例：
1. 比如写 Vue 组件时，我让 AI 帮我：

快速生成表单模板；
调试报错提示；
优化逻辑。

2. 生成一个todolist的提示词

现在, 我们要实现一个TodoList的项目, 使用当前目录做为根目录

技术栈

使用vite作为打包工具
使用vue3框架组合式API语法
使用js语言

项目要求

以组件化的方式组织文件
生成必要的组件 TodoHeader TodoList TodoItem TodoFooter

界面

参考图片

功能

添加功能

当按下回车键或者点击添加按钮, 会添加一条待办事项列表功能

编辑功能

在列表中, 能够修改通过点击checkbox切换完成/未完成的状态
在列表中, 能够点击进行内容编辑

删除功能

在列表中, 点击删除按钮可以删除待办事项

在Footer组件中

有全选/全不选按钮
显示已办事项/全部事项

其它功能

可以支持拖拽
使用localstorage做数据的持久化

7. 闭包是什么，优点是什么？缺点是什么？要怎么解决它的缺点？可以怎么做？

标准答法：
闭包是：函数内部引用了外部函数的变量，即使外部函数执行完，变量仍能访问。

优点：

保留变量状态；
封装私有变量。

缺点：

占内存，可能导致内存泄漏。

解决方法：

用完后将函数引用置为null，或用let/const块级作用域限制生命周期

例子：

function createCounter() {
  let count = 0;
  return () => ++count;
}

8. var，let，const，这三者有些什么区别？

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
是否可重复声明	✅	❌	❌
是否可修改	✅	✅	❌（值不变）
是否存在变量提升	✅（值 undefined）	✅（TDZ）	✅（TDZ）

💬 通俗类比：

var 像班级公共抽屉，谁都能改；
let 像个人文件柜；
const 像保险柜——放进去后不能动。

9. 变量提升和函数的提升，这两个谁先谁后，这个你了解多少？就是同时设置同一个，谁会起作用，这个你知道嘛？（var和function）

优先级：函数声明 > 变量声明（var）

同名场景：编译阶段先提升函数，再提升 var（var 声明会被忽略，不改变函数指向）；执行阶段若有变量赋值，才会覆盖函数。

console.log(fn); // [Function]
function fn() {}
var fn = 10;

//拆解编译和执行过程：
//-   **编译阶段（提升）** ：
//1.  先提升函数声明`function fn() {}`，此时作用域中`fn`指向该函数；
//2.  再提升`var fn`，但由于作用域中已有`fn`（函数），`var`的声明被忽略（不改变`fn`的指向）。
//-   **执行阶段**：
//执行`console.log(fn)`时，`fn`仍指向提升的函数（因为`var fn = 10`的赋值操作还没执行）； 
//后续执行`var fn = 10`时，才会将`fn`重新赋值为 10（覆盖函数）。

→ 打印函数，因为函数提升在前。

其实这个涉及到作用域的知识，作用域（Scope）是变量和函数可访问的范围。JavaScript 中主要有三种作用域类型：

全局作用域：在任何地方都能访问的变量。

函数作用域：在函数内部声明的变量，只能在函数内部使用。

块级作用域：let、const 在 {} 内部定义，只在当前代码块内有效。

当访问一个变量时，JavaScript 引擎会沿着作用域链从内向外查找，直到找到为止；若没找到则抛出 ReferenceError。

📊 图解：作用域链查找过程

10. vue3相对于vue2，它好在哪里？

逻辑复用：Composition API 替代 Options API，更灵活
性能：用 Proxy 替代Object.defineProperty，响应式更高效
体积：打包体积更小
类型支持：原生支持 TypeScript
新特性：Suspense（异步组件）、Teleport（组件瞬移）、Fragments（无根节点）

11. 你为什么学vue，不是选择react，这两者有些什么区别？

Vue 学习曲线平滑，语法直观，文档完善；
React 更灵活但上手门槛高。

对比点	Vue	React
数据绑定	双向	单向
模板语法	模板 + 指令	JSX
学习成本	低	高
适用场景	快速开发	大型项目

12. 你是怎么学习一门新技术的？你怎么知道一个新技术的产生，可以从哪些渠道获取？

答法：

先看官方文档；
再看视频 / 教程；
实战项目；
看源码或社区讨论。

信息来源：
掘金、知乎、YouTube、GitHub、官方博客。

13. 数组的去重有些什么方式？

3 种常用方式：

// 1. Set去重（最简）
[...new Set(arr)];
// 2. filter+indexOf
arr.filter((v, i) => arr.indexOf(v) === i);
// 3. reduce累加
arr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []);

14. set为什么能去重，你知道里面的原理嘛？还有一个map，这两者之间有什么区别？

Set：存储唯一值（无键），用SameValueZero算法判断唯一性，适合去重
Map：键值对形式（key-value）（key 可任意类型，如对象 / 函数），适合关联数据存储

15. 如果后端没有报错，你要怎么解决这个问题？还有你要怎么控制台接口的错误，怎么判断是不是后端的问题，然后找后端去解决

控制台 → Network 面板 看接口是否请求；
看 状态码 / 响应内容；
前端打印接口参数；
用 try...catch 捕获前端逻辑错误；
若请求正常但无数据 → 再与后端确认。

16. 怎么下载内容为PDF格式，这个要怎么实现

用第三方库（如 jsPDF）：

import jsPDF from "jspdf"; 
const pdf = new jsPDF(); 
pdf.text("内容", 10, 10); // 写入内容 
pdf.save("文件名.pdf"); // 下载

用浏览器 Blob API：

const blob = new Blob([content], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'file.pdf';
link.click();

17. Promise在项目中使用过嘛？

答法：

是的，比如请求接口、定时任务、异步操作时。

用于异步操作（接口请求、定时任务等），示例：

// 接口请求示例
getUser().then(res => setUser(res)) // 成功回调
         .catch(err => console.error(err)); // 失败回调
// 也可结合async/await简化语法

或在 Vue 中结合 async/await。