2025年前端通用面试题 #

JavaScript #

HTTP 状态码说一下 #

跨域与浏览器同源策略 #

跨域的产生原因 #

浏览器出于安全考虑，实施了 同源策略（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 如何解决数字精度丢失的问题 #

0.1 + 0.2 === 0.30000000000000004

javascript采用 IEEE 754 双精确度（64位）浮点运算规则，此标准下浮点数的小数部分最多支持 53 位二进制位

计算机存储数据时，会先将十进制数据转换为二进制，但是浮点数用二进制表示时是无穷的：

0.1 -> 0.0001 1001 1001 1001...(1100循环)
0.2 -> 0.0011 0011 0011 0011...(0011循环)

EEE 754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位，所以两者相加之后得到二进制为：

0.0100110011001100110011001100110011001100110011001100

因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了0.30000000000000004，所以在进行算术计算时会产生误差

解决方案 #

• 最简单的方法是使用toFixed，但它在某些情况下并不精确
• 将小数乘 10^n 转化为整数进行计算，之后再除以 10^n 还原为小数
• 将小数转为字符串，再进行模拟运算，大部分第三方库（如 bignumber.js，decimal.js，big.js）都在使用这种方案

如何监听DOM变化 #

使用 MutationObserver API

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true, // 观察目标子节点的变化，是否有添加或者删除
  attributes: true, // 观察属性变动
  subtree: true, // 观察后代节点，默认为 false
};

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

详见 MutationObserver

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执行的时机

参考文档 #

CSS Grid 网格布局教程

web前端面试 - 面试官系列

2025年前端面试准备js篇

【25届前端面试题】2025前端面试进阶指南-前端面试题大集合

2025最新出炉--前端面试题十

javascript的精度问题，包含原因和解决方案-面试总结