前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示

简介: 前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示

算法(Algorithm)可以理解为有基本运算及规定的运算顺序所构成的完整的解题步骤,或者看成按照要求设计好的有限的确切的计算序列,并且这样的步骤和序列可以解决一类问题。算法代表着用系统的方法描述解决问题的策略机制,它能够对一定规范的输入在有限时间内获得所要求的输出。如果一个算法有缺陷,或不适合于某个问题,执行这个算法将不会解决这个问题。不同的算法可能用不同的时间、空间或效率来完成同样的任务。一个算法的优劣可以用空间复杂度与时间复杂度来衡量。


一、算法分类

  • 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序。
  • 线性时间非比较类排序:不通过比较来决定元素间的相对次序,它可以突破基于比较排序的时间下界,以线性时间运行,因此称为线性时间非比较类排序。


二、算法特征

  • 有穷性(Finiteness):算法的有穷性是指算法必须能在执行有限个步骤之后终止;
  • 确切性(Definiteness):算法的每一步骤必须有确切的定义;
  • 输入项(Input):一个算法有0个或多个输入,以刻画运算对象的初始情况,所谓0个输入是指算法本身定出了初始条件;
  • 输出项(Output):一个算法有一个或多个输出,以反映对输入数据加工后的结果。没有输出的算法是毫无意义的;
  • 可行性(Effectiveness):算法中执行的任何计算步骤都是可以被分解为基本的可执行的操作步骤,即每个计算步骤都可以在有限时间内完成(也称之为有效性)。


三、算法复杂度

  • 时间复杂度
    算法的时间复杂度是指执行算法所需要的计算工作量。因此,问题的规模越大,算法执行的时间的增长率与的增长率正相关,称作渐进时间复杂度(Asymptotic Time Complexity)。
  • 空间复杂度
    算法的空间复杂度是指算法需要消耗的内存空间。其计算和表示方法与时间复杂度类似,一般都用复杂度的渐近性来表示。同时间复杂度相比,空间复杂度的分析要简单得多。


四、示例展示

1. 冒泡排序

这是一种简单的排序算法,通过重复遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。

var arr = [1,56,9,6,3,5,8,2]
function sort(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]){
        let temp = arr[j+1];
        arr[j+1] = arr[j];
        arr[j] = temp
      }
    }
  }
  return arr
}
sort(arr)
console.log(arr);

算法描述

  1. 比较相邻的元素。如果第一个比第二个大,就交换它们两个;
  2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数;
  3. 针对所有的元素重复以上的步骤,除了最后一个;
  4. 重复步骤1~3,直到排序完成。
2. 插入排序

这是一种简单直观的排序算法。它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。

var arr = [1,56,9,6,3,5,8,2]
function sort(arr){
  for(var i =1;i<arr.length;i++){
    var val = arr[i];
    var last = i-1;
    while(last>=0 && arr[last]>val){
      arr[last+1] = arr[last]
      last--
    }
    arr[last+1] = val
  }
  return arr
}
sort(arr)
console.log(arr);

算法描述

  1. 从第一个元素开始,该元素可以认为已经被排序;
  2. 取出下一个元素,在已经排序的元素序列中从后向前扫描;
  3. 如果该元素(已排序)大于新元素,将该元素移到下一位置;
  4. 重复步骤3,直到找到已排序的元素小于或者等于新元素的位置;
  5. 将新元素插入到该位置后;
  1. 重复步骤2~5。
3. 快速排序

快速排序使用分治的原理,它选择一个元素作为"基准",然后将所有其他元素分成两组,第一组包括所有小于基准的元素,第二组包括所有大于或等于基准的元素。然后对这两组进行递归排序。这就是分治策略的基本步骤。

var arr = [1,56,9,6,3,5,8,2]
function quickSort(arr){
  if(arr.length<2){
    return arr
  }
  var mid = Math.floor(arr.length/2)
  var pivot = arr.splice(mid,1)[0]
  var left = [];
  var right = [];
  for(var i = 0;i<arr.length;i++){
    if(arr[i]<pivot){
      left.push(arr[i])
    } else {
      right.push(arr[i])
    }
  }
  return quickSort(left).concat(pivot,quickSort(right))
}
console.log(quickSort(arr));

算法描述

  1. 从数列中挑出一个元素,称为 “基准”(pivot);
  2. 重新排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面(相同的数可以到任一边)。在这个分区退出之后,该基准就处于数列的中间位置。这个称为分区(partition)操作;
  3. 递归地(recursive)把小于基准值元素的子数列和大于基准值元素的子数列排序。
4. 归并排序

归并排序是采用分治法的一个非常典型的应用。归并排序的思想就是先递归分解数组,再合并数组。

