百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

js中常见的几种排序算法(js常用排序)

myzbx 2025-07-02 23:17 26 浏览

总结几种排序算法。算法在任何一门编程语言都可以实现,学好算法重点是思想,而不是语言,我们这里使用js进行演示。

当然js内部也提供了Array.prototype.sort方法进行排序我们不做具体介绍,详见:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

1.冒泡排序

实现原理:

1.依次比较相邻的两个数,如果第1个值大于第2个值,交换位置。如果第1个值小于第2个值,不交换位置。一轮下来,最后一个是最大的数
2.每下一轮开始除了最后一个之外的数重复第一步,直到只剩一个数

如图所示:

代码:

function bubbleSort(array){
  var len = array.length;
  var i;
  var j;
  var stop;

  for (i = 0; i < len - 1; i++){
    for (j = 0, stop = len - 1 - i; j < stop; j++){
      if (array[j] > array[j + 1]){
        exchange(array, j, j + 1);
      }
    }
  }
  return array;
}

function exchange(array, p1, p2){
  var temp = array[p1];
  array[p1] = array[p2];
  array[p2] = temp;
}

2.快速排序

实现原理:

1.以一个数为基准(中间的数),比基准小的放到左边,比基准大的放到右边
2.再按此方法对这两部分数据分别进行快速排序(递归原理)
3.不能再分后退出递归,并重新将数组合并

如图所示:

代码:

var quickSort = function(array) {  
// 当被分的数组只剩一个时,退出递归
if (array.length <= 1) {
return array;
   }

// 中间基准值的index
var middleIndex = Math.floor(array.length / 2);  
// 基准值
var middle = array.splice(middleIndex, 1)[0];  
var left = [];  
var right = [];  
// 小的放左边,大的放右边
for (var i = 0; i < array.length; i++) {    
    if (array[i] < middle) {  
          left.push(array[i]); 
    } else {
          right.push(array[i]); 
       }  
   }  
// 递归
// 把数组合并在一起
  return quickSort(left).concat([middle], quickSort(right));
};

3.选择排序

实现原理:

1.找出最小的数,和第一个交换位置
2.在剩下的数中,找出最二小的数,放在第二个
3.依次类推,排出顺序

如图所示:

代码:

function selectSort(array){

    var len = array.length,
        min;

    for (i=0; i < len; i++){
        // 将当前位置设为最小值
        min = i;

        // 检查数组其余部分是否更小
        for (j=i+1; j < len; j++){
            if (array[j] < array[min]){
                min = j;
            }
        }

        // 如果当前位置不是最小值,将其换为最小值
        if (i != min){
            exchange(array, i, min);
        }
    }

    return array;
}
function exchange(array, p1, p2){
    var temp = array[p1];
    array[p1] = array[p2];
    array[p2] = temp;
}

4.插入排序

实现原理:

1.把数组分为[已排序]和[未排序]两部分,第一个数为[已排序],其余为[未排序]
2.从[未排序]抽出第一个数,和[已排序]部分比较,插入到合适的位置

如图所示:

代码:

function insertSort(array) {

    var len  = array.length,     // 数组长度
        value,                      // 当前比较的值
        i,                          // 未排序部分的当前位置
        j;                          // 已排序部分的当前位置
    for (i=0; i < len; i++) {
        // 储存当前位置的值
        value = array[i];
        /*
         * 当已排序部分的当前元素大于value,
         * 就将当前元素向后移一位,再将前一位与value比较
         */
        for (j=i-1; j > -1 && array[j] > value; j--) {
            array[j+1] = array[j];
        }
        array[j+1] = value;
    }

    return array;
}

5.合并排序

实现原理:

1.不断将数组对半分,直到每个数组只有一个
2.将分出来的部分重新合并
3.合并的时候按顺序排列

如图所示:

// 被拆分的数组重新合并
function merge(left, right) {
    var result = [],
        left_index = 0,
        right_index = 0;

    // 将两个数组合并
    // 合并的时候按从小到大的顺序
    while (left_index < left.length && right_index < right.length) {
        if (left[left_index] < right[right_index]) {
            result.push(left[left_index++]);
        } else {
            result.push(right[right_index++]);
        }
    }

    // 和其他数组拼接
    return result.concat(left.slice(left_index)).concat(right.slice(right_index));
}

function mergeSort(array) {
    // 只有一个数的时候退出递归
    if (array.length < 2) {
        return array;
    }

    var middle = Math.floor(array.length / 2),
        left = array.slice(0, middle),
        right = array.slice(middle);

    // 递归
    // 不断拆分只到一个数组只有一个数
    return merge(mergeSort(left), mergeSort(right));
}

相关推荐

如何设计一个优秀的电子商务产品详情页

加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...

怎么在JS中使用Ajax进行异步请求?

大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...

中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革

前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...

前端监控 SDK 开发分享_前端监控系统 开源

一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...

Ajax 会被 fetch 取代吗?Axios 怎么办?

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...

前端面试题《AJAX》_前端面试ajax考点汇总

1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...

Ajax 详细介绍_ajax

1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...

6款可替代dreamweaver的工具_替代powerdesigner的工具

dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

福斯《死侍》发布新剧照 &quot;小贱贱&quot;韦德被改造前造型曝光

时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!

Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...

2025 年 Python 爬虫四大前沿技术:从异步到 AI

作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...

最贱超级英雄《死侍》来了!_死侍超燃

死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...

停止javascript的ajax请求,取消axios请求,取消reactfetch请求

一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...