JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能，JS中排序算法的使用详解（附实际应用代码）

目录

JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能，JS中排序算法的使用详解（附实际应用代码）

一、为什么要使用Array.sort()

二、Array.sort() 的使用与技巧

1、基础语法

2、返回值

3、使用技巧

三、Array.sort() 的复杂用法与实际应用案例

1、多字段排序（适用于对象元素的数组，数据库排序）

2、按日期排序

3、排序稳定性

4、随机排序（洗牌算法）

5、排序结合映射优化性能

6、自定义自然排序

7、排序和分组结合

四、总结

作者：watermelo37

涉及领域：Vue、SpingBoot、Docker、LLM、python等

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序（洗牌算法）、优化排序性能等，JS中排序算法的使用详解（附实际应用代码）

一、为什么要使用Array.sort()

        Array.sort() 是 JavaScript 中用于数组排序的内置方法。表面上看，它只是一个对数组元素进行升序或降序排列的工具，但深入理解其用法后会发现，它不仅支持灵活的排序逻辑，还能结合其他数组方法，实现复杂的数据操作和优化性能。本文将从基本语法入手，逐步讲解 Array.sort() 的复杂用法，并通过丰富的实战案例，展示其在开发中的强大应用。

二、Array.sort() 的使用与技巧

1、基础语法

        Array.sort() 方法用于对数组中的元素进行原地排序，并返回排序后的数组。默认情况下，sort() 会将数组元素转换为字符串并按字典序排序。

array.sort([compareFunction]);

        compareFunction（可选）：用于定义排序顺序的函数。它接收两个参数 a 和 b：

  • 如果返回值 < 0，则 a 排在 b 前面。
  • 如果返回值 > 0，则 b 排在 a 前面。
  • 如果返回值为 0，则两者位置保持不变。

2、返回值

        Array.sort() 会按照比较器的规则修改原数组，直至排序完成，不会产生新的数组。

3、使用技巧

        Array.sort() 的核心其实就是比较函数，大多数时候需要我们自己写一个满足实际需求的比较函数。

        如果直接比较数字数组排序，会出现"10"<"6"之类的情况，因为在字符串中是先比较第一位，再往后逐步推进，“1”在字符串中在“6”前面，"1"<"6"，就不会再比较第二位了，所以"10"<"6"。

        这里举个例子：

  1. const numbers = [25, 100, 9, 2];
  2. numbers.sort();
  3. console.log(numbers); 
  4. // 输出：[100, 2, 25, 9] （按照字典序排序）

        如果只是想排序数字数组，可以写一个简单的比较函数。

  1. const numbers = [25, 100, 9, 2];
  2. numbers.sort((a, b) => a - b); // 升序排序
  3. console.log(numbers); 
  4. // 输出：[2, 9, 25, 100]

三、Array.sort() 的复杂用法与实际应用案例

1、多字段排序（适用于对象元素的数组，数据库排序）

        在实际开发中，数据对象往往需要根据多个字段排序。例如，一个用户列表需要先按角色排序，再按用户名排序。

  1. const users = [
  2.   { name: 'Alice', age: 25, role: 'user' },
  3.   { name: 'Bob', age: 22, role: 'admin' },
  4.   { name: 'Charlie', age: 35, role: 'user' },
  5.   { name: 'Dave', age: 30, role: 'admin' },
  6. ];
  7.  
  8. // 按角色升序，角色相同时按年龄升序
  9. users.sort((a, b) => {
  10.   if (a.role === b.role) {
  11.     return a.age - b.age; // 按年龄升序
  12.   }
  13.   return a.role.localeCompare(b.role); // 按角色字典序
  14. });
  15.  
  16. console.log(users);
  17. /*
  18. 输出：
  19. [
  20.   { name: 'Bob', age: 22, role: 'admin' },
  21.   { name: 'Dave', age: 30, role: 'admin' },
  22.   { name: 'Alice', age: 25, role: 'user' },
  23.   { name: 'Charlie', age: 35, role: 'user' }
  24. ]
  25. */

2、按日期排序

        可以通过将日期字符串转换为 Date 对象来实现排序。

  1. const events = [
  2.   { name: 'Event A', date: '2024-11-20' },
  3.   { name: 'Event B', date: '2023-12-25' },
  4.   { name: 'Event C', date: '2024-01-01' },
  5. ];
  6.  
  7. events.sort((a, b) => new Date(a.date) - new Date(b.date));
  8. console.log(events);
  9. /*
  10. 输出：
  11. [
  12.   { name: 'Event B', date: '2023-12-25' },
  13.   { name: 'Event C', date: '2024-01-01' },
  14.   { name: 'Event A', date: '2024-11-20' }
  15. ]
  16. */

