前端面试高频JavaScript算法题解析与实现
本文整理了前端面试中常见的高频JavaScript算法题，涵盖冒泡与快速排序、数组去重、深浅拷贝辨析、子串位置查找、不定长数组组合以及数字转中文大写等核心考点。通过具体代码示例解析解题思路，帮助开发者巩固基础，提升笔试与面试通过率。
面试算法题概览
在求职过程中，笔试环节通常不可或缺，其中算法题目是考察重点。
无论日常开发中是否频繁使用，掌握这些算法都是通过笔试的必要条件。
即便是直接面试环节，面试官也可能要求候选人现场编写算法代码。
受限于笔试时间，题目复杂度通常有限，但核心考点往往集中在以下几类。
接下来将列举几种最具代表性的算法题型。
排序算法：冒泡与快速排序
1. 排序算法
此类题目通常要求对给定数组进行排序，需注意区分升序或降序要求。以下示例均基于升序排列。
冒泡排序
var arr = [3,6,1,2,5];
var temp;
for(var i= 0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i] > arr[j]){
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);快速排序
function quicksort (arr){
if(arr.length<=1){
return arr;
}
var left = [];
var right = [];
var middle = arr[0];
for(var i=1;i<arr.length;i++){
if(arr[i]<middle){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quicksort(left).concat([middle],quicksort(right));
}
注意：优先使用快速排序而非冒泡排序。若未牢记快速排序实现，才考虑冒泡。因为快速排序涉及递归，更能考察候选人对递归算法的理解。
数组去重与拷贝机制
2. 数组去重
该题主要考察是否掌握利用对象存储元素出现次数来实现去重的思路。虽然解法多样，此处提供一种常见实现。
Array.prototype.unique = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique());3. JavaScript中的拷贝机制
此题旨在考察对深拷贝与浅拷贝概念的清晰辨析。
var a = {name:'Tom'}; var b = a; b.name = 'Peter';
请问变量 a.name 的值是多少？
正确答案为 Peter。若回答为 Tom，则需重新学习 JavaScript 的深拷贝机制。
若需拷贝的对象为数组：
slice 和 concat 方法均可直接实现数组的深拷贝。
arr.slice();
arr.concat();具体解法如下。当然，可能存在更优的实现方式。
function deepCopy(source){
var result = {};
for(var i in source){
if(typeof source[i] === "object"){
result[i] = deepCopy(source[i]);
}else{
result[i] = source[i];
}
}
return result;
}字符串处理与数组组合
4. 获取字符串中子串出现的所有位置
function appear(str,str_target){
var n = 0;
var result = [];
while(str.indexOf(str_target,n)!=-1 && n < str.length){
result.push(str.indexOf(str_target,n));
n = str.indexOf(str_target,n) + str_target.length;
}
return result;
}
var arr = appear('abascbascbabasbascbascascbab','ab');
console.log(arr);5. 不定数量数组的遍历组合算法
对此题进行解释。该场景在实际开发中确有应用，特别是在电商网站 SKU 算法中极为常见。
题意即对不确定数量的数组（如 [1,2,3], [4,5] 等）进行遍历组合，生成类似 [[1,4],[1,5],[2,4],[2,5],[3,4],[3,5]] 的结果。数组数量越多，组合结果呈指数级增长。
实现方法方面，经查阅现有算法未找到完美方案，故自行编写。代码可能存在瑕疵，仅供参考。
若有更优写法，欢迎评论指导。
function group(arr,re){
if(arr.length <=0){
return re;
}
if(!re){
var arr = arr.slice();
var re = arr.shift();
return group(arr,re);
}else{
var now = arr.shift();
var newre = [];
for(var j=0;j<now.length;j++){
for(var k=0;k<re.length;k++){
var temp = [];
if(re[k] instanceof Array){
temp = re[k];
}else{
temp.push(re[k]);
}
newre.push(temp.concat(now[j]));
}
}
return group(arr,newre);
}
}
var arr = [['a','b','c'],['e','d','f'],['h','i'],['j','k','l','m']];
// var arr = [['a','b','c'],['e','d','f'],['h','i']];
// console.log(arr);
var result = group(arr);
console.log(result); 综合算法与数字处理
6. LazyMan 实现（考察内容综合）
此题建议自行通过搜索引擎查询“LazyMan 面试题”以获取更多信息。
7. 编写函数 fn(Number n)，将数字转换为中文大写输出，例如输入 123，输出一百二十三。
此题灵感来源于站内某篇文章，颇具趣味性。
以下是参考代码。
function fn(n){
if(!/^([1-9]\d*)/.test(n)){
return '非法数据';
}
var unit = '千百十亿千百十万千百十个';
if(n.length > unit.length){
return '数据过长';
}
var newStr = '';
var nlength = n.length;
unit = unit.substr(unit.length - nlength);
for(var i = 0; i < nlength; i++){
newStr += '零一二三四五六七八九'.charAt(n[i]) + unit.charAt(i);
}
newStr = newStr.substr(0,newStr.length-1);
newStr = newStr.replace(/零(千|百|十)/g,'零').replace(/(零)+/g,'零').replace(/零(亿|万)/g,'$1');
return newStr;
}
console.log(fn('205402002103'));8. 浮点数左侧每三位添加逗号分隔符
例如将 1200000.11 转换为 12,000,000.11。
result = num && num.toString().replace(/(\d)(?=(\d{3})+\.)/g,function($1,$2){
return $2 + ',';
})上述解法采用正则表达式，当然也可使用其他方法实现。
以上即为面试常见题目，可能存在遗漏，欢迎补充。
切勿仅阅读而不动手编写，否则看似理解实则无法独立写出。
至此内容结束。
希望本文内容对大家的学习或工作有所帮助，感谢支持。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
相关标签：