当前位置:首页 > JavaScript

js实现列表排序

2026-04-07 17:10:35JavaScript

数组排序方法

JavaScript 提供了 Array.prototype.sort() 方法用于对数组元素进行排序。默认情况下,该方法将元素转换为字符串并按照 Unicode 码点顺序排序。

const fruits = ['banana', 'apple', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'grape', 'orange']

数字排序

对于数字数组,直接使用 sort() 会得到错误结果,需要自定义比较函数:

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

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

对象数组排序

当排序对象数组时,需要根据特定属性进行比较:

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

// 按年龄升序
users.sort((a, b) => a.age - b.age);
console.log(users);
// [{name: 'Bob', age: 20}, {name: 'John', age: 25}, {name: 'Jane', age: 30}]

// 按名字字母顺序
users.sort((a, b) => a.name.localeCompare(b.name));
console.log(users);
// [{name: 'Bob', age: 20}, {name: 'Jane', age: 30}, {name: 'John', age: 25}]

稳定排序

ES2019 规定 sort() 必须是稳定排序(相同元素保持原始顺序)。对于需要稳定排序的复杂场景:

const items = [
  { name: 'item1', priority: 1 },
  { name: 'item2', priority: 2 },
  { name: 'item3', priority: 1 }
];

// 按优先级排序(稳定)
items.sort((a, b) => a.priority - b.priority);
console.log(items);
// [
//   {name: 'item1', priority: 1},
//   {name: 'item3', priority: 1},
//   {name: 'item2', priority: 2}
// ]

性能优化

对于大型数组,考虑使用 TypedArray 或 Web Worker 进行优化:

// 使用 Int32Array 处理大量数字
const largeArray = new Int32Array([...]);
largeArray.sort((a, b) => a - b);

自定义排序算法

如果需要实现特定排序算法(如快速排序):

js实现列表排序

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++) {
    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
  }

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

console.log(quickSort([3, 1, 4, 2])); // [1, 2, 3, 4]

标签: 列表js
分享给朋友:

相关文章

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

网页制作css 列表

网页制作css 列表

创建CSS列表样式 使用CSS可以自定义HTML列表(有序列表<ol>和无序列表<ul>)的外观,包括项目符号、缩进、颜色等。以下是一些常见的列表样式方法: 基础列表样式 通…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

jquery列表

jquery列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>),包括动态添加、删除、修改列表项,以及事件绑定等。 创建列表 使用 j…

js实现下拉刷新

js实现下拉刷新

监听触摸事件 通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。 let startY = 0; let curr…