当前位置:首页 > JavaScript

js排序实现

2026-03-15 01:26:09JavaScript

JavaScript 数组排序方法

JavaScript 提供了多种方式对数组进行排序,以下是常见的实现方法:

使用 Array.prototype.sort() 方法

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

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

自定义排序函数

通过传递比较函数可以实现自定义排序:

js排序实现

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

对象数组排序

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

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 }
];
items.sort((a, b) => a.value - b.value);

稳定排序实现

ES2019 规定 sort() 必须是稳定排序:

js排序实现

const data = [
  { name: 'a', order: 1 },
  { name: 'b', order: 1 },
  { name: 'c', order: 2 }
];
data.sort((a, b) => a.order - b.order);
// 保持原始a和b的相对顺序

性能优化

对于大型数组,可以考虑使用 TypedArray 提高性能:

const numbers = new Float64Array([40, 100, 1, 5, 25]);
numbers.sort();

特殊排序需求

随机排序

实现 Fisher-Yates 洗牌算法:

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

多条件排序

const students = [
  { name: 'Alex', grade: 15, age: 20 },
  { name: 'Bob', grade: 15, age: 18 }
];
students.sort((a, b) => {
  if (a.grade !== b.grade) return a.grade - b.grade;
  return a.age - b.age;
});

注意事项

  • sort() 方法会修改原数组
  • 比较函数应返回负数、零或正数
  • 对非ASCII字符排序需考虑本地化
  • 数字排序必须使用比较函数,否则会按字符串排序

标签: js
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…