当前位置:首页 > JavaScript

js 实现排序

2026-03-02 07:08:08JavaScript

JavaScript 实现排序的方法

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

使用 Array.prototype.sort()

JavaScript 数组自带 sort() 方法,默认按 Unicode 码点排序:

const arr = [3, 1, 4, 2];
arr.sort(); // 默认排序
console.log(arr); // [1, 2, 3, 4]

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

const numbers = [40, 100, 1, 5];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 5, 40, 100]

实现快速排序算法

快速排序是高效的排序算法(平均时间复杂度 O(n log n)):

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)];
}

console.log(quickSort([3,6,8,10,1,2,1])); // [1, 1, 2, 3, 6, 8, 10]

实现冒泡排序

冒泡排序是简单的排序算法(时间复杂度 O(n²)):

function bubbleSort(arr) {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length - 1; i++) {
      if (arr[i] > arr[i + 1]) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
}

console.log(bubbleSort([5, 3, 8, 4, 2])); // [2, 3, 4, 5, 8]

对象数组排序

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

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

users.sort((a, b) => a.age - b.age);
console.log(users);
// 输出按年龄升序排列的对象数组

稳定排序实现

ES2019 开始 sort() 已经是稳定排序,如需自行实现:

js 实现排序

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);
}

这些方法涵盖了 JavaScript 中大多数排序需求,从简单到复杂场景均可适用。

标签: js
分享给朋友:

相关文章

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

js实现图片放大

js实现图片放大

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

js 实现全选

js 实现全选

实现全选功能的方法 使用 JavaScript 实现全选功能通常需要操作复选框(checkbox)的状态。以下是几种常见的实现方式。 通过 DOM 操作实现全选 // 获取全选复选框和子复选框 co…

js实现复选框

js实现复选框

实现复选框的基本方法 使用HTML的<input type="checkbox">元素创建复选框,并通过JavaScript监听其状态变化。 <input type="checkb…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…