JS中的算法与数据结构之常见排序(Sort)算法详解


Posted in Javascript onAugust 16, 2019

本文实例讲述了JS中的算法与数据结构之常见排序(Sort)算法。分享给大家供大家参考,具体如下:

排序算法(Sort)

引言

我们平时对计算机中存储的数据执行的两种最常见的操作就是排序和查找,对于计算机的排序和查找的研究,自计算机诞生以来就没有停止过。如今又是大数据,云计算的时代,对数据的排序和查找的速度、效率要求更高,因此要对排序和查找的算法进行专门的数据结构设计,(例如我们上一篇聊到的二叉查找树就是其中一种),以便让我们对数据的操作更加简洁高效。

这一篇我们将会介绍一些数据排序的基本算法和高级算法并利用JavaScript来逐一实现,让大伙对计算机中常见的排序算法的思想和实现有基本的了解,起到一个抛砖引玉的作用。

关于排序算法的说明

在介绍各个算法之前,我们有必要了解一下评估算法优劣的一些术语:

稳定:如果a原本在b前面,当a=b时,排序之后a仍然在b的前面 不稳定:如果a原本在b的前面,当a=b时,排序之后a可能会出现在b的后面

内排序:所有排序操作都在内存中完成 外排序:由于数据太大,因此把数据放在磁盘中,而排序通过磁盘和内存的数据传输才能进行

时间复杂度:一个算法执行所耗费的时间 空间复杂度:运行完一个程序所需内存的大小

有想要了解更多,关于时间空间复杂度的,我推荐一篇文章,请戳这里

基本排序算法

基本排序算法的核心思想就是对一组数据按照一定的顺序重新排序,其中重排时一般都会用到一组嵌套的 for 循环,外循环会遍历数组的每一项元素,内循环则用于进行元素直接的比较。

1.冒泡排序(BubbleSort)

冒泡排序是比较经典的算法之一,也是排序最慢的算法之一,因为它的实现是非常的容易的。

冒泡排序的算法思想如下(升序排序):

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

下面我借用网上一张动图,来展示冒泡排序的过程:

JS中的算法与数据结构之常见排序(Sort)算法详解冒泡排序

具体的JS实现如下:

//冒泡排序
function bubbleSort ( data ) {
 var temp = 0;
 for ( var i = data.length ; i > 0 ; i -- ){
  for( var j = 0 ; j < i - 1 ; j++){
   if( data[j] > data[j + 1] ){
    temp = data[j];
    data[j] = data [j+1];
    data[j+1] = temp;
   }
  }
 }
 return data;
}

我们先设定一组数据,后面我们将都用这组数据来测试 :

var dataStore = [ 72 , 1 , 68 , 95 , 75 , 54 , 58 , 10 , 35 , 6 , 28 , 45 , 69 , 13 , 88 , 99 , 24 , 28 , 30 , 31 , 78 , 2 , 77 , 82 , 72 ];

