最近为了巩固一下自己的算法基础,又把算法书里的基本算法刷了一遍,特地总结一下前端工程师需要了解的排序算法和搜索算法知识,虽然还有很多高深算法需要了解,但是基础还是要好好巩固一下的.本文将以图文的形式为大家介绍如下算法知识,希望在读完之后大家能有所收获:冒泡排序及其优化选择排序插入排序归并排序快速排序顺序搜索*二分搜索
正文我想对于每个前端工程师来说,最头疼的就是算法问题,但是算法往往也是衡量一个人编程能力的一个很重要的指标.目前很多主流框架和库都应用了大量的算法和设计模式,为了让自己的段位更高,我们只能不断的"打怪"(也就是刷算法)升级,才能成为"最强王者".
其实前端发展这么多年,越来越偏向于精细化开发,很多超级应用(比如淘宝,微信)都在追求极致的用户体验,时间就是金钱,这要求工程师们不能像以前那样,开发的程序只要能用就行,我们往往还要进行更加细致的测试(包括单元测试,性能测试等),就拿排序来说,对于大规模数据量的排序,我们采用冒泡排序肯定是要被疯狂吐槽的,因为冒泡排序的性能极差(复杂度为O(n^2).在真实项目中我们往往不会采用冒泡排序,更多的会用快速排序或者希尔排序.关于排序算法性能问题我在之前的文章中有详细介绍,感兴趣可以参考一下.
接下来就让我们来一起学习如何实现文章开头的几个常用排序和搜索算法吧.
冒泡排序及其优化我们在学排序算法时,最容易掌握的就是冒泡排序,因为其实现起来非常简单,但是从运行性能的角度来看,它却是性能最差的一个.
为了更方便的展示冒泡排序的过程和性能测试,笔者先写几个工具方法,分别为动态生成指定个数的随机数组,生成元素位置序列的方法,代码如下:
//生成指定个数的随机数组constgenerateArr=(num=10)={letarr=[]for(leti=0;inum;i++){letitem=(()*(num+1))(item)}returnarr}//生成指定个数的元素x轴坐标constgenerateArrPosX=(n=10,w=6,m=6)={letpos=[]for(leti=0;in;i++){letitem=(w+m)*(item)}returnpos}有了以上两个方法,我们就可以生成任意个数的数组以及数组项坐标了,这两个方法接下来我们会用到.
我们来直接写个乞丐版的冒泡排序算法:
bubbleSort(arr=[]){letlen=(leti=0;ilen;i++){for(letj=0;jlen-1;j++){if(arr[j]arr[j+1]){//置换[arr[j],arr[j+1]]=[arr[j+1],arr[j]]}}}returnarr}接下来我们来测试一下,我们用generateArr方法生成60个数组项的数组,并动态生成元素坐标:
//生成坐标constpos=generateArrPosX(60)//生成60个项的数组constarr=generateArr(60)
可以看到数组已按照顺序排好了,我们可以使用来测量代码执行所用的时间,上面"乞丐版"冒泡排序耗时为0.2890625ms.
我们深入分析代码就可以知道两层for循环排序导致了很多多余的排序,如果我们从内循环减去外循环中已跑过的轮数,就可以避免内循环中不必要的比较,所以我们代码优化如下:
//冒泡排序优化版bubbleSort(arr=[]){letlen=//优化for(leti=0;ilen;i++){for(letj=0;jlen-1-i;j++){if(arr[j]arr[j+1]){//置换[arr[j],arr[j+1]]=[arr[j+1],arr[j]]}}}returnarr}经过优化的冒泡排序耗时:0.279052734375ms,比之前稍微好了一丢丢,但仍然不是推荐的排序算法.
选择排序我们还是按照之前的模式,生成一个60项的数组,
选择排序代码如下:
selectionSort(arr){letlen=,indexMinfor(leti=0;ilen-1;i++){indexMin=ifor(letj=i;jlen;j++){if(arr[indexMin]arr[j]){indexMin=j}}if(i!==indexMin){[arr[i],arr[indexMin]]=[arr[indexMin],arr[i]]}}returnarr}插入排序代码如下:
insertionSort(arr){letlen=,j,temp;for(leti=1;ilen;i++){j=itemp=arr[i]while(j0arr[j-1]temp){arr[j]=arr[j-1]j--}arr[j]=temp;}}执行结果如下:
控制台打印耗时为:0.09912109375ms.
归并排序归并排序算法性能比以上三者都好,可以在实际项目中投入使用,但实现方式相对复杂.
为了实现该方法我们需要准备一个合并函数和一个递归函数，具体实现如下代码：
//归并排序mergeSortRec(arr){letlen=(len===1){returnarr}letmid=(len/2),left=(0,mid),right=(mid,len)returnmerge(mergeSortRec(left),mergeSortRec(right))}//合并方法merge(left,right){letresult=[],l=0,r=0;while(){if(left[l]right[r]){(left[l++])}else{(right[r++])}}while(){(left[l++])}while(){(right[r++])}returnresult}以上代码中的递归作用是将一个大数组划分为多个小数组直到只有一项，然后再逐层进行合并排序。如果有不理解的可以和笔者交流或者结合笔者画的草图进行理解。
快速排序快速排序是目前比较常用的排序算法，它的复杂度为O(nlog^n),并且它的性能比其他复杂度为O(nlog^n)的好，也是采用分治的思想，将原始数组进行划分，由于快速排序实现起来比较复杂，这里讲一下思路：1.从数组中选择中间项作为主元2.创建两个指针，左边一个指向数组第一项，右边一个指向数组最后一项，移动左指针直到我们找到一个比主元大的元素，移动右指针直到找到一个比主元小的元素，然后交换它们的位置，重复此过程直到左指针超过了右指针3.算法对划分后的小数组重复1，2步骤，直到数组完全排序完成。
代码如下：
//快速排序quickSort(arr,left,right){letindexif(){index=partition(arr,left,right)if(leftindex-1){quickSort(arr,left,index-1)}if(indexright){quickSort(arr,index,right)}}}//划分流程partition(arr,left,right){letpart=arr[Math,floor((right+left)/2)],i=left,j=rightwhile(i=j){while(arr[i]part){i++}while(arr[j]part){j--}if(i=j){//置换[arr[i],arr[j]]=[arr[j],arr[i]]i++j--}}returni}顺序搜索搜索算法也是我们经常用到的算法之一，比如我们需要查找某个用户或者某条数据，不管是在前端还是在后端，都会使用搜索算法。我们先来介绍最简单也是效率最低的顺序搜索，其主要思想是将每一个数据结构中的元素和我们要查询的元素做比较，然后返回指定元素的索引。
之所以说顺序搜索效率低是因为每次都要从数组的头部开始查询，直到查找到要搜索的值，整体查询不够灵活和动态性。顺序搜索代码实现如下：
sequentialSearch(arr,item){for(leti=0;;i++){if(item===arr[i]){returni}}return-1}接下来我们看下面一种比较常用和灵活的搜索算法——二分搜索。
二分搜索二分搜索的思想有点“投机学”的意思，但是它是一种有理论依据的“投机学”。首先它要求被搜索的数据结构已排序，其次进行如下步骤：1.找出数组的中间值2.如果中间值是待搜索的值，那么直接返回中间值的索引3.如果待搜索的值比中间值小，则返回步骤1，将区间范围缩小，在中间值左边的子数组中继续搜索4.如果待搜索的值比选中的值大，则返回步骤1，将区间范围缩小，在中间值右边的子数组中继续搜索5.如果没有搜到，则返回-1
由上图大家可以很容易的理解二分搜索的实现过程，接下来我们看下代码实现：
binarySearch(arr,item){//调用排序算法先对数据进行排序(arr)letmin=0,max=,mid,elwhile(min=max){mid=((min+max)/2)el=arr[mid]if(elitem){min=mid+1}elseif(elitem){max=mid-1}else{returnmid}}return-1}其实还有很多搜索算法，我在之前的文章中都有介绍,感兴趣的可以学习参考一下。
最后如果想学习更多H5游戏,webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》学习讨论，共同探索前端的边界。