var arr = [1,56,9,6,3,5,8,2];
function mergeSort(arr) {
  var len = arr.length
  if(len<2){
    return arr
  }
  var mid = Math.floor(arr.length/2)
  var left = arr.slice(0,mid)
  var right = arr.slice(mid)
  return merge(mergeSort(left),mergeSort(right))
}
function merge(left,right) {
  var result = []
  while(left.length>0 && right.length>0){
    if(left[0]>right[0]){
      result.push(right.shift())
    } else {
      result.push(left.shift())
    }
  }
  while(left.length){
    result.push(left.shift())
  }
  while(right.length){
    result.push(right.shift())
  }
  arr = result
  return arr
}
mergeSort(arr)
console.log(arr);

算法描述

  1. 把长度为n的输入序列分成两个长度为n/2的子序列;
  2. 对这两个子序列分别采用归并排序;
  3. 将两个排序好的子序列合并成一个最终的排序序列。
5. 希尔排序

希尔排序是插入排序的一种更高效的改进版本,也称为缩小增量排序。它通过比较相距一定间隔的元素来工作,各趟比较所用的距离随着算法的进行而减小,直到只比较相邻元素的最后一趟排序为止。

var arr = [1,56,9,6,3,5,8,2]
function sort(arr){
  var gap = arr.length
  for(gap = Math.floor(arr.length/2);gap>0;gap = Math.floor(gap/2)){
    for(var i=gap;i<arr.length;i++){
      var val = arr[i];
      var  j = i;
      while(j-gap>=0 && arr[j-gap]>val){
        arr[j] = arr[j-gap]
        j = j-gap
      }
      arr[j] = val
    }
  }
  return arr
}
sort(arr)
console.log(arr);

算法描述


  1. 选择一个增量序列t1,t2,…,tk,其中ti>tj,tk=1;
  2. 按增量序列个数k,对序列进行k 趟排序;
  3. 每趟排序,根据对应的增量ti,将待排序列分割成若干长度为m 的子序列,分别对各子表进行直接插入排序。仅增量因子为1 时,整个序列作为一个表来处理,表长度即为整个序列的长度。
6. 堆排序

堆排序是一种树形选择排序,是对直接选择排序的有效改进。堆的定义如下:具有n个元素的序列(h1,h2,…,hn),当且仅当满足(hi<=h2i,hi<=h2i+1)或(hi>=h2i,hi>=h2i+1) (i=1,2,…,n/2)时称之为堆。在这里只讨论满足hi>=h2i,hi>=h2i+1,且hj>=hk(j>k)的堆称为对于堆排序来说,最重要的一步是将待排序的序列构造成一个大顶堆(或小顶堆)。

var arr = [1,56,9,6,3,5,8,2]
var len; 
function buildMaxHeap(arr) {
  len = arr.length
  for(var i = 0;i<Math.floor(arr.length/2);i++){
    heapify(arr,i)
  }
}
function heapify(arr,i){
  var left = i*2+1;
  var right = i*2+2;
  var largest = i;
  if(left<len && arr[left]>arr[largest]){
    largest = left
  }
  if(right<len && arr[right]>arr[largest]){
    largest = right
  }
  if(largest !== i){
    swap(arr,i,largest)
    heapify(arr,largest)
  }
}
function swap(arr,i,j){
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp
}
function heapSort(arr){
  buildMaxHeap(arr) 
  for(var i = arr.length-1;i>=0;i--){
    len-=1;
    swap(arr,0,i)
    heapify(arr,0)
  }
  return arr
}
console.log(heapSort(arr));

算法描述

  1. 将初始待排序关键字序列(R1,R2….Rn)构建成大顶堆,此堆为初始的无序区;
  2. 将堆顶元素R[1]与最后一个元素R[n]交换,此时得到新的无序区(R1,R2,……Rn-1)和新的有序区(Rn),且满足R[1,2…n-1]<=R[n];
  3. 由于交换后新的堆顶R[1]可能违反堆的性质,因此需要对当前无序区(R1,R2,……Rn-1)调整为新堆,然后再次将R[1]与无序区最后一个元素交换,得到新的无序区(R1,R2….Rn-2)和新的有序区(Rn-1,Rn)。不断重复此过程直到有序区的元素个数为n-1,则整个排序过程完成。

7. 计数排序

计数排序是一种非比较型的排序算法,适合于对一定范围内的整数排序。它的基本思想是通过为每个整数x计算其出现的次数,得到一个频率表,然后依次输出每个整数x出现的次数,实现排序。

