全栈面试八股

学习顺序 序号 模块 知识点 1 SQL 基础 SQL 执行顺序 2 SQL 基础 GROUP BY 3 SQL 基础 WHERE 4 SQL 基础 HAVING 5 SQL 聚合 COUNT(*) 6 SQL 聚合 COUNT(col) 7 SQL 聚合 COUNT(DISTINCT col) 8 SQL 聚合 SUM 9 SQL 聚合 AVG 10 SQL 聚合 MAX 11 SQL 聚合 MIN 12 SQL 时间 时间范围筛选 13 SQL 优化 索引是否生效判断 14 SQL JOIN INNER JOIN 15 SQL JOIN LEFT JOIN 16 SQL JOIN LEFT JOIN + COUNT 17 SQL JOIN LEFT JOIN + WHERE 陷阱 18 SQL 思维 行级计算 vs 组级计算 19 SQL 思维 聚合函数计算对象理解 20 Web 基础 HTTP 请求方法 21 Web 基础 HTTP 状态码 22 Web 基础 HTTP 请求 / 响应结构 23 Web 基础 Cookie 24 Web 基础 Session 25 Web 基础 Token / JWT 26 Web 基础 RESTful 设计原则 27 Web 基础 跨域(CORS) 28 Web 通信 前后端交互流程 29 网络与浏览器 浏览器渲染流程 30 网络与浏览器 资源加载顺序 31 网络与浏览器 浏览器缓存机制 32 前端基础 HTML 语义化 33 前端基础 HTML 表单 34 前端基础 CSS 盒模型 35 前端基础 CSS 布局(Flex) 36 前端基础 CSS 布局(Grid) 37 前端基础 CSS 定位(position) 38 前端基础 CSS 常见居中方案 39 前端基础 CSS 响应式设计 40 前端基础 JavaScript 基础 41 前端基础 ES6+ 语法 42 前端基础 作用域 / 闭包 43 前端基础 this 绑定规则 44 前端基础 原型链 45 前端基础 DOM 操作 46 前端基础 事件冒泡与捕获 47 前端基础 Event Loop 48 React 核心 JSX 49 React 核心 组件化思想 50 React 核心 Props 51 React 核心 State 52 React 核心 Hooks(useState) 53 React 核心 Hooks(useEffect) 54 React 进阶 Hooks 规则 55 React 进阶 useMemo 56 React 进阶 useCallback 57 React 进阶 Context 58 React 进阶 受控组件 59 React 进阶 非受控组件 60 React 性能 组件重渲染机制 61 React 性能 key 的作用 62 React 性能 memo 63 React 性能 状态提升 64 React 性能 副作用管理 65 React 工程化 项目结构设计 66 React 工程化 状态管理基础 67 React 工程化 数据请求与管理 68 数据库基础 事务基本概念 69 数据库基础 ACID 70 数据库基础 事务隔离级别 71 数据库基础 脏读 / 不可重复读 / 幻读 72 并发基础 进程 73 并发基础 线程 74 并发基础 进程 vs 线程 75 并发基础 地址空间 76 并发基础 共享内存 77 并发基础 并发问题根因 78 并发基础 原子性 79 并发基础 非原子操作(count++) 80 并发控制 synchronized 81 并发控制 volatile 82 并发控制 AtomicInteger 83 并发控制 CAS 84 并发控制 可见性 85 并发控制 有序性 86 并发模型 竞态条件 87 并发模型 线程安全 88 并发模型 锁机制 89 内存模型 栈 vs 堆 90 内存模型 对象生命周期 91 内存模型 内存泄漏 92 内存模型 GC 基本概念 93 数据结构基础 数组 94 数据结构基础 哈希表 95 数据结构基础 时间复杂度 96 数据结构基础 常见查找 97 综合 全栈笔试综合模拟 98 综合 前后端面经高频题 知识点详解 SQL 基础 知识点 范围 概念定义 示例 SQL 执行顺序 查询整体流程 SQL 实际执行顺序为:FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT SELECT b, COUNT(*) FROM t WHERE a>1 GROUP BY b HAVING COUNT(*)>1 GROUP BY 行 → 组 将多行按 key 分组,后续聚合函数按"组"计算 SELECT user_id, SUM(amount) FROM orders GROUP BY user_id WHERE 行级过滤 在分组前逐行过滤数据,不能使用聚合函数 WHERE amount > 100 HAVING 组级过滤 在分组后对"组"进行过滤,可使用聚合函数 HAVING SUM(amount) > 200 SQL 聚合 知识点 范围 概念定义 示例 COUNT(*) 行数统计 统计作用范围内的行数,不忽略 NULL COUNT(*) COUNT(col) 非 NULL 计数 统计 col 不为 NULL 的行数 COUNT(amount) COUNT(DISTINCT col) 去重计数 统计 col 中不同且非 NULL 的值个数 COUNT(DISTINCT user_id) SUM 数值求和 对非 NULL 数值求和,若全为 NULL 则结果为 NULL SUM(amount) AVG 平均值 等价于 SUM(col) / COUNT(col),忽略 NULL AVG(amount) MAX 最大值 / 存在性 返回最大非 NULL 值,常用于"是否存在"判断 HAVING MAX(amount) >= 100 MIN 最小值 / 全称性 返回最小非 NULL 值,常用于"是否全部满足" HAVING MIN(amount) >= 100 SQL 时间 知识点 范围 概念定义 示例 时间范围筛选 时间条件 推荐使用左闭右开区间,避免精度问题 created_at >= '2024-01-01' AND created_at < '2024-02-01' SQL 优化 知识点 范围 概念定义 示例 索引生效判断 索引使用 索引是否生效取决于能否从索引最左列定位扫描起点 WHERE age = 18 AND created_at >= '2024-01-01' SQL JOIN 知识点 范围 概念定义 示例 INNER JOIN 交集 仅保留两表匹配成功的行 FROM u INNER JOIN o ON u.id = o.user_id LEFT JOIN 左表保留 保留左表所有行,右表无匹配则为 NULL FROM u LEFT JOIN o ON u.id = o.user_id LEFT JOIN + COUNT 计数陷阱 COUNT(*) 数行,COUNT(右表列) 数匹配行 COUNT(o.id) LEFT JOIN + WHERE 陷阱 语义变化 WHERE 引用右表会过滤 NULL,使 LEFT JOIN 退化为 INNER JOIN LEFT JOIN o ON ... WHERE o.col > 1 SQL 思维 知识点 范围 概念定义 示例 行级计算 vs 组级计算 计算层级 行级先算再聚合;组级先聚合再算 SUM(amount * 0.9) vs SUM(amount) * 0.9 聚合函数计算对象理解 计算对象 聚合函数计算的是"表达式结果集合",不是行本身 COUNT(CASE WHEN amount >= 100 THEN 1 END)

January 8, 2026 · 4 min

107

107 Code const addPerson = (event) => { // event.preventDefault(); const personObject = { name: newName, id: persons.length + 1, number: newNumber, }; if (persons.some((person) => person.name === newName)) { if ( window.confirm( `${newName} is already in the phonebook, replace the old number with new one? ` ) ) { const person = persons.find((person) => person.name === newName); const updatedPerson = { ...person, number: newNumber }; axios .put(`http://localhost:3002/persons/${person.id}`, updatedPerson) .then((response) => { const responseData = response.data; setPersons((prev) => prev.map((p) => (p.id === person.id ? responseData : p)) ); }); } } else { axios .post("http://localhost:3002/persons", personObject) .then((response) => { const responseData = response.data; setPersons(responseData.concat(personObject)); setNewName(""); setNewNumber(""); }); } 功能描述 这是一个 React 电话簿应用中的添加/更新联系人功能,支持新增联系人或更新已存在联系人的电话号码。 ...

October 7, 2025 · 2 min