当前位置:首页 > 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实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 /…

js实现上传文件

js实现上传文件

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。 <input type="file"…

js 实现文件上传

js 实现文件上传

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。以下是一个基础示例: <input ty…

js实现点击隐藏

js实现点击隐藏

使用CSS类切换实现点击隐藏 通过添加或移除CSS类来控制元素的显示与隐藏。定义一个隐藏样式类如.hidden { display: none; },通过事件监听切换该类。 document.que…