当前位置:首页 > JavaScript

js 实现排序

2026-01-31 16:01:20JavaScript

数组排序方法

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

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

数字排序

对于数字数组,需要提供比较函数以确保正确排序:

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 items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
];

items.sort((a, b) => a.value - b.value);
console.log(items);

自定义排序算法

实现快速排序算法:

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

const sortedArray = quickSort([10, 5, 2, 3]);
console.log(sortedArray); // [2, 3, 5, 10]

稳定排序

ES2019规定了sort()必须是稳定排序,即相等元素保持原始顺序:

js 实现排序

const data = [
  { name: 'A', age: 20 },
  { name: 'B', age: 30 },
  { name: 'C', age: 20 }
];

data.sort((a, b) => a.age - b.age);
// 相同age的元素A和C保持原始相对顺序

性能考虑

对于大型数组,内置sort()方法通常比自定义实现的算法更快,因为现代JavaScript引擎对其进行了高度优化。

标签: js
分享给朋友:

相关文章

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js画图实现

js画图实现

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

vue实现js休眠

vue实现js休眠

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

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…