当前位置:Gxlcms > JavaScript > 排序算法的javascript实现与讲解(99js手记)_javascript技巧

排序算法的javascript实现与讲解(99js手记)_javascript技巧

时间:2021-07-01 10:21:17 帮助过:45人阅读

冒泡排序

冒泡的原理是让最大元素或者最小元素”浮起来“

插入排序,选择排序,快速排序,冒泡排序都是比较排序

思路

依次比较相邻的两个数,将小数放在前面,大数放在后面。

step1:比较第1个和第2个数,将小数放前,大数放后。比较第2个数和第3个数,将小数放前,大数放后,如此继续,直至比较最后两个数,将小数放前,大数放后。
step2:在第二趟:仍从第一对数开始比较(因为可能由于第2个数和第3个数的交换,使得第1个数不再小于第2个数),将小数放前,大数放后,一直比较到倒数第二个数(倒数第一的位置上已经是最大的),第二趟结束,在倒数第二的位置上得到一个新的最大数(其实在整个数列中是第二大的数)。
如此下去,重复以上过程,直至最终完成排序。
由于在排序过程中总是小数往前放,大数往后放,相当于气泡往上升,所以称作冒泡排序。
冒泡排序的动画效果

实现:此段代码比较简单,是属于算法里面最基础最基础最基础的代码。。。
要注意三点

1.交换类的方法在javascript中可以用 a=[b,b=a][0] 这个非常巧妙的方法来解决,
代替

代码如下:

var,a,b,temp
temp = a;
a=b;
b = temp

这种交换方法
2.要注意循环变量的缓存,这里缓存了array.length
3.要注意内嵌的那个循环,是从第一个数比较到倒数第n个数,n则为比较的step数

动画效果

插入排序(Insertion Sort)
非常简单,就是我们摸牌插牌的步骤!
思路:

1首先假设我们摸了一张牌,我们手里目前所有牌设为empty = []摸了一张push(arr[0])
2取出下一个牌,设为a,在我们所有的牌empty(已经排序)从后向前扫描
3如果手里这张牌empty[empty.length-n](已排序)大于新元素,将该牌移到下一位置(腾空间)empty[empty.length-n]= empty[empty.length-n+1]
4重复步骤3,直到找到已排序的牌empty[empty.length-n]小于或者等于a
5将a插入到该位置中 empty[empty.length-n]=a
6重复步骤2
但是javascript代码实现起来还是稍微有些难度的,代码如下:

那么这里比较重要的知识点是&&符号,表示“与”,即两边的条件都要满足,表达式才成立。
&&符号也可以代替if比如 if(a){fun()} 等于 a&&b
另外一点非常重要
设数组是arr,则他的“最后一项” 是arr[arr.length-1]。

排序动画


选择排序(Selection sort)
也是一种简单的排序算法。

思路:

把最小元素找出来-扔到数组里-再找次小的-扔到数组里,以此类推。
首先在未排序数组中找到最小元素,找的方法可以利用不断判断并赋值的手段,即:设数组第一个元素array[0]为最小元素,那么“最小元素”在数组中的序号就为0
之后遍历数组,若数组第二个元素比他还要小,那么说明第二个为最小元素,把“0” 更新为“1”。
遍历完毕后,我们就知道这一系列的最小元素下标为“n”;直接拿出来存放到排序序列的起始位置(array[n])
然后,再从剩余未排序元素中继续寻找最小元素,然后放到排序序列末尾。注意,此时遍历的下标就从1开始了。因为我们已经挑出了一个最小元素了。
以此类推,直到所有元素均排序完毕。

这里仍然注意的是交换的写法 array[i]= [array[min],array[min]=array[i]][0]
可以方便的把array[i]与array[min]交换~

排序动画

快速排序

快速排序是目前最强大的排序算法,算法利用了递归的思想。

思路

从数组中挑出一个元素,称为 “基准”,这个可以直接利用length/2挑出来
遍历数组,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的摆在基准的后面(相同的数可以到任一边)。通俗来讲:男的站左边,女的站右边。。
之后我们得到了一个这样的数组 array= 比基准小的部分组成的数组lArray+基准+比基准大的部分组成的数组rArray。
那么我们之后只需要再把lArray,rArray进行“同样的”处理即可~
这就需要用到 递归 的写法了。处理之后,lArray又分成了 lArray的基准,比lArray基准还小的,比lArray基准还大的。。
那么我们不断的进行操作,男的站左边,女的站右边。。
直到我们发现,lArray的长度变成1了,不足以再分下去了,我们认为排序结束。

动画效果:

这里注意 arr.splice(num,1)虽然只抽了一个数,但splice的结果也是数组,需要[0],要不然结果就会很奇葩的出现一堆array(1)的数组了。。。
splice的参考:http://www.gxlcms.com/w3school/js/jsref_splice.htm
Math.floor即Math对象的参考http://www.gxlcms.com/w3school/js/js_obj_math.htm
递归是什么:http://baike.baidu.com/view/96473.htm

以上四个算法除了快速排序,都是简单排序算法,而这四个算法在面试中考的都非常频繁~
在这里仍然要强调一点,以上的算法大量使用了循环及数组的相关知识,一定要背熟!

人气教程排行