3、排序稳定性

        从 ECMAScript 2019 开始，Array.sort() 变为稳定排序。即对于排序权重相同的元素，它们的相对顺序不会改变。

  1. const items = [
  2.   { name: 'Apple', weight: 3 },
  3.   { name: 'Banana', weight: 1 },
  4.   { name: 'Cherry', weight: 1 },
  5. ];
  6.  
  7. items.sort((a, b) => a.weight - b.weight);
  8. console.log(items);
  9. /*
  10. 输出：
  11. [
  12.   { name: 'Banana', weight: 1 },
  13.   { name: 'Cherry', weight: 1 },
  14.   { name: 'Apple', weight: 3 }
  15. ]
  16. */

4、随机排序（洗牌算法）

        实现数组的随机排序（伪随机）。

  1. const array = [1, 2, 3, 4, 5];
  2. array.sort(() => Math.random() - 0.5);
  3. console.log(array);
  4. // 输出：随机排列的数组，例如：[3, 1, 5, 2, 4]

5、排序结合映射优化性能

        当数组较大且需要频繁比较时，可以先对数据进行映射（映射到简单值），然后排序，最后恢复原始结构。这种方式可以显著提升性能。

  1. const data = [
  2.   { name: 'Alice', score: 90 },
  3.   { name: 'Bob', score: 75 },
  4.   { name: 'Charlie', score: 95 },
  5. ];
  6.  
  7. // 1. 生成映射
  8. const mapped = data.map((item, index) => ({ index, value: item.score }));
  9.  
  10. // 2. 排序
  11. mapped.sort((a, b) => b.value - a.value); // 按分数降序
  12.  
  13. // 3. 根据映射还原
  14. const result = mapped.map(m => data[m.index]);
  15. console.log(result);
  16. /*
  17. 输出：
  18. [
  19.   { name: 'Charlie', score: 95 },
  20.   { name: 'Alice', score: 90 },
  21.   { name: 'Bob', score: 75 }
  22. ]
  23. */

6、自定义自然排序

        在处理文件名或编号时，可以实现自然排序，使得数字能够按照数值大小排列。

  1. const filenames = ['file1.txt', 'file20.txt', 'file3.txt'];
  2.  
  3. filenames.sort((a, b) => {
  4.   const numA = parseInt(a.match(/\d+/)[0], 10);
  5.   const numB = parseInt(b.match(/\d+/)[0], 10);
  6.   return numA - numB;
  7. });
  8.  
  9. console.log(filenames);
  10. // 输出：['file1.txt', 'file3.txt', 'file20.txt']

7、排序和分组结合

        利用 sort() 和 reduce()，可以实现数据的分组和排序。

  1. const orders = [
  2.   { id: 1, category: 'Electronics', total: 200 },
  3.   { id: 2, category: 'Clothing', total: 50 },
  4.   { id: 3, category: 'Electronics', total: 100 },
  5.   { id: 4, category: 'Clothing', total: 75 },
  6. ];
  7.  
  8. // 按类别分组并排序
  9. const groupedAndSorted = orders
  10.   .sort((a, b) => a.category.localeCompare(b.category) || b.total - a.total)
  11.   .reduce((groups, order) => {
  12.     const { category } = order;
  13.     groups[category] = groups[category] || [];
  14.     groups[category].push(order);
  15.     return groups;
  16.   }, {});
  17.  
  18. console.log(groupedAndSorted);
  19. /*
  20. 输出：
  21. {
  22.   Clothing: [
  23.     { id: 4, category: 'Clothing', total: 75 },
  24.     { id: 2, category: 'Clothing', total: 50 }
  25.   ],
  26.   Electronics: [
  27.     { id: 1, category: 'Electronics', total: 200 },
  28.     { id: 3, category: 'Electronics', total: 100 }
  29.   ]
  30. }
  31. */

四、总结

        Array.sort() 是一个功能强大的方法，通过自定义的比较函数，可以处理各种复杂的排序逻辑。无论是简单的数字排序，还是多字段、嵌套对象、分组排序等高级应用，Array.sort() 都能胜任。同时，通过性能优化技巧（如映射排序）和结合其他数组方法（如 reduce），Array.sort() 可以用来实现高效的数据处理逻辑。

        只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

        其他热门文章，请关注：

        你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

        极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

        el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        Dockerfile全面指南：从基础到进阶，掌握容器化构建的核心工具

        在线编程实现！如何在Java后端通过DockerClient操作Docker生成python环境

        通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

        JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南

        干货含源码！如何用Java后端操作Docker（命令行篇）

        Idea启动SpringBoot程序报错：Port 8082 was already in use；端口冲突的原理与解决方案

注：本文转载自blog.csdn.net的watermelo37的文章"https://opengms-watermelo.blog.csdn.net/article/details/143933418"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！