console.log( '原始数据:' + dataStore );
console.log( '冒泡排序:' + bubbleSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 冒泡排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

2.选择排序(SelctionSort)

选择排序是一种比较简单直观的排序算法。它的算法思想是,从数组的开头开始遍历,将第一个元素和其他元素分别进行比较,记录最小的元素,等循环结束之后,将最小的元素放到数组的第一个位置上,然后从数组的第二个位置开始继续执行上述步骤。当进行到数组倒数第二个位置的时候,所有的数据就完成了排序。

选择排序同样会用到嵌套循环,外循环从数组第一个位置移到倒数第二个位置;内循环从第二个位置移动到数组最后一个位置,查找比当前外循环所指向的元素还要小的元素,每次内循环结束后,都会将最小的值放到合适的位置上。

同样,我借用网上一张动图,来展示选择排序的过程 :

JS中的算法与数据结构之常见排序(Sort)算法详解选择排序

了解了算法思想,具体实现应该也不成问题:

//选择排序
function selectionSort( data ) {
 for( var i = 0; i< data.length ; i++){
  var min = data[i];
  var temp;
  var index = i;
  for( var j = i + 1; j< data.length; j++){
   if( data[j] < min ){
    min = data[j];
    index = j;
   }
  }

  temp = data[i];
  data[i] = min;
  data[index]= temp;
 }
 return data;
}

它的测试结果如下:

console.log( '原始数据:' + dataStore );
console.log( '选择排序:' + selectionSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 选择排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

3.插入排序(insertionSort)

插入排序有点类似人类按字母顺序对数据进行排序,就如同你打扑克牌一样,将摸来的扑克按大小放到合适的位置一样。它的原理就是通过嵌套循环,外循环将数组元素挨个移动,而内循环则对外循环中选中的元素及它后面的元素进行比较;如果外循环中选中的元素比内循环中选中的元素小,那么数组元素会向右移动,为内循环中的这个元素腾出位置。

实现步骤如下:

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

它的实现效果图如下:

JS中的算法与数据结构之常见排序(Sort)算法详解插入排序

具体实现代码如下:

//插入排序

function insertionSort( data ) {
 var len = data.length;
 for (var i = 1; i < len; i++) {
  var key = data[i];
  var j = i - 1;
  while ( j >= 0 && data[j] > key) {
   data[j + 1] = data[j];
   j--;
  }
  data[j + 1] = key;
 }
 return data;
}

排序结果如下:

console.log( '原始数据:' + dataStore );
console.log( '插入排序:' + insertionSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 插入排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

我们已经学习了三种基本的排序算法,其中冒泡排序是最慢的,插入排序是最快的,我们可以在运行的过程中通过 console.time('sortName') 和 console.timeEnd('sortName') 两个输出来看他们的效率如何,我这里给出一组值作为参考,实际中需要大量的数据测试和反复实验,进行数理统计后才能被视为有效的统计;

JS中的算法与数据结构之常见排序(Sort)算法详解 排序时间比较

高级排序算法

4.希尔排序(Shell Sort)

我们首先要学习的就是希尔排序,又称缩小增量排序,这个算法是在插入排序的基础上做了很大的改善,与插入排序不同的是,它首先会比较位置较远的元素,而非相邻的元素。这种方案可以使离正确位置很远的元素能够快速回到合适的位置,当算法进行遍历时,所有元素的间距会不断的减小,直到数据的末尾,此时比较的就是相邻元素了。

该方法的基本思想是:先将整个待排元素序列分割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接插入排序,然后依次缩减增量再进行排序,待整个序列中的元素基本有序(增量足够小)时,再对全体元素进行一次直接插入排序。因为直接插入排序在元素基本有序的情况下(接近最好情况),效率是很高的,因此希尔排序在时间效率上有较大提高。

好吧,我还是用个案例来解释,这样会更清晰,我们以下面一组数据为例:

JS中的算法与数据结构之常见排序(Sort)算法详解 数据集

  • 第一次 gap(增量) = 10 / 2 = 5 , 会按照下面进行分组得到五组数据(49,13)、(38,27)、(65,49)、(97,55)、(26,4),这样进行组内排序之后(13,49)、(27,38)、(49,65)、(55,97)、(4,26)

JS中的算法与数据结构之常见排序(Sort)算法详解 第一次分组

此时,数据会排成如下结构

JS中的算法与数据结构之常见排序(Sort)算法详解 第一次排序

  • 第二次 gap = 5 / 2 = 2 , 此时可以得到两个分组,如下

JS中的算法与数据结构之常见排序(Sort)算法详解 第二次分组

再通过组内排序之后,可以得到

JS中的算法与数据结构之常见排序(Sort)算法详解 第二次排序

  • 第三次 gap = 2 / 2 = 1 , 即不用分组,进行排序后

JS中的算法与数据结构之常见排序(Sort)算法详解 第三次排序

  • 第四次 gap = 1 / 2 = 0 ,即可得到排序完成的数组

JS中的算法与数据结构之常见排序(Sort)算法详解 排序完成

现在,可能对希尔排序有了一定得了解了,用JS实现如下:

//希尔排序

function shallSort(array) {
 var increment = array.length;
 var i
 var temp; //暂存
 do {
  //设置增量
  increment = Math.floor(increment / 3) + 1;
  for (i = increment ; i < array.length; i++) {
   if ( array[i] < array[i - increment]) {
    temp = array[i];
    for (var j = i - increment; j >= 0 && temp < array[j]; j -= increment) {
     array[j + increment] = array[j];
    }
    array[j + increment] = temp;
   }
  }
 }
 while (increment > 1)

 return array;
}

效果如下:

console.log( '原始数据:' + dataStore );
console.log( '希尔排序:' + shallSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 希尔排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

5.归并排序(Merge Sort)

将两个的有序数列合并成一个有序数列,我们称之为"归并",归并排序的思想就是将一系列排序好的子序列合并成一个大的完整有序的序列。

实现步骤如下:

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

一张动图来说明归并排序的过程:

JS中的算法与数据结构之常见排序(Sort)算法详解归并排序

具体的JS代码实现如下:

//归并排序

function mergeSort ( array ) {
 var len = array.length;
 if( len < 2 ){
  return array;
 }
 var middle = Math.floor(len / 2),
  left = array.slice(0, middle),
  right = array.slice(middle);
 return merge(mergeSort(left), mergeSort(right));
}

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

测试结果如下 :

console.log( '原始数据:' + dataStore );
console.log( '希尔排序:' + mergeSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 希尔排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

6.快速排序(Quicksort)

快速排序是处理大数据最快的排序算法之一,它也是一种分而治之的算法,通过递归方式将数据依次分解为包含较小元素和较大元素的不同子序列,会不断重复这个步骤,直到所有的序列全部为有序的,最后将这些子序列一次拼接起来,就可得到排序好的数据。

该算法首先要从数列中选出一个元素作为基数(pivot)。接着所有的数据都将围绕这个基数进行,将小于改基数的元素放在它的左边,大于或等于它的数全部放在它的右边,对左右两个小数列重复上述步骤,直至各区间只有1个数。

整个排序过程如下:

JS中的算法与数据结构之常见排序(Sort)算法详解 快速排序

具体实现如下:

//快速排序

function quickSort( arr ){
 if ( arr.length == 0) {
  return [];
 }
 var left = [];
 var right = [];
 var pivot = arr[0];
 for (var i = 1; 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( '原始数据:' + dataStore );
console.log( '快速排序:' + quickSort( dataStore) );

// 原始数据:72,1,68,95,75,54,58,10,35,6,28,45,69,13,88,99,24,28,30,31,78,2,77,82,72
// 快速排序:1,2,6,10,13,24,28,28,30,31,35,45,54,58,68,69,72,72,75,77,78,82,88,95,99

至此,我们已基本介绍过一些常见的排序算法的思想和具体实现(基数排序在之前的文章已经介绍过),排序算法博大精深,我们不仅要学习理论,也要不断去实践,大家加油!

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
jQuery 事件队列调整方法
Sep 18 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
js倒计时抢购实例
Dec 20 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
jQuery zTree插件使用简单教程
Aug 16 #jQuery
微信小程序 如何保持登录状态
Aug 16 #Javascript
JS事件流与事件处理程序实例分析
Aug 16 #Javascript
javascript事件监听与事件委托实例详解
Aug 16 #Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 #Javascript
详解Vue中组件传值的多重实现方式
Aug 16 #Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 #Javascript
You might like
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python绘制3D图形
2018/05/03 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python实现图片转字符小工具
2019/04/30 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python 实现一个计时器
2020/07/28 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
自我评价中英文语句
2013/11/30 职场文书
大型活动组织方案
2014/05/10 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2014年业务工作总结
2014/11/17 职场文书
费用申请报告范文
2015/05/15 职场文书
新学期主题班会
2015/08/17 职场文书