当前位置:首页 > JavaScript

js排序实现

2026-04-06 19:08:23JavaScript

JavaScript 数组排序方法

JavaScript 提供了多种数组排序的方式,包括内置方法和自定义排序函数。以下是常见的实现方法:

使用 Array.prototype.sort() 方法

默认情况下,sort() 方法将元素转换为字符串并按 Unicode 码点排序:

const arr = [3, 1, 4, 1, 5, 9];
arr.sort(); // 结果为 [1, 1, 3, 4, 5, 9]

自定义排序函数

通过传递比较函数可以实现更复杂的排序逻辑:

const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b); // 升序排列
numbers.sort((a, b) => b - a); // 降序排列

对象数组排序

对对象数组排序需要指定比较的属性:

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 }
];
items.sort((a, b) => a.value - b.value); // 按value属性排序
items.sort((a, b) => a.name.localeCompare(b.name)); // 按name属性排序

高级排序技巧

稳定排序实现

ES2019 规定了 sort() 必须是稳定排序,但旧版浏览器可能需要 polyfill:

const stableSort = (arr, compare) => {
  const mapped = arr.map((el, i) => ({ el, i }));
  mapped.sort((a, b) => compare(a.el, b.el) || a.i - b.i);
  return mapped.map(({ el }) => el);
};

多条件排序

可以组合多个条件进行排序:

const students = [
  { name: 'Alice', grade: 90, age: 20 },
  { name: 'Bob', grade: 90, age: 18 }
];
students.sort((a, b) => {
  if (a.grade !== b.grade) return b.grade - a.grade;
  return a.age - b.age;
});

性能优化

对于大数据量排序,可以考虑以下优化方案:

TypedArray 排序

处理数值数组时使用 TypedArray 性能更好:

const numbers = new Float64Array([40, 100, 1, 5, 25]);
numbers.sort(); // 直接排序,无需比较函数

Web Worker 并行排序

对于超大数组可以使用 Web Worker 避免阻塞主线程:

// main.js
const worker = new Worker('sort-worker.js');
worker.postMessage(largeArray);
worker.onmessage = (e) => {
  const sortedArray = e.data;
};

// sort-worker.js
self.onmessage = (e) => {
  const sorted = e.data.sort();
  self.postMessage(sorted);
};

特殊排序场景

中文排序

使用 localeCompare 实现中文按拼音排序:

const chineseNames = ['张三', '李四', '王五'];
chineseNames.sort((a, b) => a.localeCompare(b, 'zh'));

随机排序

Fisher-Yates 洗牌算法实现随机排序:

js排序实现

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

以上方法覆盖了 JavaScript 中大多数排序场景,根据具体需求选择合适的方式。对于生产环境,建议考虑使用成熟的工具库如 Lodash 的 _.sortBy 方法以获得更好的性能和稳定性。

标签: js
分享给朋友:

相关文章

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…