快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

js排序算法原理图示详解

2017-6-19 11:25| 发布者: antzone| 查看: 63| 评论: 0|来自: 蚂蚁部落

在javascript中排序算法有多种,当然这不是js所独有的,各个语言都是这样。对这几个排序算法的充分掌握还是非常有必要的,因为这不仅仅是一个知识点的问题,而是一种思维的问题,可以将其潜移默化的应用到各种场景,下面就通过代码实例结合图示分别一一介绍一下它们的实现原理。

一.冒泡排序:

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

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

思路如下:

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

step1:比较第1个和第2个数,将小数放前,大数放后。比较第2个数和第3个数,将小数放前,大数放后,如此继续,直至比较最后两个数,将小数放前,大数放后。

step2:在第二趟:仍从第一对数开始比较(因为可能由于第2个数和第3个数的交换,使得第1个数不再小于第2个数),将小数放前,大数放后,一直比较到倒数第二个数(倒数第一的位置上已经是最大的),第二趟结束,在倒数第二的位置上得到一个新的最大数(其实在整个数列中是第二大的数)。

如此下去,重复以上过程,直至最终完成排序。

由于在排序过程中总是小数往前放,大数往后放,相当于气泡往上升,所以称作冒泡排序。

冒泡排序的动画效果

要注意三点:

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

[JavaScript] 纯文本查看 复制代码运行代码
var,a,b,temp
temp = a;
a=b;
b = temp

2.要注意循环变量的缓存,这里缓存了array.length。

3.要注意内嵌的那个循环,是从第一个数比较到倒数第n个数,n则为比较的step数。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function bubbleSort(array){
  var l=array.length;
  //比较的step数为数组的长度
  for (var index = 0; index < l; index++) {
        //内嵌交换的次数是从第一个数比较到倒数第总长-n个数,n则为比较的step数
    for (var j = 0; j < l-index; j++) {
      if (array[j] < array[j - 1]) {
        array[j] = [array[j - 1], array[j - 1] = array[j]][0]//在这里交换元素
       }
    }
    for (var k = 0; k < l; k++) {
      console.log(array[k] + ",");
    }
    console.log('这是第'+(index+1)+'次排序')
  }
}
var a = [6,54,6,22,5,7,8,2,34];
bubbleSort(a);

动画效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/29/112646eb8ltd5jbgrtzlg8.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.插入排序:

这个比较简单,通俗的说就是摸牌插牌的步骤。

思路如下:

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] 纯文本查看 复制代码运行代码
function insert(arr){
  var l = arr.length;
  var empty = [];//空数组,表示我们的手
  empty.push(arr[0]);//我们先摸起来一张
  //注意这里起点是1,因为我们已经摸了一张了!
  for (var index = 1; index < l; index++) {
    if(arr[index] > empty[empty.length - 1]){
      empty[empty.length] = arr[index]
    } //如果比有序数组empty还大,直接放到末尾
        //从最大值跟arr进行比较,为了给arr腾空。当arr<有序数组的某一位时,就不用移动了
    for (var j = empty.length; j > 0 && arr[index] < empty[j - 1]; j--) { 
      empty[j] = empty[j - 1]; //向右移动
      empty[j - 1] = arr[index]; //把值放到空出来的位置上
    }
  }
  return empty
}

动画效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/29/112756rjen75wg7rijr11n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.选择排序:

把最小元素找出来-扔到数组里-再找次小的-扔到数组里,以此类推。

首先在未排序数组中找到最小元素,找的方法可以利用不断判断并赋值的手段,即:设数组第一个元素array[0]为最小元素,那么“最小元素”在数组中的序号就为0

之后遍历数组,若数组第二个元素比他还要小,那么说明第二个为最小元素,把“0” 更新为“1”。

遍历完毕后,我们就知道这一系列的最小元素下标为“n”;直接拿出来存放到排序序列的起始位置(array[n])

然后,再从剩余未排序元素中继续寻找最小元素,然后放到排序序列末尾。注意,此时遍历的下标就从1开始了。因为已经挑出了一个最小元素了。以此类推,直到所有元素均排序完毕。

[JavaScript] 纯文本查看 复制代码运行代码
function selectSort(array){
  var min;
  var l = array.length;//缓存长度
  //开始进行循环,一共循环l次,就可以找出l个元素了
  for (var index = 0; index < l; index++) {
    min = index;//假设第一个为最小元素
    for (var j = index + 1; j < l; j++) {//从第一个开始循环,遍历
      if (array[min] > array[j])//判断之后的是否比前面的小
        min = j;//更新"最小"的下标
    }
    if(min != index) {
      array[index]= [array[min],array[min]=array[index]][0];//交换元素
    }
  }
  return array;
}

这里仍然注意的是交换的写法 array[index]= [array[min],array[min]=array[index]][0]

可以方便的把array[index]与array[min]交换。

a:3:{s:3:\"pic\";s:43:\"portal/201703/29/112858izq8j5nc888n6v8j.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

从数组中挑出一个元素,称为"基准",这个可以直接利用length/2挑出来。

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

[JavaScript] 纯文本查看 复制代码运行代码
function quickSort(arr) {
  var l = arr.length;//缓存数组长度
  //如果我们拿到的lArray,rArray长度比1都小,那就不用排了~
  if(arr.length <= 1){return arr}; 
  //取数组中间的那个数。注意length/2不一定是整数,用Math.floor取整
  var num = Math.floor(arr.length / 2);
  //利用splice方法,取一个元素出来,注意语法
  var numValue = arr.splice(num, 1)[0];
  var left = [];//创建左边基准容器
  var right = [];//创建右边基准容器
  for (var index = 0; index < l; index += 1) {//开始遍历数组
    arr[index] < numValue ? left.push(arr[index]) : right.push(arr[index]);//男的站左边,女的站右边。。
  }
  return quickSort(left).concat([numValue], quickSort(right))//递归,继续对左右数组进行操作。
}

动画效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/29/112952zlm6otu4ug47ozy4.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-27 16:40 , Processed in 0.057997 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部