算法是程序的灵魂，一个优秀前端工程师对算法也是要有所了解的，本文总结了我们在开发、面试中经常会遇到的基础算法，使用原生JS实现，未必是最优解，可以互相探讨。

为了便于查看，简单分下类，本文也会持续更新。

排序算法

1. 冒泡排序

function bubbleSort(arr){
 var i = j = 0;
 for(i=1;i<arr.length;i++){
 for(j=0;j<=arr.length-i;j++){
 var temp = 0;
 if(arr[j]>arr[j+1]){
 temp = arr[j];
 arr[j] = arr[j+1];
 arr[j+1] = temp;
 }
 }
 }
}

2. 快速排序

function quickSort(arr,l,r){
 if(l < r){
 var i = l, j = r, x = arr[i];
 while(i<j){
 while(i<j && arr[j]>x)
 j--;
 if(i<j)
 //这里用i++，被换过来的必然比x小，赋值后直接让i自加，不用再比较，可以提高效率
 arr[i++] = arr[j];
 while(i<j && arr[i]<x)
 i++;
 if(i<j)
 //这里用j--，被换过来的必然比x大，赋值后直接让j自减，不用再比较，可以提高效率
 arr[j--] = arr[i];
 }
 arr[i] = x; 
 quickSort(arr, l, i-1);
 quickSort(arr, i+1, r);
 }
}

3. 二路归并

PS：将两个按值有序序列合并成一个按值有序序列，则称之为二路归并排序。

function merge(left, right) {
 var result = [],
  il = 0,
  ir = 0;
 while (il < left.length && ir < right.length) {
  if (left[il] < right[ir]) {
   result.push(left[il++]);
  } else {
   result.push(right[ir++]);
  }
 }
 while(left[il]){
  result.push(left[il++]);
 }
 while(right[ir]){
  result.push(right[ir++]);
 }
 return result;
}

字符串操作

1. 判断回文字符串

function palindrome(str){
 // \W匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
 var re = /[\W_]/g;
 // 将字符串变成小写字符,并干掉除字母数字外的字符
 var lowRegStr = str.toLowerCase().replace(re,'');
 // 如果字符串lowRegStr的length长度为0时，字符串即是palindrome
 if(lowRegStr.length===0)
 return true;
 // 如果字符串的第一个和最后一个字符不相同，那么字符串就不是palindrome
 if(lowRegStr[0]!=lowRegStr[lowRegStr.length-1])
 return false;
 //递归
 return palindrome(lowRegStr.slice(1,lowRegStr.length-1));
}

2. 翻转字符串

2.1 思路1：反向遍历字符串

function reverseString(str){
 var tmp = '';
 for(var i=str.length-1;i>=0;i--)
 tmp += str[i];
 return tmp
}

2.2 思路2：转化成array操作。

function reverseString2(str){
 var arr = str.split("");
 var i = 0,j = arr.length-1;
 while(i<j){
  tmp = arr[i];
  arr[i] = arr[j];
  arr[j] = tmp;
  i++;
  j--;
 }
 return arr.join("");
}

PS：什么？你要问为啥不直接操作str？ 因为str[i]是只读的，不能str[0]=str[1]这样操作。

再PS：如果允许用reverse()，也可以用'str'.split('').reverse().join('')实现。

3. 生成指定长度随机字符串

PS：配合模糊等效果可以生成个验证码- -

function randomString(n){
 var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
 var tmp = '';
 for(var i=0;i<n;i++)
  tmp += str.charAt(Math.round(Math.random()*str.length));
 return tmp;
}

4. 统计字符串中次数最多字母

PS：利用Object中key的唯一性，利用key来进行筛选，然后计数。

function findMaxDuplicateChar(str) {
 if(str.length == 1) {
  return str;
 }
 var charObj = {};
 for(var i = 0; i < str.length; i++) {
  if(!charObj[str.charAt(i)]) {
   charObj[str.charAt(i)] = 1;
  } else {
   charObj[str.charAt(i)] += 1;
  }
 }
 var maxChar = '',
  maxValue = 1;
 for(var k in charObj) {
  if(charObj[k] >= maxValue) {
   maxChar = k;
   maxValue = charObj[k];
  }
 }
 return maxChar + '：' + maxValue;
}

数组操作

1. 数组去重

PS: 还是利用Object中key的唯一性，利用key来进行筛选。

function unique(arr){
 var obj = {}
 var data = []
 for(var i in arr){
  if(!obj[arr[i]]){
   obj[arr[i]] = true;
   data.push(arr[i]);
 }
 }
 return data;
}

2. Number数组中最大差值

function getMaxProfit(arr){
 var min = arr[0], max = arr[0];
 for(var i=0;i<arr.length;i++){
  if(arr[i]<min)
   min = arr[i];
 if(arr[i]>max)
  max = arr[i];
 }
 return max - min;
}

