当前位置:首页 > JavaScript

js 实现排序

2026-04-05 08:12:25JavaScript

JavaScript 排序方法

JavaScript 提供了多种排序方式,可以根据需求选择合适的实现方法。以下是常见的几种排序实现方式:

使用 Array.prototype.sort()

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

const arr = [3, 1, 4, 2];
arr.sort(); // [1, 2, 3, 4]

对于数字排序,需要传入比较函数:

const nums = [10, 5, 40, 25];
nums.sort((a, b) => a - b); // 升序 [5, 10, 25, 40]
nums.sort((a, b) => b - a); // 降序 [40, 25, 10, 5]

冒泡排序实现

冒泡排序通过多次比较相邻元素并交换位置实现排序:

function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

快速排序实现

快速排序使用分治法策略,效率较高:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const pivot = arr[0];
  const left = [];
  const right = [];

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) left.push(arr[i]);
    else right.push(arr[i]);
  }

  return [...quickSort(left), pivot, ...quickSort(right)];
}

对象数组排序

对对象数组按特定属性排序:

const users = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 30 }
];

// 按年龄升序
users.sort((a, b) => a.age - b.age);

// 按名字字母顺序
users.sort((a, b) => a.name.localeCompare(b.name));

稳定排序实现

ES2019 开始 sort() 已经是稳定排序,对于旧环境可以这样实现:

function stableSort(arr, compare) {
  return arr
    .map((item, index) => ({ item, index }))
    .sort((a, b) => compare(a.item, b.item) || a.index - b.index)
    .map(({ item }) => item);
}

性能考虑

对于大数据集:

  • 原生 sort() 通常性能最好
  • 快速排序适合通用场景
  • 冒泡排序仅适用于教学或极小数据集

特殊排序需求

实现自定义排序规则:

js 实现排序

const items = ['A1', 'A10', 'A2', 'A11'];
items.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
// 结果: ['A1', 'A2', 'A10', 'A11']

注意事项

  • sort() 会修改原数组,如需保留原数组需先复制
  • 比较函数应返回数字而非布尔值
  • 对于非ASCII字符排序需考虑本地化规则

以上方法涵盖了JavaScript中常见的排序需求,可以根据具体场景选择最适合的实现方式。

标签: js
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现上传文件

js实现上传文件

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

js 实现跳转

js 实现跳转

使用 window.location.href 进行跳转 通过修改 window.location.href 可以跳转到指定 URL,浏览器会加载新页面: window.location.hre…

js实现图片放大

js实现图片放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性实现图片放大效果。当鼠标悬停时,图片会平滑放大。 const img = document…