JS 高频算法面试题（含详细真实面试版答案）

JS高频算法面试题（含详细真实面试版答案）前言：本题库为前端面试真实高频算法题，剔除冷门题型，答案以面试官认可的解题思路、精简可运行代码、通俗解释为主，适合跳槽、校招面试突击复习。一、基础数组算法（面试必考）1.数组去重（多种方法+优劣对比）题目：给定一个包含重复值的普通数组，去除重复元素，返回新数组，不修改原数组。方法1：Set最简写法（工作/面试首选）javascript

functionuniqueArr(arr){

return[...newSet(arr)];

}解析：Set数据结构特性是元素唯一，自动去重，扩展运算符转回数组。优点：代码极简、性能好；缺点：无法去重空对象、空数组（引用类型无法判断），仅适用于基础数据类型。方法2：indexOf遍历（兼容低版本，面试基础答法）javascript

functionuniqueArr(arr){

constres=[];

for(leti=0;i<arr.length;i++){

if(res.indexOf(arr[i])===-1){

res.push(arr[i]);

}

}

returnres;

}解析：遍历原数组，新数组中不存在当前元素则推入。缺点：性能一般，indexOf无法识别NaN，会导致NaN无法去重。方法3：includes遍历（可去重NaN）javascript

functionuniqueArr(arr){

constres=[];

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item);

}

})

returnres;

}2.数组扁平化（多维数组转一维）题目：将[1,[2,[3,4],5],6]多维数组扁平化，输出[1,2,3,4,5,6]方法1：flat原生API（最简）javascript

functionflatArr(arr){

//Infinity代表展开所有层级

returnarr.flat(Infinity);

}方法2：递归实现（面试手写必考，核心原理）javascript

functionflatArr(arr){

letres=[];

arr.forEach(item=>{

//判断是否为数组，递归遍历

if(Array.isArray(item)){

res=res.concat(flatArr(item));

}else{

res.push(item);

}

})

returnres;

}解析：核心思路：遇到数组递归拆解，普通值直接存入。面试官重点考察递归思维，面试优先手写递归版本。3.数组最大值、最小值（不调用Math内置方法）题目：手动遍历实现，获取数组最大、最小值javascript

functiongetMaxMin(arr){

letmax=arr[0];

letmin=arr[0];

for(leti=1;i<arr.length;i++){

if(arr[i]>max)max=arr[i];

if(arr[i]<min)min=arr[i];

}

return{max,min};

}二、字符串经典算法1.字符串反转题目：输入'abc123'，输出'321cba'javascript

functionreverseStr(str){

returnstr.split('').reverse().join('');

}手写原生遍历版（面试加分）javascript

functionreverseStr(str){

letres='';

for(leti=str.length-1;i>=0;i--){

res+=str[i];

}

returnres;

}2.统计字符串中出现次数最多的字符题目：输入'aabbccddeee'，输出出现最多的字符和次数javascript

functiongetMaxChar(str){

//用对象存储字符出现次数

constobj={};

letmaxNum=0;

letmaxChar='';

//遍历统计

for(leti=0;i<str.length;i++){

constchar=str[i];

obj[char]=obj[char]?obj[char]+1:1;

}

//遍历对象找最大值

for(letkeyinobj){

if(obj[key]>maxNum){

maxNum=obj[key];

maxChar=key;

}

}

return{char:maxChar,count:maxNum};

}解析：核心是哈希映射思想，用对象key存字符、value存次数，是前端最常用的统计算法。3.回文字符串判断题目：判断一个字符串是否是回文（正读和反读一致），如'abba'、'12321'javascript

functionisPalindrome(str){

constreverse=str.split('').reverse().join('');

returnstr===reverse;

}三、排序算法（前端面试高频手写）1.冒泡排序（必背，最简单入门排序）原理：相邻元素两两对比，大的往后排，每一轮遍历把最大值沉到末尾javascript

functionbubbleSort(arr){

constlen=arr.length;

//外层循环控制轮数

for(leti=0;i<len-1;i++){

//内层循环对比相邻元素

for(letj=0;j<len-1-i;j++){

if(arr[j]>arr[j+1]){

//交换位置

[arr[j],arr[j+1]]=[arr[j+1],arr[j]];

}

}

}

returnarr;

}缺点：时间复杂度O(n²)，数据量大性能差，适合基础面试手写。2.快速排序（面试核心，最常问优化排序）原理：选基准值，小于基准放左边，大于基准放右边，递归左右数组javascript

functionquickSort(arr){

//递归终止条件

if(arr.length<=1)returnarr;

//取中间值为基准

constmidIndex=Math.floor(arr.length/2);

constmidVal=arr.splice(midIndex,1)[0];

constleft=[];

constright=[];

//遍历分组

arr.forEach(item=>{

item<midVal?left.push(item):right.push(item);

})

//递归拼接

returnquickSort(left).concat(midVal,quickSort(right));

}解析：平均时间复杂度O(nlogn)，是前端实际开发、面试中最优的手写排序算法。四、递归算法经典题1.斐波那契数列题目：数列规则：1、1、2、3、5、8...前两项为1，后面每一项等于前两项之和，输入n，返回第n项值javascript

//基础递归版

functionfib(n){

if(n===1||n===2)return1;

returnfib(n-1)+fib(n-2);

}优化版（循环，解决递归重复计算卡顿）javascript

functionfib(n){

if(n===1||n===2)return1;

leta=1,b=1,res;

for(leti=3;i<=n;i++){

res=a+b;

a=b;

b=res;

}

returnres;

}2.阶乘计算题目：计算n!5!=5*4*3*2*1javascript

functionfactorial(n){

if(n===1)return1;

returnn*factorial(n-1);

}五、高频面试压轴算法1.两数之和（LeetCode简单第一题，前端必考）题目：给定数组和目标值，找出数组中两个相加等于目标值的元素下标，每个数只能用一次示例：nums=[2,7,11,15],target=9输出[0,1]javascript

//哈希优化版（时间复杂度O(n)，面试最优解）

functiontwoSum(nums,target){

constmap=newMap();

for(leti=0;i<nums.length;i++){

constdiff=target-nums[i];

if(map.has(diff)){

return[map.get(diff),i];

}

map.set(nums[i],i);

}

return[];

}解析：用Map存储遍历过的值和下标，每次计算差值，存在差值则直接返回下标，避免双层循环的冗余。2.去重+排序综合题（真实面试真题）题目：给定乱序重复数组，先去重，再从小到大排序javascript

functionhandleArr(arr){

//去重

constnewArr=[...newSet(arr)];

//排序

returnnewArr.sort((a,b)=>a-b);

}3.深浅拷贝算法（前端核心算法考点）浅拷贝手写javascript

functionshallowClone(obj){

//判断是否为对象

if(typeofobj!=='object'||obj===null)returnobj;

//区分数组和对象

constnewObj=Array.isArray(obj)?[]:{};

//遍历赋值

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

newObj[key]=obj[key];

}

}

returnnewObj;

}深拷贝手写（递归完整版，面试满分答案）javascript

functiondeepClone(obj){

//基础类型直接返回

if(typeofobj!=='object'||obj===null)returnobj;

//处理日期、正则

if(objinstanceofDate)returnnewDate(obj);

if(objinstanceofRegExp)returnnewRegExp(obj);

//创建新对象/数组

constnewObj=Array.isArray(obj)?[]:{};

//递归遍历所有属性

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

newObj[key]=deepClone(obj[key]);

}

}

ret