其他常见算法

1. 阶乘

1.1 非递归实现

function factorialize(num) {
 var result = 1;
 if(num < 0) return -1;
 if(num == 0 || num == 1) return 1;
 while(num>1)
  result *= num--;
 return result;
}

1.2 递归实现

function factorialize(num) {
 var result = 1;
 if(num < 0) return -1;
 if(num == 0 || num == 1) return 1;
 if(num > 1){
  return num*factorialize(num-1);
 }
}

2. 生成菲波那切数列

PS：斐波那契数列，又称黄金分割数列，指的是这样一个数列：0、1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列主要考察递归的调用。通过定义fibo[i] = fibo[i-1]+fibo[i-2];来生成斐波那契数组。

2.1 强行递归实现

function getfib(n){
 if(n == 0)
 return 0;
 if(n == 1)
  return 1;
 if(n > 1){
 return getfib(n-1) + getfib(n-2);
 }
}
function fibo(len){
 var fibo = [];
 for(var i=0;i<len;i++)
 fibo.push(getfib(i));
 return fibo;
}

2.2 简约非递归版

function getFibonacci(n) {
 var fibarr = [];
 var i = 0;
 while(i < n) {
  if(i <= 1) {
   fibarr.push(i);
  } else {
   fibarr.push(fibarr[i - 1] + fibarr[i - 2])
  }
  i++;
 }
 return fibarr;
}

3. 二分查找

PS：二分查找又称折半查找，是在有序数组查找中用到的较为频繁的一种算法，优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。

3.1 非递归实现

function binary_search(arr, key) {
 var low = 0,
  high = arr.length - 1;
 while(low <= high){
  var mid = parseInt((high + low) / 2);
  if(key == arr[mid]){
   return mid;
  }else if(key > arr[mid]){
   low = mid + 1;
  }else if(key < arr[mid]){
   high = mid -1;
  }
 }
 return -1;
};

3.2 递归实现

function binary_search2(arr, low, high, key) {
 if(low > high)
  return -1;
 var mid = parseInt((low + high)/2);
 if(key == arr[mid])
  return mid;
 else if(key > arr[mid])
  return binary_search2(arr, mid+1, high, key);
 else if(key < arr[mid])
  return binary_search2(arr, low, mid-1, key);
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js  # 算法  # 前端JS面试中常见的算法问题总结  # JavaScript中几种常见排序算法小结  # Javascript中的常见排序算法  # js交换排序 冒泡排序算法（Javascript版）  # 使用JavaScript实现图片的自动轮播  # javascript常用经典算法实例详解  # 一个简单的JavaScript 日期计算算法  # js算法中的排序、数组去重详细概述  # js数组去重的5种算法实现  # javascript &&和||运算法的另类使用技巧  # 递归  # 二路  # 提高效率  # 是在  # 也会  # 第一个  # 要有  # 可以用  # 遍历  # 这样一个  # 即是  # 速度快  # 验证码  # 指的是  # 要问  # 最优  # 转化成  # 不直接  # 称之为  # 组中 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： JS弹性运动实现方法分析  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  实现点击下箭头变上箭头来回切换的两种方法【推荐】  Python函数文档自动校验_规范解析【教程】  Laravel怎么实现验证码(Captcha)功能  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  如何用wdcp快速搭建高效网站？  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  javascript如何操作浏览器历史记录_怎样实现无刷新导航  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  实例解析Array和String方法  Laravel如何实现API资源集合？（Resource Collection教程）  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  Java解压缩zip - 解压缩多个文件或文件夹实例  Laravel用户密码怎么加密_Laravel Hash门面使用教程  如何登录建站主机？访问步骤全解析  微信小程序 input输入框控件详解及实例（多种示例）  如何挑选最适合建站的高性能VPS主机？  如何快速搭建高效简练网站？  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  详解Android图表 MPAndroidChart折线图  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  佛山企业网站制作公司有哪些,沟通100网上服务官网？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  如何确保西部建站助手FTP传输的安全性？  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  如何用景安虚拟主机手机版绑定域名建站？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  canvas 画布在主流浏览器中的尺寸限制详细介绍  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  如何在服务器上三步完成建站并提升流量？  北京专业网站制作设计师招聘,北京白云观官方网站？  利用vue写todolist单页应用  黑客如何利用漏洞与弱口令入侵网站服务器？  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  微信小程序 require机制详解及实例代码  Bootstrap整体框架之JavaScript插件架构  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  EditPlus中的正则表达式 实战(1)  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  如何在香港服务器上快速搭建免备案网站？  原生JS实现图片轮播切换效果  如何在阿里云域名上完成建站全流程？