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

1.冒泡排序

原理：

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

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
document.body.innerHTML += `排序前:${arr}<br /><hr>`;
function arraySort(arr){
	for(var i=0;i<arr.length;i++){
		for(var j=0;j<arr.length-1;j++){
			if(arr[j]>arr[i]){
				var temp=arr[i];
				arr[i]=arr[j];
				arr[j]=temp;
			}
		}
	}
	return arr;
}
document.body.innerHTML += `排序后:${arraySort(arr)}<br />`;

动图演示

2.选择排序

原理：

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

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
document.body.innerHTML += `排序前:${arr}<br /><hr>`;
function arraySort(arr) {
	var len = arr.length;
	var minIndex, temp;
	for(var i = 0; i < len - 1; i++) {
		minIndex = i;
		for(var j = i + 1; j < len; j++) {
			if(arr[j] < arr[minIndex]) { // 找出最小的数
				minIndex = j;
			}
		}
		temp = arr[i];
		arr[i] = arr[minIndex];
		arr[minIndex] = temp;
	}
	return arr;
}
document.body.innerHTML += `排序后:${arraySort(arr)}<br />`;

动图演示

3.插入排序

原理：

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

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
document.body.innerHTML += `排序前:${arr}<br /><hr>`;
function arraySort(arr){
	if (arr.length < 1) {
        return arr;
    }
	var index = Math.floor(arr.length/2);
	var left = [];
	var right = [];
	var brr = arr.splice(index,1)[0];
	for(var i=0;i<arr.length;i++){
		if(brr > arr[i]){
			left.push(arr[i]);
		}else if(brr < arr[i]){
			right.push(arr[i]);
		}
	}
	return arraySort(left).concat(brr, arraySort(right))
}
document.body.innerHTML += `排序后:${arraySort(arr)}<br />`;

动图演示

4.快速排序

原理：

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

var arr = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
document.body.innerHTML += `排序前:${arr}<br /><hr>`;
function arraySort(arr){
	if (arr.length < 1) {
           return arr;
    }
	var index = Math.floor(arr.length/2);
	var left = [];
	var right = [];
	var brr = arr.splice(index,1)[0];
	for(var i=0;i<arr.length;i++){
		if(brr > arr[i]){
			left.push(arr[i]);
		}else if(brr < arr[i]){
			right.push(arr[i]);
		}
	}
	return arraySort(left).concat(brr, arraySort(right))
}
document.body.innerHTML += `排序后:${arraySort(arr)}<br />`;

动图演示

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对于对象的排序处理：

var arr = [
	{name:"张十八", age: 18},
    {name:"张三岁", age: 3},
    {name:"张十六", age: 16},
   	{name:"张九十", age: 90},
   	{name:"张小七", age: 7},
   	{name:"张六六", age: 66}
];
function arraySort(arr){
	return function(a,b){
		return a[arr] - b[arr];
	}
}
arr = arr.sort(arraySort('age'));
console.log(arr);

输出结果为：