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

还不懂JS数组排序?看懂这篇就够了(附代码)

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

相信大家对数组排序都不陌生,在开发中我们通常会使用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]

相关推荐

C语言速成之数组:C语言数据处理的核心武器,你真的玩透了吗?

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴!君志所向,一往无前!数组:C语言数据处理...

ES6史上最全数JS数组方法合集-02-数组操作

数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值,如果存...

前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!

在前端开发的江湖里,JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌,你的代码却总拖后腿,页面加载慢、交互卡顿?别着急!今天带来8个超实用的JavaScript实...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出JavaScript中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...

手把手教你在Webpack写一个Loader

前言有的时候,你可能在从零搭建Webpack项目很熟悉,配置过各种loader,面试官在Webpack方面问你,是否自己实现过一个loader?如果没有去了解过如果去实现,确实有点尴尬,其...

const关键字到底该什么用?(可以用const关键字定义变量吗)

文|守望先生经授权转载自公众号编程珠玑(id:shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读,但它是真正意义上的只读吗?实际中又该如何使用const关键字...

“JavaScript变量声明三兄弟,你真的会用吗?

在JavaScript中,var、let和const是声明变量的关键字,它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点,并通过代码示例详细说明。一、相同点声明变...

ES6(二)let 和 const(es6 var let const区别)

let命令let和var差不多,只是限制了有效范围。先定义后使用不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子。以前JavaScript比较随意,...

js 里面 let 和 const的区别(js中的let)

在JavaScript(包括Vue、Node.js、前端脚本等)中,const和let是用于声明变量的两种方式,它们的主要区别如下:constvslet的区别特性constlet是否...

JDK21新特性:Sequenced Collections

SequencedCollectionsJDK21在JEP431提出了有序集合(SequencedCollections)。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...

动态编程基础——第 2 部分(动态编程是什么)

有两种方法可以使用动态规划来解决问题。在这篇文章中,我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划?它是一种简单递归的优化技术。它大大减少了解决给定...

Lambda 函数,你真的的了解吗(lambda函数用法)

什么是lambda函数lambda函数是一个匿名函数,这意味着与其他函数不同,它们没有名称。这是一个函数,它添加两个数字,写成一个命名函数,可以按其名称调用它们:defadd(x,y):...

JavaScript 数组操作方法大全(js数组操作的常用方法有哪些)

数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法(包括ES6的map、forEach、every、some、filter、find、from、of等)...

系列专栏(六):解构赋值(解构赋值默认值)

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

js列表遍历方法解读(js遍历链表)

JavaScript提供了多种遍历数组(或列表)的方法。以下是一些常用的方法及其解读:for循环:vararray=[1,2,3,4,5];for(vari=0;...