怎样用JavaScript实现数组排序?

来源:IPIPP.com作者:头衔:全栈工程师
导读:本期聚焦于小伙伴创作的《怎样用JavaScript实现数组排序?》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《怎样用JavaScript实现数组排序?》有用,将其分享出去将是对创作者最好的鼓励。

数组排序是JavaScript开发中非常常见的操作,无论是处理列表数据、表格排序还是统计类需求,都可能会用到。下面我们就来详细了解JavaScript实现数组排序的多种方法。

怎样用JavaScript实现数组排序?

一、使用内置sort方法

JavaScript的数组原型上自带了sort()方法,这是最常用的排序方式,不需要手动实现排序逻辑,调用即可完成排序。

1. 默认排序行为

如果不传入参数,sort()会默认将数组元素转换为字符串,再按照Unicode码点顺序排序,这一点很容易踩坑。

let arr = [10, 2, 15, 1];
// 默认排序,会先转字符串再比较
arr.sort();
console.log(arr); // 输出 [1, 10, 15, 2],不符合数值排序预期

2. 传入自定义比较函数

要实现正确的数值排序,需要给sort()传入一个比较函数,比较函数接收两个参数a和b,返回值决定排序规则:

  • 如果返回值小于0,那么a会排在b前面
  • 如果返回值等于0,a和b的相对位置不变
  • 如果返回值大于0,那么b会排在a前面

实现升序排序的示例:

let numArr = [10, 2, 15, 1];
// 升序排序比较函数
numArr.sort(function(a, b) {
    return a - b;
});
console.log(numArr); // 输出 [1, 2, 10, 15]

// 也可以用箭头函数简写
let numArr2 = [10, 2, 15, 1];
numArr2.sort((a, b) => a - b);
console.log(numArr2); // 输出 [1, 2, 10, 15]

如果要实现降序排序,只需要把比较函数的返回值反过来即可:

let numArr = [10, 2, 15, 1];
numArr.sort((a, b) => b - a);
console.log(numArr); // 输出 [15, 10, 2, 1]

3. 对象数组排序

实际开发中经常会遇到对象数组的排序需求,比如按照对象的某个属性排序,同样可以用自定义比较函数实现:

let userList = [
    {name: '张三', age: 20},
    {name: '李四', age: 18},
    {name: '王五', age: 25}
];
// 按照age属性升序排序
userList.sort((a, b) => a.age - b.age);
console.log(userList);
// 输出 [
//   {name: '李四', age: 18},
//   {name: '张三', age: 20},
//   {name: '王五', age: 25}
// ]

二、手动实现常见排序算法

除了使用内置方法,了解手动实现排序算法的逻辑也有助于加深对排序原理的理解,下面介绍两种常见的排序算法实现。

1. 冒泡排序

冒泡排序的核心逻辑是重复遍历数组,每次比较相邻的两个元素,如果顺序不对就交换位置,直到整个数组有序。

function bubbleSort(arr) {
    // 浅拷贝数组,避免修改原数组
    let newArr = [...arr];
    let len = newArr.length;
    // 外层循环控制遍历轮数
    for (let i = 0; i < len - 1; i++) {
        // 内层循环控制每轮比较的次数,每轮后最大的元素会到末尾,所以次数递减
        for (let j = 0; j < len - 1 - i; j++) {
            if (newArr[j] > newArr[j + 1]) {
                // 交换两个元素的位置
                let temp = newArr[j];
                newArr[j] = newArr[j + 1];
                newArr[j + 1] = temp;
            }
        }
    }
    return newArr;
}

let testArr = [5, 3, 8, 4, 2];
console.log(bubbleSort(testArr)); // 输出 [2, 3, 4, 5, 8]
console.log(testArr); // 原数组不变,输出 [5, 3, 8, 4, 2]

2. 快速排序

快速排序是效率比较高的排序算法,核心思路是选择一个基准元素,将数组分成两部分,小于基准的放左边,大于基准的放右边,然后递归处理左右两部分,直到数组长度为1。

function quickSort(arr) {
    // 数组长度小于等于1时直接返回
    if (arr.length <= 1) {
        return arr;
    }
    // 选择中间的元素作为基准
    let pivotIndex = Math.floor(arr.length / 2);
    let pivot = arr.splice(pivotIndex, 1)[0];
    let left = [];
    let right = [];
    // 遍历数组,小于基准的放左边,大于的放右边
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    // 递归处理左右两部分,拼接结果
    return quickSort(left).concat([pivot], quickSort(right));
}

let testArr2 = [9, 7, 5, 11, 12, 2];
console.log(quickSort(testArr2)); // 输出 [2, 5, 7, 9, 11, 12]

三、不同场景的排序选择建议

在实际开发中,可以根据场景选择合适的排序方式:

  • 如果是简单的数组排序,优先使用内置的sort()方法,性能经过优化,代码也更简洁
  • 如果需要对排序逻辑做深度定制,比如多条件排序、特殊规则排序,可以自定义比较函数传给sort()
  • 如果是学习排序原理或者面试需要,可以手动实现冒泡、快速等排序算法
  • 处理超大数组时,内置sort()的实现通常是经过引擎优化的,比手动实现的基础排序算法效率更高

需要注意的是,内置sort()方法会修改原数组,如果不想改变原数组,可以先拷贝数组再排序,比如用扩展运算符[...arr]或者slice()方法拷贝。

JavaScript数组排序Array_sort排序算法自定义排序修改时间:2026-05-29 23:59:01

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。