var arr = [1,56,9,6,3,5,8,2];
function countingSort(arr, maxValue){
  var bucket = new Array(maxValue+1)
  var index = 0
  for(var i =0;i<arr.length;i++){
    if(!bucket[arr[i]]){
      bucket[arr[i]] = 0
    }
    bucket[arr[i]]++
  }
  for(var j = 0;j<bucket.length;j++){
    while(bucket[j]>0){
      arr[index++] = j
      bucket[j]--
    }
  }
  return arr
}
console.log(countingSort(arr,56));

算法描述

  1. 找出待排序的数组中最大和最小的元素;
  2. 统计数组中每个值为i的元素出现的次数,存入数组C的第i项;
  3. 对所有的计数累加(从C中的第一个元素开始,每一项和前一项相加);
  4. 反向填充目标数组:将每个元素i放在新数组的第C(i)项,每放一个元素就将C(i)减去1。
8. 选择排序

这是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完。

var arr = [1,56,9,6,3,5,8,2]
function sort(arr){
  for(let i =0;i<arr.length-1;i++){
    var index
    let min = i
    for(let j = i+1;j<arr.length;j++){
      if(arr[j]<arr[min]){
        min = j
      }
    }
      var temp = arr[i];
      arr[i] = arr[min];
      arr[min] = temp
  }
  return arr
}
sort(arr)
console.log(arr);

算法描述

  1. 初始状态:无序区为R[1…n],有序区为空;
  2. 第i趟排序(i=1,2,3…n-1)开始时,当前有序区和无序区分别为R[1…i-1]和R(i…n)。该趟排序从当前无序区中-选出关键字最小的记录 R[k],将它与无序区的第1个记录R交换,使R[1…i]和R[i+1…n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区;

 3.n-1趟结束,数组有序化了。


目录
相关文章
|
5天前
|
算法
分享一些提高二叉树遍历算法效率的代码示例
这只是简单的示例代码,实际应用中可能还需要根据具体需求进行更多的优化和处理。你可以根据自己的需求对代码进行修改和扩展。
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
27 2
前端基础(九)_CSS的三大特征
|
2月前
|
机器学习/深度学习 人工智能 算法
【新闻文本分类识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
文本分类识别系统。本系统使用Python作为主要开发语言,首先收集了10种中文文本数据集("体育类", "财经类", "房产类", "家居类", "教育类", "科技类", "时尚类", "时政类", "游戏类", "娱乐类"),然后基于TensorFlow搭建CNN卷积神经网络算法模型。通过对数据集进行多轮迭代训练,最后得到一个识别精度较高的模型,并保存为本地的h5格式。然后使用Django开发Web网页端操作界面,实现用户上传一段文本识别其所属的类别。
90 1
【新闻文本分类识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
|
1月前
|
存储 缓存 分布式计算
数据结构与算法学习一:学习前的准备,数据结构的分类,数据结构与算法的关系,实际编程中遇到的问题,几个经典算法问题
这篇文章是关于数据结构与算法的学习指南,涵盖了数据结构的分类、数据结构与算法的关系、实际编程中遇到的问题以及几个经典的算法面试题。
29 0
数据结构与算法学习一:学习前的准备,数据结构的分类,数据结构与算法的关系,实际编程中遇到的问题,几个经典算法问题
|
23天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
2月前
|
算法 前端开发 机器人
一文了解分而治之和动态规则算法在前端中的应用
该文章详细介绍了分而治之策略和动态规划算法在前端开发中的应用,并通过具体的例子和LeetCode题目解析来说明这两种算法的特点及使用场景。
一文了解分而治之和动态规则算法在前端中的应用
|
1月前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
23 0
|
2月前
|
算法 前端开发
一文了解贪心算法和回溯算法在前端中的应用
该文章深入讲解了贪心算法与回溯算法的原理及其在前端开发中的具体应用,并通过分析LeetCode题目来展示这两种算法的解题思路与实现方法。
|
24天前
|
算法 安全 数据安全/隐私保护
基于game-based算法的动态频谱访问matlab仿真
本算法展示了在认知无线电网络中,通过游戏理论优化动态频谱访问,提高频谱利用率和物理层安全性。程序运行效果包括负载因子、传输功率、信噪比对用户效用和保密率的影响分析。软件版本:Matlab 2022a。完整代码包含详细中文注释和操作视频。
|
8天前
|
算法 数据挖掘 数据安全/隐私保护
基于FCM模糊聚类算法的图像分割matlab仿真
本项目展示了基于模糊C均值(FCM)算法的图像分割技术。算法运行效果良好,无水印。使用MATLAB 2022a开发,提供完整代码及中文注释,附带操作步骤视频。FCM算法通过隶属度矩阵和聚类中心矩阵实现图像分割,适用于灰度和彩色图像,广泛应用于医学影像、遥感图像等领域。