2025年前端通用面试题
JavaScript
HTTP 状态码说一下
| 状态码 | 类别 | 常见状态码 |
|---|---|---|
| 1xx | 信息响应 | 100（继续）、101（切换协议） |
| 2xx | 成功 | 200（OK）、201（已创建） |
| 3xx | 重定向 | 301（永久重定向）、302（临时重定向）、304（未修改） |
| 4xx | 客户端错误 | 400（错误请求）、401（未授权）、403（禁止）、404（未找到） |
| 5xx | 服务端错误 | 500（内部错误）、502（网关错误）、503（服务不可用） |
跨域与浏览器同源策略
跨域的产生原因
浏览器出于安全考虑，实施了 同源策略（Same-Origin Policy），限制以下行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM和JS对象无法获得
- AJAX 请求不能发送
同源的定义：协议、域名、端口均相同
解决方案
CORS（跨域资源共享）：
设置响应头：Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 和 Access-Control-Allow-Credentials
JSONP：利用
<script>标签的跨域能力，通过回调函数获取数据WebSocket协议跨域
postMessage
nginx代理
数据类型检测
typeof:数组，对象，null 都会判断返回Object，其他可以正常返回。
instanceof:可以正常的判断对象的类型是判断在其原型链中能否找到该类型的原型，
数组的原生方法
转换字符串：toString(), toLocalString(), join()
尾部操作：pop(), push()
首部操作：shift(), unshift()
排序： reverse(), sort()
链接：concat()
截取：slice()
插入：splice()
查找特定项：find()
查找特定项的索引：indexOf(), lastIndexOf()
迭代：every(), some(), filter(), map(), forEach()
归并：reduce(), reduceRight()
闭包
JS忍者秘籍(P90)：闭包允许函数访问并操作函数外部的变量
红宝书：闭包是指有权访问另外一个函数作用域中的变量的函数
MDN：闭包是指那些能够访问自由变量的函数。这里的自由变量是外部函数作用域中的变量
总结：闭包是指有权访问另一个函数作用域中变量的函数
应用：
- 回调函数
- 节流防抖
- 柯里化实现
Javascript 如何解决数字精度丢失的问题
javascript
0.1 + 0.2 === 0.30000000000000004
javascript采用 IEEE 754 双精确度（64位）浮点运算规则，此标准下浮点数的小数部分最多支持 53 位二进制位
计算机存储数据时，会先将十进制数据转换为二进制，但是浮点数用二进制表示时是无穷的：
shell
0.1 -> 0.0001 1001 1001 1001...(1100循环)
0.2 -> 0.0011 0011 0011 0011...(0011循环)
EEE 754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位，所以两者相加之后得到二进制为：
shell
0.0100110011001100110011001100110011001100110011001100
因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了0.30000000000000004，所以在进行算术计算时会产生误差
解决方案
- 最简单的方法是使用toFixed，但它在某些情况下并不精确
- 将小数乘 10^n 转化为整数进行计算，之后再除以 10^n 还原为小数
- 将小数转为字符串，再进行模拟运算，大部分第三方库（如 bignumber.js，decimal.js，big.js）都在使用这种方案
如何监听DOM变化
使用 MutationObserver API
javascript
var targetNode = document.querySelector("#someElement");
var observerOptions = {
childList: true, // 观察目标子节点的变化，是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true, // 观察后代节点，默认为 false
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
CSS
盒模型
一个盒子由四个部分组成：content、padding、border、margin
怪异盒模型、标准盒模型的差别：
- 标准盒模型的总宽度 = width + padding + border + margin，高度 = height + padding + border + margin
- 怪异盒模型的总宽度 = width + margin，高度 = eight + margin，也就是说，怪异盒模型的宽度与高度值内包含了 padding 和 border
flex布局与grid布局
flex布局是一种一维布局，它有四个最主要的概念：
- 容器：在一个盒子上面设置 display:flex，那么这个盒子就是一个 flex 容器
- 项目：容器的直接子元素
- 主轴：flex-direction所指向的方向，默认从左向右
- 交叉轴：与主轴垂直的方向
它可以很方便地处理项目的排列方式，如排列方向、水平垂直居中、缩放等
grid布局是CSS中最强大的布局方案，它可以以任意方式组合不同的网格，做出复杂的布局
grid布局中同样有容器与项目的概念，设置了 display: grid; 的盒子即为容器，其直接子元素为项目
容器中水平区域称为“行”（row），垂直区域称为“列”（column），行和列的交叉区域称为“单元格”（cell），正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格
不确定宽高元素居中方案
- position定位 + transform: translate
- position定位 + margin
- flex布局
- grid布局
- table布局
Vue
单向数据流
父级的prop的更新会向下流动到子级的prop里，但是反过来不可以， 若想反过来，只能通过$emit派发一个自定义事件，父组件接到后由父组件修改
computed和watch的区别
computed是计算属性，其结果具有缓存属性，只有它依赖的值发生变化，才会在下次获得computed的值的时候重新计算computed。一般在进行数值计算并且依赖他的结果时使用
watch更多是“监视作用”，一般在异步执行或者开销较大时使用。开销较大的操作指的是当数据发生变化时执行的复杂的业务逻辑
扩展：computed执行的时机