当前位置:首页 > JavaScript

js 实现sort

2026-02-01 03:38:32JavaScript

JavaScript 实现 sort 方法

JavaScript 中的 Array.prototype.sort 方法用于对数组元素进行排序。默认情况下,sort 方法将元素转换为字符串,并按照 Unicode 码点顺序排序。如果需要自定义排序逻辑,可以传入一个比较函数。

默认排序(按 Unicode 码点)

默认情况下,sort 方法会将数组元素转换为字符串,然后比较它们的 Unicode 码点值。例如:

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

自定义排序(传入比较函数)

可以通过传入一个比较函数来实现自定义排序逻辑。比较函数接收两个参数 ab,返回值决定排序顺序:

js 实现sort

  • 返回负数:a 排在 b 前面。
  • 返回正数:b 排在 a 前面。
  • 返回 0:顺序不变。
升序排序
const arr = [10, 2, 1, 20];
arr.sort((a, b) => a - b); // 结果为 [1, 2, 10, 20]
降序排序
const arr = [10, 2, 1, 20];
arr.sort((a, b) => b - a); // 结果为 [20, 10, 2, 1]
对象数组排序

对于对象数组,可以根据对象的某个属性排序:

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];
users.sort((a, b) => a.age - b.age); // 按 age 升序排序
字符串排序

字符串排序可以直接使用 localeCompare 方法:

js 实现sort

const names = ['Alice', 'Bob', 'Charlie', 'alice'];
names.sort((a, b) => a.localeCompare(b)); // 结果为 ['Alice', 'alice', 'Bob', 'Charlie']

稳定排序

从 ES2019 开始,sort 方法被要求是稳定的(即相同值的元素在排序后保持原有顺序)。例如:

const arr = [
  { value: 1, index: 0 },
  { value: 1, index: 1 },
  { value: 2, index: 2 }
];
arr.sort((a, b) => a.value - b.value); // 相同 value 的元素保持原有顺序

性能注意事项

sort 方法的时间复杂度和具体实现有关,但通常为 O(n log n)。对于大型数组,建议避免在比较函数中执行复杂操作。

手动实现排序(示例:冒泡排序)

如果需要手动实现排序算法,以下是冒泡排序的示例:

function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // 交换元素
      }
    }
  }
  return arr;
}
const arr = [10, 2, 1, 20];
bubbleSort(arr); // 结果为 [1, 2, 10, 20]

标签: jssort
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js 实现倒计时

js 实现倒计时

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

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现图片放大缩小

js实现图片放大缩小

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

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式…