js中的四种常用数组排序方法(冒泡、选择、插入、快排)及sort排序

布满荆棘的人生 2022-12-02 15:19 50阅读 0赞

### 1.冒泡排序 ###

原理：

*  比较两个相邻的元素，如果第一个比第二个大，就交换他们的位置
 *  对所有的元素重复以上步骤，直至排序完成

**动图演示**

![在这里插入图片描述][20200831204135433.gif_pic_center]

### 2.选择排序 ###

原理：

*  在未排序序列中找到最小元素，存放到排序序列的起始位置
 *  从剩余未排序元素中继续寻找最小元素，然后放到排序序列末尾
 *  以此类推，直到所有元素均排序完毕

**动图演示**

![在这里插入图片描述][20200831204455818.gif_pic_center]

### 3.插入排序 ###

原理：

*  从第一个元素开始，该元素可以认为已经被排序
 *  取出下一个元素，在已经排序的元素序列中从后向前扫描
 *  如果该元素（已排序）大于新元素，将该元素移到下一位置
 *  重复步骤3，直到找到已排序的元素小于或者等于新元素的位置
 *  将新元素插入到该位置后
 *  重复步骤2~5直至排序完成

动图演示  
![在这里插入图片描述][20200831204841537.gif_pic_center]

### 4.快速排序 ###

原理：

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

动图演示

![在这里插入图片描述][20200831205040585.gif_pic_center]

### 5.真香排序法：sort() ###

sort是一个方法，该方法内部对该数组对象进行一些操作，又返回来一个数组，不传参数的话排序默认根据字符串的Unicode排序。

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
    arr = arr.sort();
    console.log(arr.toString());
    //输出结果为：15,19,2,26,27,3,36,38,4,44,46,47,48,5,50

可以看到上面的输出结果并没有按照大小进行排列，所以我们往往是通过给sort传入一个函数来做参数。  
传递参数这种情况所传的参数必须为一个函数，该函数对a，b两个参数进行比较，返回一个结果：

*  a 大于 b 返回一个大于0的值，a在b位置的后面
 *  a 等于 b 返回一个等于0的值，a、b位置不变
 *  a 小于 b 返回一个小于0的值，a在b位置的前面

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
    function arraySort(a,b){
    	return a - b;
    }
    arr = arr.sort(arraySort);
    console.log(arr.toString());
    //输出结果为：2,3,4,5,15,19,26,27,36,38,44,46,47,48,50

当函数里返回a-b的时候，是升序排列，再看以下降序

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
    function arraySort(a,b){
    	return b - a;
    }
    arr = arr.sort(arraySort);
    console.log(arr.toString());
    //输出结果为：50,48,47,46,44,38,36,27,26,19,15,5,4,3,2

sort对于对象的排序处理：

输出结果为：

![在这里插入图片描述][20200831211226394.png_pic_center]

[20200831204135433.gif_pic_center]: /images/20221123/c027a2b700a94a5c96b5b37258cbe068.png
[20200831204455818.gif_pic_center]: /images/20221123/b50757d1b08a44e69ab9bf74634b39bc.png
[20200831204841537.gif_pic_center]: /images/20221123/a7c9abaa3b9942649c9a6b83266f04ee.png
[20200831205040585.gif_pic_center]: /images/20221123/749428a885b042118571fd18451225de.png
[20200831211226394.png_pic_center]: /images/20221123/cb696ce622fa452596e7c03bd7d25afb.png