当前位置:首页 > JavaScript

js实现列表排序

2026-03-15 23:48:04JavaScript

数组排序方法

JavaScript提供了内置的Array.prototype.sort()方法,可以对数组进行原地排序。默认情况下,sort()将元素转换为字符串并按照UTF-16代码单元顺序进行排序。

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

数字排序

对于数字数组,直接使用sort()可能不会得到预期结果,因为默认按字符串比较。需要提供比较函数:

js实现列表排序

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]

对象数组排序

当需要对对象数组根据某个属性排序时,同样需要使用比较函数:

js实现列表排序

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 }
];

// 按value属性升序
items.sort((a, b) => a.value - b.value);

// 按name属性排序
items.sort((a, b) => {
  const nameA = a.name.toUpperCase();
  const nameB = b.name.toUpperCase();
  if (nameA < nameB) return -1;
  if (nameA > nameB) return 1;
  return 0;
});

稳定排序

ES2019规定sort()必须是稳定排序。对于具有相同排序键的元素,它们将保持原始顺序:

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

data.sort((a, b) => a.age - b.age);
// 两个age为20的项保持原始相对顺序

自定义排序算法

如果需要实现特定排序算法,可以手动编写:

// 冒泡排序实现
function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

性能考虑

对于大型数组,内置的sort()方法通常比手动实现的算法更高效,因为JavaScript引擎会针对不同情况使用优化的排序算法(如快速排序、插入排序等混合策略)。

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

相关文章

vue 实现列表

vue 实现列表

Vue 实现列表的方法 在 Vue 中实现列表通常使用 v-for 指令,结合数组或对象数据渲染动态列表。以下是几种常见的实现方式: 基础列表渲染 使用 v-for 指令遍历数组,渲染列表项。ite…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

h5实现展开列表

h5实现展开列表

使用HTML5和CSS实现展开列表 在HTML5中,可以通过结合CSS和JavaScript实现展开列表效果。以下是几种常见的方法: 方法1:使用details和summary标签 HTML5提供…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…