正文
js中的选择排序算法，js选择排序和冒泡排序
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
用Javascript写排序算法的动画演示
1.让JavaScript暂停下来，慢下来。
JavaScript排序是很快的，要我们肉眼能看到它的实现过程，我首先想到的是让排序慢下来。 排序的每一个循环都让它停300ms然后再继续进行。 怎么样才能停下来呢。查了一下JavaScript貌似没有sleep()这样的函数。暂停做不到，但是可以想办法让实现跟暂停差不多的效果。比如在循环里做一些无关的事情 。
首先尝试了让while(true)来一直执行一个空操作。执行一段时间再回到排序逻辑。代码大致是这样：
for (var i = 0; i 3; i++) {
document.writeln(i); //DOM操作
var now = new Date().getTime();
while(new Date().getTime() - now 3000){}
}
慢是慢下来了。不过太耗资源，排序进行过程中dom并不会有任何改变，直到排序结束， DOM会变成排序好之后的样子。 但是如果设置断点一步步执行的时候 又可以看到一步步的排序变化。估计是因为这个操作太耗资源导致浏览器下达了一个DOM操作的命令但是一直腾不出资源来进行DOM操作。所以真正DOM操作的时候在js代码执行结束之后。
所以让JavaScript排序慢来来还是没有实现。
另一种让JavaScript暂停下来的思路：
写这个文章的时候又想到一种方法来让JavaScript停下来。 那就是AJAX的同步请求，以及超时操作。 也就是在要停下来的地方放一个AJAX请求，同步请求， 然后设置超时。超时的时间就是我们要暂停的时间。为了避免在到达超时请求之前服务 器就返回了我们的AJAX请求。可以在服务端运行类似 sleep()的程序 。从而保证AJAX不会返回。直接超时然后返回到我们的循环。不过这只是个设想。有兴趣的可以去尝试一下。
2.闭包和定时器。 这种思路不需要让排序过程慢下来。而是使用闭包缓存排序过程中数组的变化。然后使用setTimeout来确定展示每一个数组状态的顺序。在排序循环中放入类似下面的代码。
(function(){
var theArr = arr.slice();//当前数组状态的备份
setTimeout(function(){
bubbleSortDom(theArr);//排序的DOM操作。
},500*timeCount);
timeCount++;//定时器的顺序。
})();
不过后来发现这样子写的话代码量会比较大，逻辑有修改的话要修改的地方会有点多。局限性很多，比如要实现排序动画加快或减慢操作几乎是很困难的。所以还要另想办法。
3.缓存排序中的数组状态。
也就是在排序过程中。将数组的每一轮循环的状态保存到一个数组。然后再用这个数组依次将排序状态保存下来。 只需要在排序中加入一句就行。
this.pushHis(arr.slice(),i-1,j,k,temp);
这样就只需要一个setInterval()就可以了。并且可以很方便的实现动画的加快与减慢。逻辑也比较好理解 。
问题二：如何实现JavaScript排序动画的加快与减慢。
我们问题一使用的第三种方法。 得到一个保存了每一步排序状态的数组arr。 然后我们可以使用一个setInterval()定时器一步步展现排序状态。 如果要加快速度或减慢速度。就clearInterval()，修改定时器的执行间隔，重新setInterval()，从前一个定时器执行到数组中的位置开始执行。
问题三：对于使用递归实现的数组怎么办？ 不是在原数组上进行操作的怎么办？
使用递归实现的排序。 可能并没有在一个数组上进行操作，只是最后返回一个排序好的数组出来。那么我们要如何获得排序中的数组的完整状态呢。
比如快速排序。
最开始不考虑动画，我的实现是这样的：
function quickSort(arr){
var len = arr.length,leftArr=[],rightArr=[],tag;
if(len2){
return arr;
}
tag = arr[0];
for(i=1;ilen;i++){
if(arr[i]=tag){
leftArr.push(arr[i])
}else{
rightArr.push(arr[i]);
}
}
return quickSort(leftArr).concat(tag,quickSort(rightArr));
}
然后为了考虑动画，我改写了它的逻辑，让它在同一个数组上进行了实现。 其实是在递归的时候传入了当前的的子数组在原数组中的起始位置。从而在原数组上进行了操作。
用了两种方法来实现方式。在排序逻辑上略有不同。
第一种是先跟远处的对比。遇到比自己小的放到自己前面去。循环序号+1。比自己大的放到当前排序子数组的最后面去，循环序号不变。直到排列完成。
这种方法的缺点是即使是一个有序数组。它也会重新排。
第二种方法是 除了标记位，再设置一个对比位。 遇到比自己小的，放到前面去，标记位的位置+1，标记位与对比位之间所有的往后面移动一个位置。
遇到比自己大的。标记位不变，对比位+1。
这种方法的缺点是对数组进行的操作太多。优点是对有序数组不会再排。
方式一：
function quickSort(arr,a,b,qArr){
var len = arr.length,leftArr=[],rightArr=[],tag,i,k,len_l,len_r,lb,ra,temp;
if(a == undefined b == undefined){
a = 0; b= arr.length-1;//初始化起始位置。
}
if(qArr == undefined){
qArr = arr.slice();
}
if((len == 2 arr[0] == arr[1])||len2){
return arr;
}
tag = qArr[a];
for (i = 1; i len;) {
if(qArr[a+i]=tag){
leftArr.push(qArr[a+i]);
qArr[a+i-1] = qArr[a+i];
qArr[a+i] = tag;
k = a+i;
i++;
}else{
if(leftArr.length+rightArr.length == len-1){
break;
}
temp = qArr[a+i];
qArr[a+i] = qArr[b-rightArr.length];
qArr[b-rightArr.length] = temp;
rightArr.push(temp);
k = a+i-1;
}
this.pushHis(qArr.slice(),a,b,k);
}
len_l = leftArr.length;
len_r = rightArr.length;
if(len_l== 0){
lb = a;
}else{
lb = a+len_l -1;
this.sort(leftArr,a,lb,qArr);
}
if(len_r == 0){
ra = b;
}else{
ra = b + 1 - len_r;
this.sort(rightArr,ra,b,qArr)
}
return qArr
}
方式二：
function quickSort2(arr,a,b,qArr){
var len = arr.length,leftArr=[],rightArr=[],tag,i,j,k,temp,len_l,len_r,lb,ra;
if(a == undefined b == undefined){
a = 0; b= arr.length-1;//初始化起始位置。
}
if(qArr == undefined){
qArr = arr.slice();
}
if(len2){
return arr;
}
if(len == 2 arr[0] == arr[1]){
return arr;
}
tag = qArr[a];
for (i = 1,k = 0; i len;) {
if(qArr[a+i]=tag){
rightArr.push(qArr[a+i]);
i++;
}else{
temp = qArr[a+i];
for(j = a+i;ja+k;j--){
qArr[j] = qArr[j-1];
// this.pushHis(qArr.slice(),a,b,a+k);
}
qArr[a+k] = temp;
leftArr.push(temp);
k++;
i++;
}
this.pushHis(qArr.slice(),a,b,a+k,i-1);
}
len_l = leftArr.length;
len_r = rightArr.length;
if(len_l== 0){
lb = a;
}else{
lb = a+len_l -1;
this.sort(leftArr,a,lb,qArr);
}
if(len_r == 0){
ra = b;
}else{
ra = b + 1 - len_r;
this.sort(rightArr,ra,b,qArr)
}
return qArr;
}
具体的不同下面会有动画演示。
问题四：动画的流畅。
排序动画的DOM操作是很多的很快的。这里我做的优化只是让每一个排序步骤只涉及一个DOM操作。 全部由JavaScript拼接好，一次替换。类似下面的代码。
效果图：
主要实现了：
冒泡排序JavaScript动画演示
插入排序JavaScript动画演示
选择排序JavaScript动画演示
快速排序JavaScript动画演示
归并排序JavaScript动画演示
希尔排序JavaScript动画演示
相关问答
Q1: JS常用的排序算法有哪些，如何实现这些算法
1.冒泡排序
var bubbleSort = function (arr) {
var flag = true;
var len = arr.length;
for (var i = 0; i len - 1; i++) {
flag = true;
for (var j = 0; j len - 1 - i; j++) {
if (arr[j] arr[j + 1]) {
var temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
flag = false;
}
}
if (flag) {
break;
}
}
};
2.选择排序
var selectSort = function (arr) {
var min;
for (var i = 0; i arr.length-1; i++) {
min = i;
Q2: js数组按照两个条件排序
你好，这个问题我这样解决的，你看下：
var arr= [
{name:'qqq', num:2,time:'2015-06-08 13:44:18'},
{name:'www', num:3,time:'2015-06-08 13:44:18'},
{name:'eee', num:4,time:'2015-06-07 13:40:18'},
{name:'rrr', num:4,time:'2015-06-08 13:44:18'},
{name:'yyy', num:6,time:'2015-06-07 13:40:18'},
];
arr.sort(function(a, b){
if (a.num === b.num) {
return new Date(b.time.replace(/-/g, "/")) - new Date(a.time.replace(/-/g, "/"))
} else {
return b.num - a.num;
}
});
console.log(arr); // yyy,rrr,eee,www,qqq
希望是你想要的答案，望采纳~~
Q3: js 按名称排序
1. 冒泡排序吧！
交换那里为什么这么做，看上去Books应该是Array, push是array的方法，是在array最后添加若干元素。而Books[i]应该是一个Book，你确定他有push这个方法吗？
这么写就可以了：
var tmp =$scope.reader.Books[j],
$scope.reader.Books[j] = $scope.reader.Books[j + 1],
$scope.reader.Books[j + 1] = tmp;
2. 另外若不考虑排序的稳定性可以使用js原生的sort，很高效的。
1)
var arr = [1, 3, 2, 4];
arr.sort(); //arr 变成了[1, 2, 3, 4]
2)
//按名称排序。
var arr = [{k: 1, v: 's'}, {k: 3, v: 's'}, {k: 2, v: 'f'}, {k: 4, v: 'h'}];
arr.sort(functoin(a, b) {
return a.k - b.k;
});
//arr编程 [{k: 1, v: 's'}, {k: 2, v: 'f'}, {k: 3, v: 's'}, {k: 4, v: 'h'}
即可以按arr.k进行排序。
sort中的这个参数是个函数。函数返回负数表示a应该排在b的前面，正数相反（b在a的前面）。
3)
js原生的sort排序在不同的浏览器中的实现是不同的。请看下例：
在2)中若arr = [{k: 1, v: 's'}, {k: 3, v: 's'}, {k: 1, v: 'f'}, {k: 4, v: 'h'}]
即第2个（从0开始的）和第2个数据的k一样（arr[0].k==1 arr[2].k == 1）
这样的数据用2）的方式排序的结果怎么样的？
结果可能是： sfsh也有可能是fssh，因为sort里面的那个函数并没有强调返回0时谁应该在前面。
这就是排序的稳定性，稳定排序是指：排序时对于值相同的元素，其相对位置不会发生变化。据我说知：firefox排序算法是合并排序；chrome在对待少量数据是用插入排序，对待数据量较大时用快速排序（好像是以10个元素个数为界限）；ie排序算法我不知道，但是好像它的排序很慢，它用的排序也是不稳定的（会不会用的是选择排序呢？）。
现在说一下个算法的稳定性和效率吧：
a).快排。顾名思义，效率很高（o(nlgn)），chrome选择了他，并做了优化（少量数据用插入排序优于快速排序的），效率很高，一般的排序都选择用它；但他是非稳定排序。
b).合并排序。效率比快排差(时间负责度o(nlgn)，空间复杂度o(n))，一般较少用于排序；他是稳定排序。
c)堆排序。o(nlgn)； 非稳定排序。
d)冒泡、插入 排序。 o(n^2)； 稳定排序。
e)选择排序。 o(n^2): 非稳定排序。
这里说了好多废话。。。
4）给你写个排序怎么样。你要就说，我就去写，不要就不写了。你的冒泡排序效率很低的。。。
Q4: Js选择排序的问题。我这段代码，为何实现不了。
大哥，你这段代码问题大了。给你3个排序的方式，自己研究。
冒泡排序：（耗时长）
var box=[1,3,5,7,9,2,4,6,8];
for(var i=0;ibox.length;i++){
for(var j=0;jbox.length-i;j++){
if(box[j]box[j+1]){
var tmp=box[j];
box[j]=box[j+1];
box[j+1]=tmp;
}
}
}
console.log(box);
快速排序：（耗时短）
var box=[1,3,5,7,9,2,4,6,8];
function quick(args){
if(args.length=1){return args}
var baseIndex=Math.floor(args.length/2);
var baseValue=args.splice(baseIndex,1)[0];
var left=[];
var right=[];
for(var i=0;iargs.length;i++){
if(args[i]baseValue){
left.push(args[i]);
}else{
right.push(args[i]);
}
}
return quick(left).concat(baseValue,quick(right));
}
console.log(quick(box));
sort方法：ascii表方式排序
var box=[1,3,5,7,9,2,4,6,8];
console.log(box.sort());
Q5: js数组排序的几种方法
一、 冒泡排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：稳定
步骤： 1、比较相邻的元素。如果第一个比第二个大，就交换他们两个；
2、对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样，最后的元素应该会是最大的数；
3、针对所有的元素重复以上的步骤，除了最后一个；
4、持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
二、选择排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：不稳定
步骤： 1、每一次循环，找到最小的那个数，并用变量记住它的索引
2、然后将最小值放在它该在的位置上
3、持续对越来越少的元素重复上面的步骤
三、插入排序
平均复杂度：o(n^2) 空间复杂度：o(1) 稳定性：稳定
（1）直接插入排序：将第一个数和第二个数排序，然后构成一个有序序列；将第三个数插入进去，构成一个新的有序序列；对第四个数、第五个数......直到最后一个数，重复第二步
（2）二分插入排序：将寻找每个数插入位置的方法改为折半比较即可
四、Shell排序（插入排序的一种，又称为缩小增量排序）
平均复杂度：o(nlogn) 空间复杂度：o(1) 稳定性：不稳定
步骤：把数组按下标的一定增量分组，然后对每组使用直接插入排序
想学习更多前端开发的知识，就来北京尚学堂！
js中的选择排序算法的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js选择排序和冒泡排序、js中的选择排序算法的信息别忘了在本站进行查找喔。
