前端面试基础算法及设计模式-编程知识

前端面试基础算法及设计模式

news/2025/3/4 9:28:43/文章来源:https://www.cnblogs.com/crispyChicken/p/18749821

一、前端常见基础算法及回答思路

1. 数组/字符串处理

• 两数之和
问题：在数组中找出两数之和等于目标值的索引。
解法：使用哈希表存储差值，时间复杂度O(n)。

const twoSum = (nums, target) => {const map = new Map();for (let i = 0; i < nums.length; i++) {const complement = target - nums[i];if (map.has(complement)) return [map.get(complement), i];map.set(nums[i], i);}
};

• 最长无重复子串
问题：求字符串中最长不重复子串的长度。
解法：滑动窗口+哈希表，记录字符最近出现的位置。

2. DOM遍历

• 深度优先遍历（DFS）
问题：遍历DOM树并返回所有标签名。
解法：递归遍历子节点，适用于菜单树、组件嵌套等场景。

function dfs(node, result = []) {result.push(node.tagName);for (const child of node.children) dfs(child, result);return result;
}

• 广度优先遍历（BFS）
解法：使用队列逐层遍历，常用于按层级处理节点。

function bfs(root) {const queue = [root], result = [];while (queue.length) {const node = queue.shift();result.push(node.tagName);queue.push(...node.children);}return result;
}

3. 排序与搜索

• 快速排序
解法：分治思想，时间复杂度O(n log n)。

const quickSort = (arr) => {if (arr.length <= 1) return arr;const pivot = arr.pop();const left = arr.filter(x => x <= pivot);const right = arr.filter(x => x > pivot);return [...quickSort(left), pivot, ...quickSort(right)];
};

• 二分查找
问题：在有序数组中快速定位目标值。
解法：双指针缩小范围，时间复杂度O(log n)。

4. 动态规划与贪心算法

• 爬楼梯问题
问题：每次爬1或2阶，到第n阶有多少种方法？
解法：动态规划，状态转移方程为dp[i] = dp[i-1] + dp[i-2]。

const climbStairs = (n) => {let [a, b] = [1, 1];for (let i = 2; i <= n; i++) [a, b] = [b, a + b];return b;
};

• 买卖股票的最佳时机
解法：贪心算法，维护最小买入价和最大利润。

二、设计模式及回答思路

1. 单例模式（Singleton）

• 应用场景：全局状态管理（如Redux Store）、浏览器缓存对象。
• 回答示例：

const Singleton = (function () {let instance;function createInstance() { return { /* 配置或状态 */ }; }return { getInstance: () => instance || (instance = createInstance()) };
})();

2. 工厂模式（Factory）

• 应用场景：动态创建组件（如React组件库）、配置对象生成。
• 示例：

function createButton(type) {switch (type) {case 'primary': return new PrimaryButton();case 'secondary': return new SecondaryButton();default: throw new Error('Invalid type');}
}

3. 观察者模式（Observer）

• 应用场景：事件监听（如DOM事件）、状态管理（如Vue响应式系统）。
• 核心：解耦发布者与订阅者，通过事件触发更新。

4. 代理模式（Proxy）

• 应用场景：图片懒加载、API请求拦截（如Axios拦截器）。
• 示例：

const proxyImage = (src) => ({load: () => {const img = new Image();img.src = src;img.onload = () => console.log('Image loaded');}
});

5. 装饰者模式（Decorator）

• 应用场景：高阶组件（HOC）、日志记录、权限校验。
• 示例：

function withLogger(Component) {return function WrappedComponent(props) {console.log('Rendered:', Component.name);return <Component {...props} />;};
}