前端面试常考算法题目详解

根据2025年最新前端面试趋势，结合腾讯、阿里等大厂真题，我为你整理了以下高频算法题型及JS实现方案：

一、数组/字符串处理

1. 两数之和（哈希表法）

问题：找出数组中两数之和等于目标值的索引

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);  // 存储数值与索引的映射关系
    }
};
// 时间复杂度O(n)，空间复杂度O(n)

2. 最长无重复子串（滑动窗口）

问题：求字符串中最长不重复字符的子串长度

const lengthOfLongestSubstring = (s) => {
    let map = new Map(), max = 0, left = 0;
    for (let right = 0; right < s.length; right++) {
        if (map.has(s[right])) left = Math.max(left, map.get(s[right]) + 1);
        map.set(s[right], right);  // 更新字符最新位置
        max = Math.max(max, right - left + 1);  // 窗口扩展时更新最大值
    }
    return max;
};
// 时间复杂度O(n)，空间复杂度O(k)（k为字符集大小）

二、排序算法

1. 快速排序（分治思想）

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(n log n)，最坏O(n²)

2. 冒泡排序（基础必考）

function bubbleSort(arr) {
    for (let i = 0; i < arr.length-1; i++) {
        for (let j = 0; j < arr.length-1-i; j++) {
            if (arr[j] > arr[j+1]) {
                [arr[j], arr[j+1]] = [arr[j+1], arr[j]];  // 相邻元素交换
            }
        }
    }
    return arr;
}
// 时间复杂度O(n²)，空间复杂度O(1)

三、链表操作

1. 反转链表（迭代法）

function reverseList(head) {
    let prev = null, curr = head;
    while (curr) {
        const next = curr.next;  // 暂存后续节点
        curr.next = prev;        // 反转指针方向
        prev = curr;             // 前移prev指针
        curr = next;             // 前移curr指针
    }
    return prev;
};
// 时间复杂度O(n)，空间复杂度O(1)

2. 合并有序链表（递归）

const mergeTwoLists = (l1, l2) => {
    if (!l1) return l2;
    if (!l2) return l1;
    if (l1.val < l2.val) {
        l1.next = mergeTwoLists(l1.next, l2);
        return l1;
    } else {
        l2.next = mergeTwoLists(l1, l2.next);
        return l2;  // 递归拼接较小节点
    }
};
// 时间复杂度O(m+n)，空间复杂度O(m+n)

四、动态规划

1. 爬楼梯问题（斐波那契变种）

const climbStairs = (n) => {
    let [a, b] = [1, 1];
    for (let i = 2; i <= n; i++) 
        [a, b] = [b, a + b];  // 滚动数组优化空间
    return b;
};
// 时间复杂度O(n)，空间复杂度O(1)

2. 最大子序和

const maxSubArray = (nums) => {
    let pre = 0, maxAns = nums;
    nums.forEach(x => {
        pre = Math.max(pre + x, x);  // 判断是否舍弃前面序列
        maxAns = Math.max(maxAns, pre);
    });
    return maxAns;
};
// 时间复杂度O(n)，空间复杂度O(1)

五、设计类问题

1. 实现Promise.all

Promise.myAll = (promises) => {
    return new Promise((resolve, reject) => {
        let results = [], count = 0;
        promises.forEach((p, i) => {
            p.then(res => {
                results[i] = res;
                if (++count === promises.length) resolve(results);  // 全部完成后返回
            }).catch(reject);  // 任一失败立即终止
        });
    });
};

2. 节流函数（Throttle）

function throttle(fn, delay) {
    let last = 0;
    return (...args) => {
        const now = Date.now();
        if (now - last < delay) return;
        last = now;
        fn.apply(this, args);  // 固定时间间隔触发
    };
}

高频考点总结

练习建议：建议在LeetCode上重点练习「前端面试高频题库」标签下的题目，并注意边界条件处理（如空数组、单节点链表等特殊场景）。实际面试中，面试官常会要求手写代码后口述时间/空间复杂度及优化思路。