结合Vue3开发实际场景（表单处理、列表渲染、数据处理、路由/树形数据），整理了前端面试和工作中最常用的8道手写算法题，纯JS实现，在Vue3中可直接复用。
1. 数组去重
场景：去重下拉选项、表格数据、路由菜单等
// 方法1：Set最简写法
const uniqueArr = (arr) => [...new Set(arr)];
// 方法2：原生遍历（面试手写）
const uniqueArr2 = (arr) => {
const res = [];
arr.forEach(item => {
if (!res.includes(item)) res.push(item);
});
return res;
};
// 测试
console.log(uniqueArr([1,2,2,3,3,3])); // [1,2,3]2. 深拷贝
场景：拷贝props、state，避免对象引用污染
function deepClone(obj) {
// 基础类型直接返回
if (typeof obj !== 'object' || obj === null) return obj;
// 处理数组/对象
const result = Array.isArray(obj) ? [] : {};
for (let key in obj) {
// 递归拷贝
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key]);
}
}
return result;
}
// 测试
const obj = { a: 1, b: { c: 2 } };
const newObj = deepClone(obj);
newObj.b.c = 99;
console.log(obj.b.c); // 2 原数据不受影响3. 防抖
场景：输入框实时搜索、窗口resize、滚动优化
function debounce(fn, delay = 300) {
let timer = null;
return (...args) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// Vue3中使用
const handleSearch = debounce(() => {
console.log('发送搜索请求');
}, 500);4. 节流
场景：滚动加载、按钮频繁点击、动画
function throttle(fn, delay = 300) {
let flag = true;
return (...args) => {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, args);
flag = true;
}, delay);
};
}
// Vue3滚动加载使用
const handleScroll = throttle(() => {
console.log('加载下一页');
}, 1000);5. 树形数据扁平化
场景：后台返回树形菜单，转成一维数组用于权限判断
// 树结构扁平化
function treeToArray(tree) {
let res = [];
const fn = (data) => {
data.forEach(item => {
res.push(item);
// 递归子节点
if (item.children && item.children.length) {
fn(item.children);
}
});
};
fn(tree);
return res;
}
// 测试数据
const tree = [
{ id:1, name:'首页', children:[{id:2,name:'子页面'}] }
];
console.log(treeToArray(tree));
// [{id:1,name:'首页'},{id:2,name:'子页面'}]6. 数组转树形结构
场景：后台返回一维数组，转成树形菜单渲染
function arrayToTree(arr, pid = 0) {
return arr
.filter(item => item.parentId === pid)
.map(item => ({
...item,
// 递归子节点
children: arrayToTree(arr, item.id)
}));
}
// 测试数据
const arr = [
{ id:1, name:'首页', parentId:0 },
{ id:2, name:'子页面', parentId:1 }
];
console.log(arrayToTree(arr));7. 数组扁平化
场景：处理多级分类、表格嵌套数据
// 方法1：递归（面试手写）
function flatten(arr) {
let res = [];
arr.forEach(item => {
Array.isArray(item) ? res = res.concat(flatten(item)) : res.push(item);
});
return res;
}
// 方法2：ES6一行代码
const flatten2 = (arr) => arr.flat(Infinity);
// 测试
console.log(flatten([1,[2,[3,4],5]])); // [1,2,3,4,5]8. 快速排序
场景：自定义表格排序、数据排序
function quickSort(arr) {
if (arr.length <= 1) return arr;
// 基准值
const mid = arr[0];
const left = [];
const right = [];
for (let i = 1; i < arr.length; i++) {
arr[i] < mid ? left.push(arr[i]) : right.push(arr[i]);
}
// 递归
return [...quickSort(left), mid, ...quickSort(right)];
}
// 测试
console.log(quickSort([3,1,5,2,4])); // [1,2,3,4,5]总结
高频必背：深拷贝、防抖节流、数组去重、树结构互转
Vue3核心：防抖节流用于性能优化，深拷贝用于避免响应式污染
面试高频：快速排序、树形数据处理（前端业务最常考）
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！