当前位置:首页 > JavaScript

js实现orderby

2026-04-06 14:11:13JavaScript

在JavaScript中实现orderBy功能可以通过多种方式完成,以下是几种常见的方法:

使用Array.prototype.sort()

JavaScript数组的sort()方法可以用于排序,默认按Unicode码点排序。对于数字或自定义排序,需传入比较函数。

const data = [3, 1, 4, 2];
data.sort((a, b) => a - b); // 升序 [1, 2, 3, 4]
data.sort((a, b) => b - a); // 降序 [4, 3, 2, 1]

对象数组按属性排序

若需对对象数组按某个属性排序,比较函数需访问对象属性。

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

多条件排序

通过扩展比较函数实现多条件排序。例如先按年龄升序,年龄相同再按姓名升序。

users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return a.name.localeCompare(b.name);
});

实现通用的orderBy函数

封装一个通用的orderBy函数,支持指定排序字段和方向。

function orderBy(array, key, direction = 'asc') {
  return array.sort((a, b) => {
    const valueA = a[key];
    const valueB = b[key];
    const order = direction === 'desc' ? -1 : 1;

    if (valueA < valueB) return -1 * order;
    if (valueA > valueB) return 1 * order;
    return 0;
  });
}

// 使用示例
orderBy(users, 'age', 'desc'); // 按age降序

使用Lodash库

Lodash提供了强大的_.orderBy函数,支持多字段和复杂排序。

const _ = require('lodash');
const sortedUsers = _.orderBy(users, ['age', 'name'], ['asc', 'desc']);

性能注意事项

对于大数据集,需注意sort()是原地排序(修改原数组),若需保留原数组,应先拷贝。

js实现orderby

const sortedArray = [...originalArray].sort(compareFunction);

标签: jsorderby
分享给朋友:

相关文章

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…