当前位置:首页 > JavaScript

js sort 实现

2026-01-16 13:26:01JavaScript

数组排序基础方法

JavaScript 数组的 sort() 方法默认按照字符串 Unicode 码点顺序排序。直接调用时会将元素转为字符串再比较:

const arr = [10, 2, 5, 1];
arr.sort(); // 结果为 [1, 10, 2, 5]

数字升序排序

通过比较函数实现数字升序排列:

const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
// 结果 [1, 5, 25, 40, 100]

数字降序排序

比较函数返回 b - a 可实现降序:

const nums = [15, 3, 20, 7];
nums.sort((a, b) => b - a);
// 结果 [20, 15, 7, 3]

对象属性排序

根据对象属性值排序需要自定义比较逻辑:

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 }
];
items.sort((a, b) => a.value - b.value);

字符串排序

对字符串数组进行不区分大小写的排序:

const names = ['Zoey', 'amy', 'bob'];
names.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
// 结果 ['amy', 'bob', 'Zoey']

稳定排序实现

ES2019 后 sort() 已经是稳定排序,相同值的元素保持原始相对顺序。如需自行实现稳定排序:

function stableSort(array, compareFn) {
  const indexed = array.map((value, index) => ({ value, index }));
  indexed.sort((a, b) => compareFn(a.value, b.value) || a.index - b.index);
  return indexed.map(x => x.value);
}

多条件排序

通过组合比较条件实现多级排序:

const students = [
  { name: 'Alex', grade: 15, age: 10 },
  { name: 'Bob', grade: 15, age: 8 }
];
students.sort((a, b) => {
  if (a.grade !== b.grade) return a.grade - b.grade;
  return a.age - b.age;
});

自定义排序规则

实现非标准排序逻辑,如奇偶分组:

const customArr = [3, 1, 4, 2];
customArr.sort((a, b) => {
  const aOdd = a % 2;
  const bOdd = b % 2;
  if (aOdd === bOdd) return a - b;
  return bOdd - aOdd;
});
// 结果 [1, 3, 2, 4]

性能优化建议

对大型数组排序时,避免在比较函数中进行复杂计算。可预先计算排序依据:

const bigData = /* 大型数据集 */;
bigData.forEach(item => item.sortKey = /* 计算排序键 */);
bigData.sort((a, b) => a.sortKey - b.sortKey);

js sort 实现

标签: jssort
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document…

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…