还不懂JS数组排序?看懂这篇就够了(附代码)
myzbx 2025-07-02 23:17 12 浏览
相信大家对数组排序都不陌生,在开发中我们通常会使用sort方法进行数组的排序。今天我主要带大家回顾一下JS中几种常用的数组排序方式。
1. sort方法
基本思路:
sort方法默认按照字符的ASCII码进行升序排序。可以传一个函数作为参数并返回一个数值实现升序或降序排列。
代码实现:
var arr = [18, 2, 10, 9, 88, 66, 22];
arr.sort(function (a, b) {
return b - a; //降序排序
// return a - b; //升序排序
});
console.log(arr); //[88,66,22,18,10,9,2]
2. reverse方法
基本思路:
reverse同样是数组中的排序方法,直接调用即可。不过它只能实现数组的逆序排序,并且会直接在原数组上进行修改。
代码实现:
var arr = [18, 2, 10, 9, 88, 66, 22];
arr.reverse();
console.log(arr); //[22,66,88,9,10,2,18]
3. 冒泡排序
基本思路:
冒泡排序可以说是数组排序最经典的排序方式。它的原理是指定一个规则,每次比较相邻的两个数,如果不符合规则就互换位置,这样每一轮比较就能把最大或者最小的值放在数组最后一位,然后继续对未排序的数组重新进行规则比较。
代码实现:
var arr = [18, 2, 10, 9, 88, 66, 22];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); // [2, 9, 10, 18, 22, 66, 88]
4. 选择排序
基本思路:
先假设数组中的第一个元素为最小值,对应一个变量minIndex指向它的下标,然后让该值和剩余的所有值进行比较,如果小于该值,则将minIndex指向较小的值的下标,然后让minIndex对应的值和剩余的值进行比较,重复此操作至本轮循环结束,从而确定了当前最小值的下标。然后让minIndex对应的值和数组第一个未排序的元素进行交换,这样就确定了一个最小值,之后开始第二轮循环,忽略已排序的元素,假设第二个值为最小值,再次进行上述操作,以此类推,最终实现数组从小到大的排序。
代码实现:
var arr = [18, 2, 10, 9, 88, 66, 22];
for (var i = 0; i < arr.length - 1; i++) {
var minIndex = i;
for (var j = i + 1; j < arr.length; j++) {
if (arr[minIndex] > arr[j]) {
minIndex = j;
}
}
var temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
console.log(arr); // [2, 9, 10, 18, 22, 66, 88]
5. 插入排序
基本思路:
插入排序是将数组第一个元素看做一个有序队列,把剩下的元素当成是未排序队列。从头到尾依次扫描未排序序列,把每个元素在已经排序的元素队列中从后向前依次比较,如果已排序元素大于新元素,则继续比较,直到找到小于或等于新元素的已排序元素,然后将新元素插入到该元素后面。
代码实现:
var arr = [18, 2, 10, 9, 88, 66, 22];
for (var i = 0; i < arr.length; i++) {
for (var j = i; j >= 0; j--) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); // [2, 9, 10, 18, 22, 66, 88]
6. 快速排序
基本思路:
快速排序是对冒牌排序的一种改进,它需要先取出数组的中间值作为基数,再准备两个新的数组,把原数组中剩余的值一一和它进行比较,小于它的放在左边数组,大于它的放在右边数组,然后左右两个数组再次重复上述操作,最后再把所有的数组进行合并就会获得完成排序后的新数组。
代码实现:
var arr = [18, 2, 10, 9, 2, 9, 88, 66, 22];
var quickSort = function (arr) {
if (arr.length <= 1) {
return arr;
}
var midIndex = Math.floor(arr.length / 2);
var mid = arr[midIndex];
arr.splice(midIndex, 1);
var leftArr = [];
var rightArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < mid) {
leftArr.push(arr[i]);
} else {
rightArr.push(arr[i]);
}
}
return quickSort(leftArr).concat([mid], quickSort(rightArr));
};
console.log(quickSort(arr)); // [2, 2, 9, 9, 10, 18, 22, 66, 88]
相关推荐
- 掌握JavaScript中的Call和Apply,让你的代码更强大、更灵活
-
在学习JavaScript时,你可能会遇到call和apply这两个方法。它们的作用其实很相似,都是用来调用函数并设置函数内部的this值,但它们的使用方式稍有不同。想象一下,你和朋友们一起拍照。ca...
- 性能调优方面,经常要优化跑的最慢的代码,教你一种快速的方法
-
在我们遇到性能问题的时候,很多时候需要去查看性能的瓶颈在哪里,本篇文章就是提供了多种常用的方案来监控函数的运行时间。1.time首先说明,time模块很多是系统相关的,在不同的OS中可能会有一些精度差...
- call和apply的实现方式_call和apply用法
-
call和apply的实现方式1、函数Function.call()的实现//第一步简单是实现call()varfoo={value:”1”,bar:function(){conso...
- 线上问题排查:接口超时_接口超时时间设置多少合适
-
最近就看到了一个非常厉害的关于“接口超时”问题排查的帖子,从应用排查到内核级别。虽然看到后面的时候我已经有点跟不上了,但是对于整个问题排查的过程还是比较清晰的。(细节不重要,排查思路,方向值得学习)问...
- javascript中的call方法的另一种实现方式-更接近原方法
-
上集我们说到对应的我们自己实现的call方法还是有一点纰漏,这里我们就解决它//一、预备知识(简单介绍)//1、Function.prototype.call()//语法:function....
- 链接器是如何一步步发明出来的?_如何使用连接器
-
在计算机编程的早期年代,你面临一个挥之不去的的噩梦。。。你找了一个刚刚运行成功的程序仔细看了看:; main.asm - 主程序start: &nb...
- Day59:回调(callback)函数_回调 callback
-
定义Acallbackisafunctionthatispassedasanargumenttoanotherfunctionandisexecutedafteri...
- 大促数据库压力激增,如何一眼定位 SQL 执行来源?
-
作者:京东科技王奕龙你是否曾经遇到过这样的情况:在大促活动期间,用户访问量骤增,数据库的压力陡然加大,导致响应变慢甚至服务中断?更让人头疼的是,当你试图快速定位问题所在时,却发现难以确定究竟是哪个业...
- 一键追欠料!WPS表格实战MRP欠料计算-7
-
昨天第6章内容主要聚焦于本报表的核心欠料运算。通过子件库存的引用以及累计需求的计算,计算出了子件的累计欠料。累计欠料的显示方式是按日期进行逐日累加,并不能清晰的看到每张订单欠料多少?所以在今日第7章的...
- Python教程(二十五):装饰器–函数的高级用法
-
今天您将学习什么什么是装饰器以及如何创建装饰器函数装饰器和类装饰器带参数的装饰器装饰器的实际应用真实世界示例:日志记录、性能监控、缓存、权限验证什么是装饰器?装饰器是Python中的一种...
- 在 Excel 日历制作中,尤其是动态日历方案,会用到的多个函数详解
-
在Excel日历制作中,尤其是动态日历方案,会用到多个核心函数。下面我将详细解析这些函数的作用、参数和使用技巧:核心日期函数1.DATE(year,month,day)作用:创建指定日期参...
- java高级用法之:在JNA中将本地方法映射到JAVA代码中
-
简介不管是JNI还是JNA,最终调用的都是native的方法,但是对于JAVA程序来说,一定需要一个调用native方法的入口,也就是说我们需要在JAVA方法中定义需要调用的native方法。对于JN...
- 14.4 查找与引用函数综合应用 - 下
-
一、使返回错误值以简化公式例提取一二三级科目名称在下图所示的科目代码表中,A列为科目代码,B列为对应科目名称。A列科目代码中长度为4的为一级代码,长度为6的为二级代码,长度为8的为三级代码。要求根据...
- 记一次酣畅淋漓的JavaScript逆向_js逆向webpack
-
背景介绍今天在写爬虫的练习题时遇到了这样一个难题:目标资源是一个图片的url,但是不同于以往的情况,我在http响应记录里搜索这个图片的url,发现并不能搜到。从逻辑上来讲,这个url被展示到浏览器上...
- 「Postman」测试(Tests)脚本编写和断言详解
-
测试确认您的API按预期工作,服务之间的集成运行可靠,并且新开发没有破坏任何现有功能。您可以使用JavaScript为PostmanAPI请求编写测试脚本。当您的API项目出现问题时...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)